vue-cli 安装与创建 vue-cli 脚手架自选选项说明 + 脚手架项目结构 + 自定义配置 + vscode 自定义vue模板 + mockjs基础生成规则 + easy-mock本地环境部署

vue-cli安装与创建

如果安装完 vue -V 提示不是系统变量的话，需要把系统变量添加到系统中

vscode 自定义vue模板
第一步

第二步
1、打开file(文件)->preferences(首选项)->User snippets(用户片段),输入vue.json（或vue）,添加下面代码。

2、新建vue文件，输入vue回车，补全为vue2.0语法，输入v3回车 （或vue），补全为vue3.0语法

 
{
	"Print to console": {
	    "prefix": "vue",
	    "body": [
	      "<template>",
	      "  <div >\n",
	      "  </div>",
	      "</template>\n",
	      "<script>",
	      "export default {",
			  "  name: '',",
		    "  components: {},",
	      "  data() {",
	      "    return {\n",
	      "    }",
	      "  }",
	      "}",
	      "</script>\n",
	      "<style scoped>",
	      "</style>",
	      "$2"
	    ],
	    "description": "Log output to console"
	  },
 
	  "Printf to console": {
		  "prefix": "v3",
		  "body": [
		    "<template>",
		    "  <div >\n",
		    "  </div>",
		    "</template>\n",
		    "<script>",
	        "import { reactive } from '@vue/composition-api'\n",
		    "export default {",
			"  name: '',",
			"  components: {},",
			"  setup (propes, { root }) {",
			"    const model = reactive(",
			"      {}",
			"    )\n",
		    "    return { model }",
		    "  }",
		    "}",
		    "</script>\n",
		    "<style scoped>",
		    "</style>",
		    "$2"
		  ],
		  "description": "Log output to console"
		}
  }

const Mock = require('mockjs');

const data = Mock.mock({
    // 随机2-5个数组
    'list|2-5':[
        {
            'id|+1' : 1, // 自增长1 初始值为1
            'name|1-3' : 'xiao', // 随机生成1-3个叠加的xiao
            'phone|11' : '8',   // 88888888888    
            'age|1-120' : 1, // 随机生成 1 - 120 数字
            'salary|6000-8000.1-3' : 1, //随机生成6000 - 8000之间的随机数字， 并且小数部分是1到3位
            'status|1': true, // 随机生成true或false， 并且 1/2 概率
            'open|2-4': false, // 生成概率 true 4/(2+4)  false 2(2+4)
            'order|2': {id:1, name:'订单', price:999}, // 在对象中随机抽取2个属性进行返回
            'order|2-3': {id:1, name:'订单', price:999}, // 在对象 中随机抽取2-3个属性返回
            'idCard': /\d{15}|\d{18}/ //指定正则表达式， 当前生成身份证号， 注意不要用引号引起来
        }
    ]
});
console.log(JSON.stringify(data, null, 4))

**剩下的可以自己研究 mockjs 占位符**

easy-mock本地环境部署
https://github.com/easy-mock/easy-mock/blob/dev/README.zh-CN.md
部署方式参考[梦学谷]文章 : https://mp.weixin.qq.com/s/hVHDIMZUerTiXTYgX0yIwQ
文档不全可以找一下其他文章