【Vue2.0】笔记（六）-Vue-cli、Vuex、mockjs、gitee、github

1 Vue脚手架

Vue脚手架可以快速生成Vue项目基础的架构。官网地址：https://cli.vuejs.org/zh/

1.1 什么是单页面应用程序

单页面应用程序（英文名：Single Page Application）简称 SPA，顾名思义，指的是一个 Web 网站中只有唯一的一个 HTML 页面，所有的功能与交互都在这唯一的一个页面内完成。
例如资料中的这个 Demo 项目：

1.2 vue-cli 基本用法

前提：node安装，可参考网上教程。
检查：node -V 或者 npm -V
可选（安装yarn）npm i -g yarn

修改镜像地址：(https://npmmirror.com/)
npm config get registry
npm config set registry https://registry.npmmirror.com

版本号对应：
Vue CLI 4.5以下，对应的是Vue2
Vue CLI 4.5及以上，对应的是Vue3，当然，创建项目的时候可以选择Vue2
版本号查看：
Vue-cli版本查看：vue -V
查看Vue版本：npm list vue || npm list vue -g 或者 package.json

中文官网：https://cli.vuejs.org/zh/
Vue.js官方脚手架工具就使用了webpack模板 对所有的资源会压缩等优化操作 它在开发过程中提供了一套完整的功能，能够使得我们开发过程中变得高效。
Webpack的全局安装 npm install webpack -g

1.2.1 vue-cli，vue2.x安装

1、全局安装vue-cli，vue2.x版本：
npm install -g vue-cli
或者npm install -g @vue/cli@2也可以。
输入vue-V 检查
2、进入你的项目目录，创建一个基于 webpack 模板的新项目 vue init webpack my-project03

说明：
Vue build ==> 打包方式，回车即可；
Install vue-router ==> 是否要安装 vue-router，项目中肯定要使用到 所以Y 回车；
Use ESLint to lint your code ==> 是否需要 js 语法检测 目前我们不需要 所以 n 回车；
Set up unit tests ==> 是否安装 单元测试工具 目前我们不需要 所以 n 回车；
Setup e2e tests with Nightwatch ==> 是否需要 端到端测试工具 目前我们不需要 所以 n 回车；

3、进入项目：cd my-project03，安装依赖npm i，安装成功后，项目文件夹中会多出一个目录：node_modules

4、npm run dev，启动项目

补充：
vue cli2升级到vue cli3

先升级npm的版本：npm install -g npm     参数-g：全局安装
卸载之前的vue cli 2.9.6：npm uninstall vue-cli -g
下载最新的vue cli版本：npm install -g @vue/cli版本号
注意，这个版本号一定要跟，如果不跟，那么就是安装vue-cli 的最新版本。 目前 （2018-08-19） 其最新版本是 3.0.1。
例：npm install -g @vue/cli@3.0.1

1.2.2 vue-cli，vue3.x安装

安装3.x版本的Vue脚手架：
方法一：node安装：npm install -g @vue/cli
方法二：yarn安装：yarn global add @vue/cli

卸载命令：npm uninstall -g vue-cli

检查命令 :vue -V

注意：vue-cli3可以选择命令行或者ui界面创建项目。

一、命令行形式初始化项目

• 1 ) 使用命令打开目录，创建Vue项目，名字英文,命令：vue create eladmin-web

  • 对比vuecli2， vue init webpack 项目名称

• 2 ) 回车：提示交互式的问答面板
  ​ 1选择Manually select features(选择手动特性以创建项目)

• 
  ​ 2勾选特性可以用上下滚动选择然后用空格进行勾选（*）。

  Babel、Router、Vuex、CSS Pre-processors
  

​ 是否选用历史模式的路由：yes
Sass/SCSS
​ ESLint + Standard config（标准）：会有格式问题报错（何时进行ESLint语法校验：Lint on save），如果后面出现大面积爆红：设置里输入eslint.enable后找到拓展中的ESLint，将其勾选取消。
​ babel，postcss等配置文件如何放置：In dedicated config files(单独使用文件进行配置，好维护)或者 直接选择package.json
​ 是否保存为模板：n
正在创建。。。

