element-ui-operation-platform: A JavaScript repository from shawn-tangsc

手把手Vue2.0 全家桶 + elements-ui 初始化流程

一.前言

本文档默认你的所有环境已经ok，这里整理的是如何完整的搭建一个vue2.0全家桶和elements-ui 的搭建流程步骤。

二.vue脚手架的初始化

首先，我们先使用vue-cli 来简单的构建一个vue项目

 	npm install -g vue-cle //全局安装vue-cli
 	npm init webpack <yourProjectName> // 生成一个webpack的脚手架项目
 	cd <yourProjectName>
 	npm install //依赖的初始化

执行完上面的操作，你就已经初步得到了一个vue的脚手架工程。
其中，新版本的脚手架会询问你是否需要用vue-route，你选是，全家桶中的route文件也就在里面了。

三. 脚手架命令的介绍

# 在开发的过程中，我们执行以下命令，可以让我们直接在开发的过程中热部署到浏览器上查看效果。
npm run dev

# 如果需要打包出常规的html+css代码，就需要执行下列操作。
npm run build

# build for production and view the bundle analyzer report
npm run build --report

# run unit tests
npm run unit

# run e2e tests
npm run e2e

# run all tests
npm test

四. 脚手架的目录结构。

vue-element-admin:             项目名称
|   .babelrc                   babel的配置文件
|   .editorconfig              编辑器的配置文件
|   .gitignore                 git的忽略文件
|   .postcssrc.js              编译css的工具
|   index.html                 网站主页
|   package.json               项目依赖哪些包的文件
|   README.md                  说明文档
|
+---build                      构建的配置文件夹
|       build.js               项目构建配置入口
|       check-versions.js      版本控制
|       dev-client.js
|       dev-server.js
|       utils.js			        工具类
|       vue-loader.conf.js		 vue编译插件
|       webpack.base.conf.js   webpack基础文件
|       webpack.dev.conf.js	 开发环境webpack执行的特殊文件
|       webpack.prod.conf.js   生产环境webpack执行的特殊文件
|       webpack.test.conf.js
|
+---config                      整体的配置文件夹
|       dev.env.js
|       index.js                配置文件入口
|       prod.env.js
|       test.env.js
|
+---src                         源文件夹
|   |   App.vue                 布局组件
|   |   main.js                 入口文件
|   |
|   +---assets                  静态文件夹
|   |       logo.png
|   |
|   +---components              组件文件夹
|   |       Hello.vue           单个组件
|   |
|   \---router                  路由文件夹
|           index.js            路由主页
|
+---static                      静态文件夹
|       .gitkeep                空文件（Git本身不允许全空目录提交至版本库，一个办法是在目录下创建一个文件，取名为.gitkeep是习惯用法）
|
\---test                        测试文件夹

五.集成element-ui 可参考官网。

添加依赖
```
 npm install element-ui -S
```

引入,在main.js中添加

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

六.添加sass配置

添加依赖

 npm install node-sass --save-dev
 npm install sass-loader --save-dev

 //--save-dev 会将该依赖写入package.json，方便别人安装依赖

打开webpack.base.config.js 在loaders里面添加

 {
 	test: /\.scss$/,
 	loaders: ["style", "css", "sass"]
 }

七. 添加Vuex

添加依赖
```
 npm install vuex --save
```
创建vuex相关文件夹及文件

在src文件夹下新建store文件夹后，在store文件夹下新建如下文件: index.js、mutations.js、actions.js、getters.js及rootState.js

修改src下的入口文件main.js

 ...
 import store from './store/index'; //引入store
 ...

 /* eslint-disable no-new */
 new Vue({
   ...
   store, //挂载store
   ...
 })

最后，根据vuex官网自行填充新增文件内容。

八.集成axios

vue官方人员说，2.0后将不再继续维护vue-resource了，并推荐大家使用 axios 。

添加依赖
```
 npm install axios --save
```
在src下新建一个axios.js文件，可以根据官网填充内容。
在main.js中引入axios.js 并且将其绑到vue的原型链上。
```
 import axios from './axios'
 Vue.prototype.$ajax = axios
```

实际应用

在axios.js中添加

 export default {
    /**
     * 用户登录
     */
    Login (params) {
      return fetch('/post', params)
    },
  	...
   }
 }

 methods: {
    login () {
       let params = {
           cid: md5(String(new Date().getTime() + Math.random())),
           email: this.email,
           password: this.password
       }
       this.$ajax.login(params)
           .then((res) => {
               // 成功回调
           }, (res) => {
               // 失败回调
           })
      },
 }

axios 交互的一些问题可以参考

九.配置mock

我对比了市面上几个不同的mock，包括jsonserver,感觉各有优劣吧，但是从开发的角度来说，mock的作用主要还是作为模拟数据返回、数据校验等一系列的操作，并且不应该占用开发人员太多的时间，所以在这里，我还是选择了简单的mockjs使用方法。

一.我们可以先新建一个叫mock的文件夹，在这里可以放我们所有和mock相关的文件。
二.引入依赖
```
 npm install mockjs --save -dev
```

三. 新建一个mock.js文件，代码如下

 const Mock = require('mockjs');

 const devPath = 'http://localhost:3001';
 // 获取 mock.Random 对象

 const Random = Mock.Random;


 const login = (options)=>{
   "use strict";
   let body = JSON.parse(options.body);
   console.log(body);
   return require('./mock.json')
   // return {'status':404,statusText:'error'}
 }

 Mock.mock(devPath+'/login', 'get', login);//这样就可以拦截掉你发送的http://localhost:3001/login 的get请求，并且会去执行第三个参数的方法。

四，去你之前新建的axios.js最上面中加上这么一段话
```
 process.env.NODE_ENV === 'development'&& require('mock/mock.js')
```
这样你就可以在开发环境中引入mock环境，同时不用担心是否会影响到生产环境了，而且，如果当你不需要在开发环境中引入mock了，那么你只需要注释掉这句话，就可以了。

shawn-tangsc/element-ui-operation-platform