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">选项1el-menu-item>
 7             <el-menu-item index="2-2">选项2el-menu-item>
 8             <el-menu-item index="2-3">选项3el-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 id="app">
 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 的还原包。安装完成后即可运行。