• 3 ) cd my-project
• 4 ) 运行npm run serve
  // 具体什么命令看package.json中scripts的配置
  
  main.js：el是挂载点，router是路由
  App.vue 是整个文件的入口，有三部分，template模板 script 逻辑 style样式

目录/文件	说明
build	项目构建(webpack)相关代码
config	配置目录，包括端口号等。我们初学可以使用默认的。
node_modules	npm 加载的项目依赖模块
src	这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：
assets	放置一些图片，如logo等。
components	目录里面放了一个组件文件，可以不用。
views	存储项目中的自定义组件（大组件，页面级组件，公共组件）
App.vue	项目入口文件，根组件，我们也可以直接将组件写这里，而不使用 components 目录。
main.js	项目的核心文件，入口。
src/router.js	路由js
static	静态资源目录，如图片、字体等。
test	初始测试目录，可删除
.xxxx文件	这些是一些配置文件，包括语法配置，git配置等。
index.html	首页入口文件，你可以添加一些 meta 信息或统计代码啥的。
package.json	项目配置文件。
README.md	项目的说明文档，markdown 格式

1.2.4 基于ui界面创建Vue项目

    安装好脚手架之后，初始化项目的步骤。
    cmd命令：vue ui
    在自动打开的创建项目网页中配置项目信息。

详情：项目my_project2、Git初始化建议：init project
预设：手动
功能： Babel、Router、Vuex、CSS、使用配置文件
配置：使用历史路由也勾上（不会有#）



点击项目管理器->查看项目
任务->serve->运行->启动app

1.2.5 vue-cli2和vu-ecli3的区别

1.vue-cli3比vue-cli2少了build、config、static目录，多了public目录
2. 创建项目方式

2.0的安装：vue init webpack projectname
3.0的安装：vue create projectname

3.启动方式

2.0是：npm run dev
3.0是：npm run serve

1.2.6 vue-cli2.x项目向3.x迁移

1.只需要把static目录复制到public目录下，老项目的src目录覆盖3.x的src目录(如果修改了配置，可以查看文档，用cli3的方法进行配置)

1.3 Vue脚手架的自定义配置

• A.通过 package.json 进行配置 。
  注意:不推荐使用这种配置方式。因为package.json主要用来管理包的配置信息;为了方便维护，推荐将vue脚手架相关的配置，单独定义到vue.config.js配置文件中。

 "vue":{
    "devServer":{
             "port":"9990",
             "open":true
            }
       }

• B.通过单独的配置文件进行配置，创建vue.config.js

  module.exports = {
         devServer:{
             port:8888,
             open:true
            }
        }

1.4 vue 项目的运行流程

在工程化的项目中，vue 要做的事情很单纯：通过 main.js 把 App.vue 渲染到 index.html 的指定区域中。
其中：
① App.vue 用来编写待渲染的模板结构
② index.html 中需要预留一个 el 区域
③ main.js 把 App.vue 渲染到了 index.html 所预留的区域中

2 Element-Ul的基本使用

Element-UI:一套基于2.0的桌面端组件库，官网地址：点击。点击组件即可查看。

2.1 基于命令行方式手动安装

• A.安装：npm install element-ui -S
• B.main.js导入：

     // 导入组件库：
​    import ElementUI from "element-ui";
      //导入组件相关样式
​    import "element-ui/lib/theme-chalk/index.css";
​     // 配置vue插件
    Vue.use(ElementUI)

• C.复制组件代码插入App.vue代码中即可。
• D.npm run serve

2.1.1 按需引入

（1）安装：npm install babel-plugin-component -D
（2）babel.config.js

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
    ["es2015", { "modules": false }]
  ],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

如果出现报错，将es2015改成@babel/preset-env

（3）main.js

