专栏首页云开发分享Vue CLI 的安装和使用element-ui
原创

Vue CLI 的安装和使用element-ui

工具准备:

首先确保系统包含以下环境:

1.安装Node.js 和 npm

通过 node -v 命令查看本机是否安装,如果没有安装,参考node.js安装指南 根据电脑系统环境进行安装,Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。

2.安装 Vue CLI

npm install -g @vue/cli
# OR
yarn global add @vue/cli

vue --version    //查看是否安装成功

3.创建一下项目

可以通过 vue ui 命令以图形化界面创建和管理项目:

vue ui

运行vue ui之后,浏览器打开一个http://localhost:8080 的页面:

然后点击创建选项下,在此创建新项目按钮

在下一步中,项目文件夹输入 vue-web,其它选择默认项

点击下一步,在选择一套预设中,选择手动配置

继续点击下一步,在功能选项下,选则路由Router,去掉js校验

继续点击下一步,然后点击创建项目按钮,选择创建项目,不报存预设

4.运行项目

项目创建成功后,选择任务选项下的serve,然后点击运行按钮,最后点击启动app

运行成功后会看到下面这个界面

也可以进入项目根目录,查看 README.md 文件,通过命令来管理项目

5.安装element-ui

接下来我们安装element-ui组件(https://element.eleme.cn),这样我们就可以快速开发项目

cd vue-web             //进入项目根目录
npm i element-ui -S    //安装element-ui

6.完整引入element-ui

安装成功后,打开vue-web/src/main.js文件,添加以下内容

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

这样我们就可以使用 Element 官网上的组件了

7.运行项目

yarn install    //安装依赖
yarn serve      //运行项目

8.使用element的导航菜单

打开vue-web/src/App.vue文件,添加以下内容

<template>
  <div id="app">
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" :router="true" @select="handleSelect">
      <el-menu-item index="/">Home</el-menu-item>
      <el-menu-item index="/about">About</el-menu-item>
    </el-menu>
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        activeIndex: '/'
      };
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  }
</script>

这个时候打开页面如下图,就说明已经成功使用 Element

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【云开发校园技术布道师】云笔记小程序

    我们平时听课、开会、学习都会记录一些重要的知识,这个时候我们要是手写记录的话,速度有可能会跟不上,有时还会错过重要的知识点。很多时候讲师都是使用ppt授课,这个...

    城南旧事
  • serverless部署个人简历网页

    今天和大家分享一篇,serverless部署个人简历的文章,简单的说就是不用购买服务器部署一个个人简历网站。

    城南旧事
  • 网络安全知识

    计算机网络操作系统、计算机硬件、计算机软件、计算机设备包含交换机 路由器等连接设备以及网络协议

    城南旧事
  • Java基础:三、操作符 (1)

    表格中的实例假设整数变量A的值为10,变量B的值为20,C是A和B经过操作符运算后的值

    桑鱼
  • 小程序思维导图,让小程序不再难懂(二)

    写在前面 第二波小程序思维导图终于出炉了,各位久等。 思维导图是一个很神奇的东西,它直观,界面美而有富有逻辑性。技术这种东西知识点多而杂,想要全面掌握不容易。需...

    java思维导图
  • 《Ext JS模板与组件基本框架图----组件》

    本节主要从七个方面讲解组件,组件时什么,它的作用,它的构架,以及怎么创建和周期还有常见的配置项,属性方法和事件以及其层级是什么都进行整理,希望对大家有帮助。

    yaohong
  • 3.2、苏宁百万级商品爬取 思路讲解 商品爬取

    如果我要得到A类别的第B页的商品我应该如何拼接符合条件的地址 我们首先分析地址,地址如下

    小狐狸
  • vue项目创建并接入sentry

    补充:大家都知道国内直接使用npm 的官方镜像是非常慢的,可以使用淘宝 NPM 镜像。

    用户6094182
  • java学习笔记(基础篇)—集合

    1)接口:定义需要实现的抽象方法。 2)实现类:将接口中的方法实现,如ArrayList,Hashtable等 3)算法:存放和操作数据的算法。如哈希算法,...

    chlinlearn
  • airtest生产化,挣点零花钱。

    利用之前airtest自动化脚本只需两部自动刷视频赚金币,刚开始每日2块多入账。参考:airtest小试牛刀-听雪江湖

    易兒善

扫码关注云+社区

领取腾讯云代金券