@vue/cli与rimraf 工具包的使用，打包时 calc 报错处理及vuex使用小示例

@vue/cli 实际使用心得

1. components 组件开发：可以将复杂功能细分成具体的小功能模块简化开发难度，同时也会导致嵌套层数很多的情况；例如最近在使用的 jeecg-boot 的前端项目中，嵌套层数二三十层都是很平常的

2. 使用$attrs 简化 n 层 props 父子传参(如果参数太多，可以简化书写量)

   即多层嵌套组件形式，中间层直接向后续层组件使用 v-bind:="$attrs" 传递数据，需要使用数据时，组件通过 props 接收传递的数据，如:

   <!-- 1. 第一层 index.vue -->
   <demo-a :tes1="tes1" :tes2="tes2"/>   <!-- 顶层使用 v-bind 绑定传参 -> tes1, tes2 -->
   <!-- 2. 第二层 demoA.vue -->
   <demo-b v-bind="$attrs"/>   <!-- 二层使用 v-bind="attrs" 绑定传参(全部往后传) -->
   <!-- 3. 第三层 demoB.vue 使用 v-bind="attrs" 绑定传参(且使用 props: ["tes1"] 拿到 tes1 本层使用) -->
   <demo-c v-bind="$attrs"/>
   <!-- 4. 最后一层 demoC.vue -->
   <span>{
       
       { tes2 }}</span>
   <!-- 使用 props: ["tes2"] 拿到 tes2 本层使用; 另外上层拿过的 tes1 在这层就不会在上层的 $attrs 中传递到这一层了，除非另外绑定 -->
   

3. vue-cli-servise 不是内部命令... 报错，删掉 node_modules 目录，重新 npm install；再运行 npm run serve (也可以是你自行配置的其他脚本命令)本地运行。

   借用第三方工具包 rimraf 可快速删除 node_modules 目录。
   以包的形式包装 rm -rf 命令，用来删除文件和文件夹的，不管文件夹是否为空，都可删除。
   示例如下:

   npm i -D rimraf     // -D 或 -g 安装
   
   // 我这里是在 node_modlues 同级目录下创建的一个 deleteDir.js 文件
   // 下列代码写完后，控制台/cmd/git bash等等窗口 运行 node deleteDir.js 即可
   // 或者下载 Code Runner 插件（我用的VSCode），右键 run code 也行
   const rimraf = require("rimraf");
   rimraf("./node_modules", err => {
        
        
       console.log(err);   // 成功删除，输出 null
   });
   

4. @vue/cli 4.0.5 运行 npm run build 即 vue-cli-service build 打包报错

   

   错误信息:

   ERROR  Error: CSS minification error: Parse error on line 1: 
   
   ^
   Expecting "CALC", "LPAREN", "ADD", "SUB", "FUNCTION", "LENGTH", "ANGLE", "TIME", "FREQ", "RES", "UNKNOWN_DIMENSION", "EMS", "EXS", "CHS", "REMS", "VHS", "VWS", "VMINS", "VMAXS", "PERCENTAGE", "NUMBER", "expression", "math_expression", "function", "dimension",