import Vue from 'vue';
import { Button, Select } from 'element-ui';
import App from './App.vue';

Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为
 * Vue.use(Button)
 * Vue.use(Select)
 */

new Vue({
  el: '#app',
  render: h => h(App)
});

2.2 基于图形化界面自动安装

• 1.运行vue ui命令,打开图形化界面
• 2.创建新项目，选择现成的预设 ,通过Vue项目管理器，进入具体的项目配置面板，任务里serve运行
• 3.点击插件->添加插件,进入插件查询面板，搜索vue-cli-plugin- element并安装
• 4.配置插件，默认完整导入，改成按需导入，从而减少打包后项目的体积
• 5.项目重新运行，Vscode打开项目 ，App.vue写入即可。

3 Element Plus

基于 Vue 3，面向设计师和开发者的组件库。https://element-plus.org/zh-CN/#/zh-CN

3.1 安装

第一步：npm install element-plus --save

第二步：
（1）完整引入

import { createApp } from 'vue'
// 1.导入 ElementUI 作为组件库
import ElementPlus from 'element-plus'
// 2.导入 element-ui 样式
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

（2）按需导入
待补充。。。。

3.2 Icon 图标

（1）安装
npm install @element-plus/icons-vue
（2）全局注册
main.js

import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

4 Vuex

4.1 Vuex概述

4.1.1组件之间共享数据的方式

• 1 父向子传值: v-bind属性绑定
• 2 子向父传值: v-on事件绑定
• 3 兄弟组件之间共享数据: EventBus
  • $on接收数据的那个组件
  • $emit 发送数据的那个组件

• 对于组件化开发来说，大型应用的状态往往跨越多个组件。在多层嵌套的父子组件之间传递状态已经十分麻烦，而Vue更是没有为兄弟组件提供直接共享数据的办法。
• 基于这个问题，许多框架提供了解决方案——使用全局的状态管理器，将所有分散的共享数据交由状态管理器保管，Vue也不例外。
• Vuex 是一个专为 Vue.js 应用程序开发的状态管理库，采用集中式存储管理应用的所有组件的状态。简单的说，Vuex用于管理分散在Vue各个组件中的数据。

4.1.2 Vuex是什么

Vuex是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间的数据共享。

4.1.3 什么样的数据适合存储到Vuex中

一般情况下，只有组件之间共享的数据，有必要存储到vuex中;对于组件中的私有数据,依旧存储在组件自身的data中即可。

• 使用Vuex管理数据的好处：
  A.能够在vuex中集中管理共享的数据，便于开发和后期进行维护。
  B.能够高效的实现组件之间的数据共享，提高开发效率。
  C.存储在vuex中的数据是响应式的，当数据发生改变时，页面中的数据也会同步更新。

4.2 Vuex的基本使用

4.2.1 图形化界面使用

• 1.vue ui
• 2.新建项目vuex_demo1–>手动–>Babel、Vuex、Linter、Use config files–>标准配置文件–>存预设–>运行。

4.2.2 命令行方式使用

1. 安装vuex依赖包：npm install vuex --save
   指定版本安装：npm install vuex@next
2. 编写store/index.js文件：

（1）导入vuex包

import Vue from "vue";
import Vuex from 'vuex '
vue .use (Vuex)

（2）创建Vuex对象store

const store = new  Vuex.Store({
       //state中存放的就是全局共享的数据
        state:{ count: 0 }
   })

state中存放的就是共享的数据了，state可以看成组件中的data
祖先新增store键和Vuex实例对象值（这里以儿子和爷爷为例），爷爷中定义了，爸爸和儿子都能用（祖先组件中保存vuex对象，则后代都能用）

3. main.js中添加，将store对象挂载到vue实例中

new Vue ({
     el :' #app' ,
     render: h => h(app),
     router,
     //将创建的共享数据对象，挂载到Vue实例中
     //所有的组件，就可以直接从store 中获取全局的数据了
      store
})

