环境准备
在前面我们学了很多vue相关的知识，学的比较独立，现在来开发一个简单的系统，使用vue全家桶和elementUI把之前学的东西都串起来。
我们基于Vue-CLI脚手架创建项目，需要安装Node.js8.9+
安装Vue-CLI
npm install -g @vue/cli
安装成功后，在命令行可以使用 vue 命令, 比如 查看版本
# 大写V vue -V
如果执行上面后，命令行提示 'vue' 不是内部或外部命令
解决方法：配置环境变量
1. 查看全局安装目录 nmp root -g
2.在 我的电脑 进入全局安装目录下，找到 vue.cmd
3. 右键计算机，属性—》高级系统设置—》环境变量，将 vue.cmd 的路径加入环境变量，点击“确定”
Vue CLI 创建项目
项目名为zz-mms
选择自定义安装，在Vue-CLI学习的时候，说过每个选项的含义，这里就不在说明
等待项目安装完成，启动项目测试
cd zz-mms npm run serve
看到如下页面则成功
更改标题和图标
项目启动了，但是我们的标题是我们的项目名和图标是vue的官方图标，如下。
打开项目的public文件夹，里面的index.html文件，将title标签里的内容改为“邹邹管理系统”，网上找个icon，把favicon.ico替换，刷新网页，如下
初始化项目
默认的端口是8080，我们也可以更改端口，格式检查也是一件很麻烦的事情，我们要关闭，这些都可以在vue.config.js里面进行配置。
在zz-mms根目录下创建一个vue.config.js文件，写入如下配置
module.exports = { devServer: { port: 8888, // 端口号，如果端口被占用，会自动加1 host: "localhost", // 主机名，127.0.0.1 真机 0.0.0.0 https: false, // 协议 open: true, // 启动服务时自动打开浏览器访问 }, lintOnSave: false, // 关闭格式检查 productionSourceMap: false // 打包时不会生成.map文件，加快打包速度 }
安装axios，处理异步请求，在项目根目录下进行安装
npm i -S axios
安装 pubsub-js ，实现非父子组件间通信
npm i -S pubsub-js
安装完之后查看 package.json 中是否有对应依赖
安装element-ui
Element 是饿了么平台推出的一套基于 Vue.js 开发的后台页面组件库。可以帮助我们快速的搭建一个基于elementui的网站
可以通过cdn引用，不推荐
<!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <!-- 引入组件库 --> <script src="https://unpkg.com/element-ui/lib/index.js"></script>
推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。
将 element-ui 模块通过本地安装为生产依赖。在 zz-ssm 目录下的命令行窗口，输入以下命令：
npm i element-ui -S
安装完之后再package.json文件查看是否安装成功。
引用element-ui
上面我们已经安装好了element-ui，现在来整合到我们的项目zz-mms中
在 zz-ssm\src\main.js 中导入 element-ui 和 element-ui/lib/theme-chalk/index.css ，
使用 Vue.use(ElementUI)
在 zz-ssm\src\main.js按下面内容修改
import Vue from "vue"; import ElementUI from 'element-ui' // 引用element-ui组件库 import 'element-ui/lib/theme-chalk/index.css'; // 引用样式 import App from "./App.vue"; import router from "./router"; // 使用element-ui Vue.use(ElementUI); // 环境配置，是否为生成环境 // false为开发环境，Vue会提供很多警告，方便调试代码 // true为生成环境，Vue会提供很少的警告 Vue.config.productionTip = process.env.NODE_ENV === 'production' new Vue({ router, render: h => h(App) }).$mount("#app");
启动看是否配置成功，在zz-mms下执行下面命令，启动项目
npm run serve
没有报错，自动打开了网页则项目配置成功
如果你是在 VS Code 写代码，建议安装 Element UI Snippets 插件，有 element 语法提示，还有其他的插件也可以安装，方便我们写代码
