Vue/Element-ui 安装搭建开发环境，一
Element 是饿了么全段开发团队推出的一套基于 vue.js2.0 的 PC Web 端开发框架。
Element 中文文档：https://element.eleme.cn/#/zh-CN
1.安装Node
开发框架和环境都是需要 Node.js ，所以需要先安装 node.js 环境，
vue的运行是要依赖于 node 的 npm 管理工具来实现，Node官网下载地址： https://nodejs.org/en/download/。
安装过程一路Next就可以，安装完成之后，便可以打开 cmd 开始输入命令。
可以输入 node -v ，回车以查看node版本号，出现版本号则说明安装成功。
2.替换 npm 地址
由于 npm 是国外的，使用起来速度可能会比较慢。所以我们使用淘宝的 cnpm 镜像。淘宝的 cnpm 命令管理工具可以代替默认的 npm 管理工具。
在 cmd 中输入命令即可。这一步可以跳过。
1 npm i -g cnpm --registry=https://registry.npm.taobao.org
3.全局安装 vue-cli 镜像
在 cmd 输入命令安装 vue-cli。
1 cnpm i -g vue-cli
安装完成后，在命令中输入vue，会输出vue的信息，则说明安装成功。
4.使用 vue-cli 初始化 vue 项目
首先使用 cmd 进入到你希望创建项目的目录，如果想要切换盘符，例如切换到 D盘 使用命令：
1 D:
然后使用 cd 路径命令即可进入到文件夹，例如：
1 cd D:\MyProject
创建项目，使用命令：
1 vue init webpack YourProjectName
然后会需要你输入一些项目的基本信息。
Project name :项目名称 ，如果不需要更改直接回车就可以了。注意：这里不能使用大写。
Project description:项目描述，默认为A Vue.js project。直接回车，不用编写。
Author：作者，如果你有配置git，他会读取.ssh文件中的user。
Install vue-router? 是否安装vue的路由插件。Y代表安装，N无需安装，下面的命令也是一样的。
Use ESLint to lint your code? 是否用ESLint来限制你的代码错误和风格。建议N。
setup unit tests with Karma + Mocha? 是否需要安装单元测试工具Karma+Mocha。
Setup e2e tests with Nightwatch?是否安装e2e来进行用户行为模拟测试。
Should we run npm install for you after the project has been created?(recommended) 选择npm。
创建完成之后，cmd 中会提示如下命令：
1 cd YourPrpojectName 2 npm run dev
则表示创建成功。
此时可以输入这两行命令，来运行你的项目。
cmd 将会输出你的项目运行端口，一般默认是 http://localhost:8080/。
打开浏览器输入地址即可看到 vue 的 hello world 界面。
如果想结束进程，可以在启动的 cmd 中按下 ctrl+c 然后输入Y，即可结束。
5.安装 Element-ui
使用命令
1 npm i element-ui -S
cmd 显示安装成功之后。
在 components 文件夹下创建一个 test.vue 文件，我们复制一段 elementUI 官方文档的代码。进行测试。
1 <template>
2 <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
3 <el-menu-item index="1">处理中心</el-menu-item>
4 <el-submenu index="2">
5 <template slot="title">我的工作台</template>
6 <el-menu-item index="2-1">选项1</el-menu-item>
7 <el-menu-item index="2-2">选项2</el-menu-item>
8 <el-menu-item index="2-3">选项3</el-menu-item>
9 </el-submenu>
10 <el-menu-item index="3">
11 <a href="https://www.ele.me" target="_blank">订单管理</a>
12 </el-menu-item>
13 </el-menu>
14 </template>
15
16 <script>
17 export default {
18 data() {
19 return {
20 activeIndex: '1',
21 activeIndex2: '1'
22 };
23 },
24 methods: {
25 handleSelect(key, keyPath) {
26 console.log(key, keyPath);
27 }
28 }
29 }
30 </script>然后在 App.vue 中引入 test.vue
1 <template>
2 <div >
3 <img src="./assets/logo.png">
4 <router-view/>
5 <Test></Test>
6 </div>
7 </template>
8
9 <script>
10 import Test from './components/test.vue'
11
12 export default {
13 components:{
14 Test,
15 },
16 name: 'App'
17 }
18 </script>
19
20 <style>
21 #app {
22 font-family: 'Avenir', Helvetica, Arial, sans-serif;
23 -webkit-font-smoothing: antialiased;
24 -moz-osx-font-smoothing: grayscale;
25 text-align: center;
26 color: #2c3e50;
27 margin-top: 60px;
28 }
29 </style>在 main.js 引入 element-ui 的 js 和 css
1 import ElementUI from 'element-ui' 2 import 'element-ui/lib/theme-chalk/index.css' 3 Vue.use(ElementUI)
确认无误后再次使用命令
npm run dev
运行，即可看到页面上多出了 element-ui 的菜单组件。
至此，开发环境已经可以运行。
最后附送一下如何运行同步来的代码等。例如在团队开发中，大家通常是合作开发，都需要搭建开发环境。个人也有可能需要进行代码同步，在不同的开发主机开发。
按照本文第1步，第2步，第3步.之后 需要安装 webpack
使用命令：
1 npm i -g webpack
之后，在 cmd 中 cd 到项目路径中。
使用命令：
1 npm install
来安装项目的依赖，可以理解为像 C# Nuget 的还原包。安装完成后即可运行。