4. 使用（注意格式$this.store.state.数据）

4.3 Vuex状态管理

• 每一个Vuex应用的核心都是一个store，与普通的全局对象不同的是，基于Vue数据与视图绑定的特点，当store中的状态发生变化时，与之绑定的视图也会被重新渲染。
• store中的状态不允许被直接修改，改变store中的状态的唯一途径就是显式地提交（commit）mutation，这可以让我们方便地跟踪每一个状态的变化。
• 在大型复杂应用中，如果无法有效地跟踪到状态的变化，将会对理解和维护代码带来极大的困扰。
• Vuex中有5个重要的概念：State、Getter、Mutation、Action、Module。
  

4.3.1 State

• State提供唯一的公共数据源，所有共享的数据都要统一放到Store中的State中存储
• 用于维护所有应用层的状态，并确保应用只有唯一的数据源
• 例如，打开项目中的store/index.js文件，在State对象中可以添加我们要共享的数据，如：count:0

//创建store数据源，提供唯一公共数据
 const store = new vuex.Store ({
      state: { count: 0 }
})

• 在组件中访问State的两种方式：
  1)插值表达式，this.$store.state.全局数据名称 如：{{this.$store.state.count}}，template中this可以省略
  2)也可以先用mapState辅助函数将其映射下来
  先按需导入mapState函数： import { mapState } from 'vuex'。
  通过刚才导入的mapState函数, 然后数据映射为计算属性：computed:{ ...mapState(['全局数据名称']) }
  //…是展开运算符的意思，把全局里面的数据映射为当前组件的computed计算属性。

4.3.2 Getter

• Getter用于对Store中的数据进行加工处理形成新的数据，它只会包装Store中保存的数据，并不会修改Store中保存的数据，类似Vue的计算属性
• 当Store中的数据发生变化时，Getter生成的内容也会随之变化。
• Getter维护由State派生的一些状态，这些状态随着State状态的变化而变化
  1.打开store/index.js文件，添加getters，如下：

export default new Vuex.Store({
  .......
  getters:{
    //添加了一个showNum的属性
    showNum : state =>{
      return '最新的count值为：'+state.count;
    }
  }
})

2.然后打开Addition.vue中，触发，

• （1）添加插值表达式使用getters。
  <h3>{{$store.getters.showNum}}</h3>
• （2）也可以在Addition.vue中，导入mapGetters，并将之映射为计算属性。因为在computed里套了层花括号，所以需要加…展开来放进去，如果外层没有花括号，就可以不写…了。

import { mapGetters } from 'vuex'
computed:{
  ...mapGetters(['showNum'])
}或
computed: mapGetters(['showNum'])

4.3.3 Mutation

用Vuex实例对象中的mutations，它保存了修改共享数据的方法，Mutation用于修改变更$store中的数据。使用方式：
1.打开store/index.js文件，在mutations中添加代码如下

mutations: {
    addN(state,step){
      //第一个形参永远都是state也就是$state对象
      //第二个形参是调用add时传递的参数
      state.count+=step;
    }
  }

2.触发mutation,然后在Addition.vue中给按钮添加事件代码如下：

<button @click="Add">+1</button>

methods:{
  Add(){
    //使用commit函数调用mutations中的对应函数，
    //第一个参数就是我们要调用的mutations中的函数名
    //第二个参数就是传递给add函数的参数
    this.$store.commit('addN',10)
  }
}

this. $store. commit()是触发mutations的第一种方式， 触发mutations的第二种方式，用mapMutation辅助函数将其映射下来:

// 1.从vuex中按需导入mapMutations 函数
 import { mapMutations } from 'vuex'
// 2.将指定的mutations 函数，映射为当前组件的methods 函数
  methods:{
      //获得mapMutations映射的sub函数
      ...mapMutations(['addN']),//将this.addN()映射为this.$store.commit('addN')
      //当点击按钮时触发Sub函数
      Add(){
          //调用sub函数完成对数据的操作
          this.addN(10);
      }
  }

