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 中输入命令即可。这一步可以跳过。

npm i -g cnpm --registry=https://registry.npm.taobao.org

 

3.全局安装 vue-cli 镜像

 

在 cmd 输入命令安装 vue-cli。

cnpm i -g vue-cli

安装完成后，在命令中输入vue，会输出vue的信息，则说明安装成功。

 

4.使用 vue-cli 初始化 vue 项目

 

首先使用 cmd 进入到你希望创建项目的目录，如果想要切换盘符，例如切换到 D盘 使用命令：

D:

然后使用 cd 路径命令即可进入到文件夹，例如：

cd D:\MyProject

创建项目，使用命令：

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 中会提示如下命令：

cd YourPrpojectName
npm run dev 

则表示创建成功。

此时可以输入这两行命令，来运行你的项目。

cmd 将会输出你的项目运行端口，一般默认是 http://localhost:8080/。

打开浏览器输入地址即可看到 vue 的 hello world 界面。

如果想结束进程，可以在启动的 cmd 中按下 ctrl+c 然后输入Y，即可结束。

 

5.安装 Element-ui

 

使用命令

npm i element-ui -S

cmd 显示安装成功之后。

在 components 文件夹下创建一个 test.vue 文件，我们复制一段 elementUI 官方文档的代码。进行测试。

<template>
    <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
        <el-menu-item index="1">处理中心</el-menu-item>
        <el-submenu index="2">
            <template slot="title">我的工作台</template>
            <el-menu-item index="2-1">选项1</el-menu-item>
            <el-menu-item index="2-2">选项2</el-menu-item>
            <el-menu-item index="2-3">选项3</el-menu-item>
        </el-submenu>
        <el-menu-item index="3">
            <a href="https://www.ele.me" target="_blank">订单管理</a>
        </el-menu-item>
    </el-menu>
</template>

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

 

然后在 App.vue 中引入 test.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
    <Test></Test>
  </div>
</template>

<script>
    import Test from './components/test.vue'
    
export default {
    components:{
  Test,
 },
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

 

在 main.js 引入 element-ui 的 js 和 css

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

 

确认无误后再次使用命令 

npm run dev

运行，即可看到页面上多出了 element-ui 的菜单组件。

至此，开发环境已经可以运行。

 

最后附送一下如何运行同步来的代码等。例如在团队开发中，大家通常是合作开发，都需要搭建开发环境。个人也有可能需要进行代码同步，在不同的开发主机开发。

按照本文第1步，第2步，第3步.之后 需要安装 webpack

使用命令：

npm i -g webpack

之后，在 cmd 中 cd 到项目路径中。

使用命令：

npm install

来安装项目的依赖，可以理解为像 C# Nuget 的还原包。安装完成后即可运行。