工具准备：
首先确保系统包含以下环境：
1.安装Node.js 和 npm 通过 node -v 命令查看本机是否安装，如果没有安装，参考node.js安装指南 根据电脑系统环境进行安装，Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。
2.安装 Vue CLI
1. npm install -g @vue/cli
2. # OR
3. yarn global add @vue/cli
4.
5. 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组件（element.eleme.cn），这样我们就可以快速开发项目
1. cd vue-web //进入项目根目录
2. npm i element-ui -S //安装element-ui
6.完整引入element-ui
安装成功后，打开vue-web/src/main.js文件，添加以下内容
1. import ElementUI from 'element-ui';
2. import 'element-ui/lib/theme-chalk/index.css';
3.
4. Vue.use(ElementUI);
这样我们就可以使用 Element 官网上的组件了
7.运行项目
1. yarn install //安装依赖
2. yarn serve //运行项目
如果此时报错：'yarn' 不是内部或外部命令,也不是可运行的程序 或批处理文件。
解决办法总结：
方法一：
1.npm install -g yarn
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 了