4.3.4 Action

• 在mutations中不能编写异步的代码，会导致vue调试器的显示出错。
• Action类似Mutation，不同在于:Action不能直接修改状态，只能通过提交mutation来修改，Action可以包含异步操作
• 在vuex中我们可以使用Action来执行异步操作。但是在Action中不能直接修改state中的数据，还是要通过context.commit()触发某个Mutation的方式间接变更数据。操作步骤如下：
  1.打开store/index.js文件，修改Action，如下：

const store = new Vue.Store({
mutations: {
    add(state){
      state.count++;
    }
  }
actions: {
  addAsync(context){
    setTimeout(()=>{
      context.commit('add');
    },2000)
  }
 }
})

2.触发：可以直接使用this.$store.dispatch(‘xxx’)分发 action，或者使用mapActions辅助函数先将其映射下来。
然后在Addition.vue中给按钮添加事件代码如下：

<button @click="AddAsync">...+1</button>

methods:{
  AddAsync(){
  //触发actions的第一种方式,这里的dispatch 函数，专门用来触发action
    this.$store.dispatch('addAsync')
  }
}

参数的话：

触发第二种方式：

// 1.从vuex中按需导入mapActions 函数
import { mapActions } from 'vuex'
2.通过刚才导入的mapActions函数,将需要的actions函数，映射为当前组件的methods方法:
methods:{
  ...mapMutations(['subAsync'])
}

完整如下：

import { mapState,mapMutations,mapActions } from 'vuex'

export default {
  data() {
    return {}
  },
  methods:{
      //获得mapMutations映射的sub函数
      ...mapMutations(['sub']),
      //当点击按钮时触发Sub函数
      Sub(){
          //调用sub函数完成对数据的操作
          this.sub(10);
      },
      //获得mapActions映射的addAsync函数
      ...mapActions(['subAsync']),
      asyncSub(){
          this.subAsync(5);
      }
  },
  computed:{
      ...mapState(['count'])    
  }
}

4.3.5 Module

• 由于使用单一状态树，当项目的状态非常多时，store对象就会变得十分臃肿。因此，Vuex允许我们将store分割成模块（Module）
• 每个模块拥有独立的State、Getter、Mutation和Action，模块之中还可以嵌套模块，每一级都有着相同的结构。

5 Mockjs

5.1 mockjs介绍

• Mock.js 是一款前端开发中拦截Ajax请求再生成随机数据响应的工具，可以用来模拟服务器响应。官网链接： http://mockjs.com/
• 优点是非常简单方便, 无侵入性, 基本覆盖常用的接口数据类型.。
• 支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。
• 安装：npm install mockjs

5.2 mockjs基本使用

（1）在项目中创建mock目录，新建index.js文件

//引入mockjs
import Mock from 'mockjs'

//使用mockjs模拟数据
Mock.mock('/product/search', {
    "ret":0,
    "data":
      {
        "mtime": "@datetime",//随机生成日期时间
        "score|1-800": 1,//随机生成1-800的数字
        "rank|1-100":  1,//随机生成1-100的数字
        "stars|1-5": 1,//随机生成1-5的数字
        "nickname": "@cname",//随机生成中文名字
        //生成图片
        "img":"@image('200x100', '#ffcc33', '#FFF', 'png', 'Fast Mock')"
      }
});

如果出现注释问题：

• 1使用json5解决json文件,无法添加注释问题 npm install json5 --save-dev
• 2vscode中安装插件JSON5 syntax
  （2）main.js中导入import './mock'或者项目根目录下,新建vue.config.js

module.exports = {
    devServer: {
        before: require('./mock/index.js')//引入mock/index.js
    }
}

（3）xxx.vue组件中调用mock.js中模拟的数据接口，这时返回的response就是mock.js中用Mock.mock(‘url’,data）中设置的data。

import axios from 'axios'
export default {
  mounted:function(){
     axios.get("/product/search").then(res => {
      console.log(res)
    })
  }
}

注意，如果 get 请求如果带参数，会以 ?a=b&c=d ，形式拼接到url上，这时mock请把接口url写为正则匹配，否则匹配不到就报错 Mock.mock(RegExp(API_URL + ".*") ），如：

import axios from 'axios'
export default {
  mounted:function(){
     //product/search?id=2
     axios.get("/product/search",{params:{id:2}}).then(res => {
      console.log(res)
    })
  }
}

在url后面加上 .*

mockjs.mock(RegExp("/product/search" + ".*"), 'get', option => {
    console.log(option.url) // 请求的url
    console.log(option.body) // body为post请求参数
    return {
        status: 200,
        message: "获取数据成功"
    }
})

5.3 核心方法

Mock.mock( rurl?, rtype?, template|function( options ) )

• rurl，表示需要拦截的 URL，可以是 URL 字符串或 URL 正则。例如：正则+变量写法 ->RegExp(API_URL.LOGIN + ".*") 、正则写法 -> /\/domain\/list\.json/ 、字符串写法 -> '/domian/list.json' 。
• rtype，表示需要拦截的 Ajax 请求类型。例如 GET、POST、PUT、DELETE 等。
• template，表示数据模板，可以是对象或字符串。例如 { 'data|1-10':[{}] } 、'@EMAIL'。
• function，表示用于生成响应数据的函数。
• options，指向本次请求的 Ajax 选项集，含有 url 、 type 和 body 三个属性，参见 XMLHttpRequest 规
  范。

5.3.1 具体使用：

• Mock.mock( template ) ：根据数据模板生成模拟数据。
• Mock.mock( rurl, template ) ： 记录数据模板。当拦截到匹配 rurl 的 Ajax 请求时，将根据数据
  模板 template 生成模拟数据，并作为响应数据返回。
• Mock.mock( rurl, function( options ) ) ： 记录用于生成响应数据的函数。当拦截到匹配 rurl 的
  Ajax 请求时，函数 function(options) 将被执行，并把执行结果作为响应数据返回。
• Mock.mock( rurl, rtype, template ) ： 记录数据模板。当拦截到匹配 rurl 和 rtype 的 Ajax 请
  求时，将根据数据模板 template 生成模拟数据，并作为响应数据返回。
• Mock.mock( rurl, rtype, function( options ) ) ： 记录用于生成响应数据的函数。当拦截到匹配 rurl 和 rtype 的 Ajax 请求时，函数 function(options) 将被执行，并把执行结果作为响应数据返回。

5.3.2 设置延时请求到数据

不设置延时很有可能遇到坑，这里需要留意，因为真实的请求是需要时间的，mock不设置延时则是马上拿到数据返回，这两个情况不同可能导致在接口联调时出现问题。所以最好要先设置延时请求到数据。

//设置延迟时间
 Mock.setup({
     timeout: 4000
 })

5.4 数据生成规则

• mock的语法规范包含两层规范: 数据模板 （DTD）、数据占位符 （DPD）

5.4.1 数据模板DTD

基本语法：

• 数据模板中的每个属性由 3 部分构成：属性名name、生成规则rule、属性值value：name|rule: value

• 属性名和生成规则之间用竖线 | 分隔，生成规则是可选的，有 7 种格式：

'name|min-max': value
'name|count': value
'name|min-max.dmin-dmax': value
'name|min-max.dcount': value
'name|count.dmin-dmax': value
'name|count.dcount': value
'name|+step': value

• 生成规则的含义需要依赖属性值的类型才能确定。
• 属性值中可以含有 @占位符 。
• 属性值还指定了最终值的初始值和类型。

5.4.2 生成规则和示例

1. 属性值是字符串 String

//通过重复 string 生成一个字符串，重复次数大于等于 min，小于等于 max。
'name|min-max': string
//通过重复 string 生成一个字符串，重复次数等于 count。
'name|count': string

var data = Mock.mock({
  'name1|1-3':'a', //重复生成1到3个a(随机)
  'name2|2':'b' //生成bb
  })

2. 属性值是数字 Number

//属性值自动加 1，初始值为 number。
'name|+1': number
//生成一个大于等于 min、小于等于 max 的整数，属性值 number 只是用来确定类型。
'name|min-max': number
//生成一个浮点数，整数部分大于等于 min、小于等于 max，小数部分保留 dmin 到 dmax 位。
'name|min-max.dmin-dmax': number

Mock.mock({
        'number1|1-100.1-10': 1,
        'number2|123.1-10': 1,
        'number3|123.3': 1,
        'number4|123.10': 1.123
    })
    //结果：
    {
        "number1": 12.92,
        "number2": 123.51,
        "number3": 123.777,
        "number4": 123.1231091814
    }

var data = Mock.mock({
    'name1|+1': 4, //生成4，如果循环每次加1
    'name2 | 1 - 7 ':2, //生成一个数字，1到7之间
    'name3|1-4.5-8': 1 生成一个小数，整数部分1到4，小数部分5到8位，数字1只是为了确定类型
})

3. 属性值是布尔型 Boolean

//随机生成一个布尔值，值为 true 的概率是 1/2，值为 false 的概率同样是 1/2。
'name|1': boolean
//随机生成一个布尔值，值为 value 的概率是 min / (min + max)，值为 !value 的概率是 max /
(min + max)。
'name|min-max': value

4. 属性值是对象 Object

//从属性值 object 中随机选取 count 个属性。
'name|count': object
//从属性值 object 中随机选取 min 到 max 个属性。
'name|min-max': object

5. 属性值是数组 Array

//从属性值 array 中随机选取 1 个元素，作为最终值。
'name|1': array
//从属性值 array 中顺序选取 1 个元素，作为最终值。
'name|+1': array
//通过重复属性值 array 生成一个新数组，重复次数大于等于 min，小于等于 max。
'name|min-max': array
//通过重复属性值 array 生成一个新数组，重复次数为 count。
'name|count': array

6. 属性值是函数 Function

执行函数 function，取其返回值作为最终的属性值，函数的上下文为属性 'name' 所在的对象。
'name': function

7. 属性值是正则表达式 RegExp

根据正则表达式 regexp 反向生成可以匹配它的字符串。用于生成自定义格式的字符串。
'name': regexp

5.4.2 数据占位符DPD

占位符只是在属性值字符串中占个位置，并不出现在最终的属性值中。
占位符的格式为：

@占位符
@占位符(参数 [, 参数])

• 用 @ 标识符标识后面的字符串是占位符
• 占位符 引用的是 Mock.Random 中的方法。
• 可以通过 Mock.Random.extend() 来扩展自定义占位符。
• 占位符 也可以引用 数据模板 中的属性。
• 占位符 会优先引用 数据模板 中的属性。
• 占位符 支持 相对路径 和 绝对路径。

Mock.Random
Mock.Random 是一个工具类，用于生成各种随机数据。
Mock.Random 的方法在数据模板中称为『占位符』，书写格式为 @占位符(参数 [, 参数]) 。
用法示例：

var Random = Mock.Random
Random.email()
// => "n.clark@miller.io"
Mock.mock('@email')
// => "y.lee@lewis.org"
Mock.mock( { email: '@email' } )
// => { email: "v.lewis@hall.gov" }

5.5 移除mock

在项目根路径新建.env.development
完善mock\index.js

module.exports = function(app){
    if(process.env.MOCK == 'true'){
        //监听http请求
        app.get('/user/userinfo', function (rep, res) {
            //每次响应请求时读取mock data的json文件
            //getJsonFile方法定义了如何读取json文件并解析成数据对象
            var json = getJsonFile('./userInfo.json5');
            //将json传入 Mock.mock 方法中，生成的数据返回给浏览器
            res.json(Mock.mock(json));
        });
    }
}