使用vuecli3.0 + ts + vue-test-unit + html分离 + tslint创建通用基础框架

1. 根据vue-cli3创建一个基础项目 （技术栈为：node-sass, babel, typescript, router（我是忘记添加unit-jest了，后续手动加入）
2. html文件分离，创建的新项目是使用.vue格式作为文件模板的，但是由于这样子html、ts、scss就放置于一个文件里了，这样子不便于阅读和管理，所以我还是建议把这三个文件分成三个文件比较好，这里需要用到html-loader。

   yarn add html-loader  （loader安装后均需要在vue.congig.js配置使用）

   然后，在该项目的根目录新创建一个vue.config.js文件，添加chainWebpack配置选项，chainWebpack用做高级配置；包括对loader的添加，修改；以及插件的配置。

   //vue.config.js
   
   module.exports = {
       chainWebpack: (config) => {
           config.module    //html-loader的配置
             .rule('html')
             .test(/\.html$/)
             .use('html-loader')
             .loader('html-loader')
             .end();
         },
         
   }

   由于ts默认只识别 .d.ts、.ts、.tsx 后缀的文件，所以我们需要在shims-vue.d.ts文件配置补充外部的模块定义（例如：vue、html、scss、css这些模块），如有不懂，请参考由 shims-vue.d.ts 引发的思考
   注意：（即使补充了 外部模块的模块声明，IDE 还是没法识别 .以此 结尾的文件，这就是为什么引入 外部模块文件时必须添加后缀的原因，不添加编译也不会报错）
    

   // shims-vue.d.ts
   
   declare module '*.scss' {
     const str: string;
     export default str;
   }
   
   declare module '*.css' {
     const str: string;
     export default str;
   }
   
   declare module '*.html' {
     const str: string;
     export default str;
   }
   declare module '*.json' {
     const value: any;
     export default value;
   }
   

   有可能你执行 yarn serve 之后，你会报“You are using the runtime-only build of Vue where the template compiler is not available. Either pre”这个错误（报错原因参考：https://blog.csdn.net/wxl1555/article/details/83187647），那你就需要在vue.config.js添加一项configureWebpack的配置，如下：

   //vue.config.js
   
   module.exports = {
       chainWebpack: (config) => {
           config.module
             .rule('html')
             .test(/\.html$/)
             .use('html-loader')
             .loader('html-loader')
             .end();
         },
         configureWebpack: {
           resolve: {
             alias: {
               vue$: 'vue/dist/vue.js',
             },
           },
         },
   }

   这个时候你就能够成功跑起来了

3. 虽然现在项目跑起来了，但是你会发现会报很多tsLint的错误，我们可以分三步解决，下面我们来一起解决它把！
   第一步,创建自己的rule,在该项目的根目录下配置自己所需要的rule，例如：
    

   // tslint.json
   
   {
     "defaultSeverity": "warning",
     "exclude": ["node_modules", "tslint:recommended"],
     "linterOptions": {
       "exclude": ["node_modules/**", "package.json"]
     },
   
     "rules": {
       "interface-name": false,
       "object-literal-sort-keys": false,
       "ordered-imports": false,
       "jsx-boolean-value": false,
       "jsx-curly-spacing": false,
       "jsx-no-multiline-js": false,
       "jsx-wrap-multiline": false,
       "jsx-alignment": false,
       // "jsx-no-lambda": true,
       "jsx-no-string-ref": false,
       "class-name": false,
       "max-line-length": [true, 180],
       "member-ordering": [true, "statics-first"],
       "new-parens": true,
       "no-consecutive-blank-lines": true,
       "no-mergeable-namespace": true,
       "no-switch-case-fall-through": true,
       "no-trailing-whitespace": true,
       "no-unused-variable": [false], // 类型断言
       "no-var-keyword": true,
       "one-variable-per-declaration": [false, "ignore-for-loop"],
       "triple-equals": [false, "allow-null-check"],
       "use-isnan": false,
       //ts专用
       "prefer-const": false, //true, //const偏好
       "adjacent-overload-signatures": true, //Enforces function overloads to be consecutive.
       "ban-comma-operator": true, //禁止逗号运算符。
       // "ban-type": [true, ["object", "User {} instead."],
       //   ["string"]
       // ], //禁止类型
       //"member-access": [true, "no-public" || "check-accessor" || "check-constructor" || "check-parameter-property"], //类成员必须声明 private public ....
       "member-order": [false], //类声明排序
       "no-any": false, //true, //不需使用any类型
       "no-empty-interface": true, //禁止空接口 {}
       "no-import-side-effect": [
         true,
         {
           "ignore-module": "(\\.html|\\.css)$"
         }
       ], //禁止导入带有副作用的语句
       "no-inferrable-types": [true, "ignore-params", "ignore-properties"], //不允许将变量或参数初始化为数字,字符串或布尔值的显式类型声明。
       "no-internal-module": true, //不允许内部模块
       "no-magic-numbers": false, //[true, 1, 2, 3], //不允许在变量赋值之外使用常量数值。当没有指定允许值列表时,默认允许-1,0和1
       "no-namespace": false, //[true, "allpw-declarations"], //不允许使用内部modules和命名空间
       "no-non-null-assertion": false, //不允许使用!后缀操作符的非空断言。
       "no-parameter-reassignment": false, //true, //不允许重新分配参数
       "no-reference": false, //true, // 禁止使用/// <reference path=> 导入 ,使用import代替
       "no-unnecessary-type-assertion": true, //如果类型断言没有改变表达式的类型就发出警告
       "no-var-requires": true, //不允许使用var module = require("module"),用 import foo = require('foo')导入
       "only-arrow-functions": false, //[true, "allow-declarations", "allow-named-functions"], //允许箭头表达式,不需要传统表达式 ； 允许独立的函数声明  ；允许表达,function foo() {}但不是function() {}
       "prefer-for-of": true, //建议使用for(..of)
       "promise-function-async": false, //true, //要求异步函数返回promise
       "typedef": false, //[true, "call-signature", "parameter", "member-variable-declaration"], // 需要定义的类型存在
       "typedef-whitespace": true, //类型声明的冒号之前是否需要空格,在类型定义的时候，是否允许使用空格, 使用false，表示不对此项进行校验,不启用此项的校验
       "unified-signatures": true, //重载可以被统一联合成一个
       //function 专用
       "await-promise": true, //警告不是一个 promise 的await
       // "ban": [
       //   true,
       //   "eval",
       //   {
       //     "name": "$",
       //     "message": "please don't"
       //   },
       //   ["describe", "only"],
       //   {
       //     "name": ["it", "only"],
       //     "message": "don't focus tests"
       //   },
       //   {
       //     "name": ["chai", "assert", "equal"],
       //     "message": "Use 'strictEqual' instead."
       //   },
       //   {
       //     "name": ["*", "forEach"],
       //     "message": "Use a regular for loop instead."
       //   }
       // ],
       "curly": true, //for if do while 要有括号
       "forin": false, //true, //用for in 必须用if进行过滤
       "import-blacklist": true, //允许使用import require导入具体的模块
       // "label-postion": true, //允许在do/for/while/swith 中使用 label
       "no-arg": true, //不允许使用 argument.callee
       "no-bitwise": false, //true, //不允许使用按位运算符
       // "no-conditional-assignmen": true, //不允许在do-while/for/if/while判断语句中使用赋值语句
       "no-console": [true, "time", "timeEnd"], //不能使用console
       "no-construct": true, //不允许使用 String/Number/Boolean的构造函数
       "no-debugger": true, //不允许使用debugger
       "no-duplicate-super": true, //构造函数两次用super会发出警告
       "no-empty": false, //true, //不允许空的块
       "no-eval": true, //不允许使用eval
       "no-floating-promises": true, //必须正确处理promise的返回函数
       "no-for-in-array": true, //不允许使用for in 遍历数组
       "no-implicit-dependencies": false, //true, //不允许在项目的package.json中导入未列为依赖项的模块
       "no-inferred-empty-object-type": true, //不允许在函数和构造函数中使用{}的类型推断
       "no-invalid-template-strings": true, //警告在非模板字符中使用${
       "no-invalid-this": false, //true, //不允许在非class中使用 this关键字
       "no-misused-new": true, //禁止定义构造函数或new class
       "no-null-keyword": false, // true, //不允许使用null关键字
       "no-object-literal-type-assertion": false, //true, //禁止 objext 出现在类型断言表达式中
       "no-return-await": true, //不允许return await
       "arrow-parens": false, //true, //箭头函数定义的参数需要括号
       "quotemark": [true, "single", "jsx-double", "avoid-escape"], //引号的使用规则
       "semicolon": false, //[true, "never", "ignore-interfaces"], //分号的使用规则
       "indent": false, //[true, "tabs", 2], //使用Tab进行缩进，每次强制缩进2个字符
       "whitespace": [
         true,
         "check-branch",
         "check-decl",
         "check-operator",
         "check-type"
       ], //空格的校验
       "member-access": false, //类成员的显示可见性声明，即显示定义一个类的成员是否可见，即对类成员定义public | static 等
       "one-line": false //, //要求指定的标记与它们之前的表达式位于同一行
       // "trailing-comma": [true, { //对尾随逗号的校验
       //   "multiline": {
       //     "objects": "ignore",
       //     "arrays": "never",
       //     "functions": "never",
       //     "typeLiterals": "ignore"
       //   },
       //"esSpecCompliant": true //是否允许尾随逗号出现在剩余变量中
       // }]
     }
   }
   

   第二步，自动格式化，如果你想要在保存时可以自动根据你定义的t规则进行格式化，那么在根目录创建.vscode文件夹，在该文件夹创建settings.json文件，配置如下
    

   {
     "defaultSeverity": "warning",
     "exclude": ["node_modules", "tslint:recommended"],
     "linterOptions": {
       "exclude": ["node_modules/**", "package.json"]
     },
   
     "rules": {
       "interface-name": false,
       "object-literal-sort-keys": false,
       "ordered-imports": false,
       "jsx-boolean-value": false,
       "jsx-curly-spacing": false,
       "jsx-no-multiline-js": false,
       "jsx-wrap-multiline": false,
       "jsx-alignment": false,
       // "jsx-no-lambda": true,
       "jsx-no-string-ref": false,
       "class-name": false,
       "max-line-length": [true, 180],
       "member-ordering": [true, "statics-first"],
       "new-parens": true,
       "no-consecutive-blank-lines": true,
       "no-mergeable-namespace": true,
       "no-switch-case-fall-through": true,
       "no-trailing-whitespace": true,
       "no-unused-variable": [false], // 类型断言
       "no-var-keyword": true,
       "one-variable-per-declaration": [false, "ignore-for-loop"],
       "triple-equals": [false, "allow-null-check"],
       "use-isnan": false,
       //ts专用
       "prefer-const": false, //true, //const偏好
       "adjacent-overload-signatures": true, //Enforces function overloads to be consecutive.
       "ban-comma-operator": true, //禁止逗号运算符。
       // "ban-type": [true, ["object", "User {} instead."],
       //   ["string"]
       // ], //禁止类型
       //"member-access": [true, "no-public" || "check-accessor" || "check-constructor" || "check-parameter-property"], //类成员必须声明 private public ....
       "member-order": [false], //类声明排序
       "no-any": false, //true, //不需使用any类型
       "no-empty-interface": true, //禁止空接口 {}
       "no-import-side-effect": [
         true,
         {
           "ignore-module": "(\\.html|\\.css)$"
         }
       ], //禁止导入带有副作用的语句
       "no-inferrable-types": [true, "ignore-params", "ignore-properties"], //不允许将变量或参数初始化为数字,字符串或布尔值的显式类型声明。
       "no-internal-module": true, //不允许内部模块
       "no-magic-numbers": false, //[true, 1, 2, 3], //不允许在变量赋值之外使用常量数值。当没有指定允许值列表时,默认允许-1,0和1
       "no-namespace": false, //[true, "allpw-declarations"], //不允许使用内部modules和命名空间
       "no-non-null-assertion": false, //不允许使用!后缀操作符的非空断言。
       "no-parameter-reassignment": false, //true, //不允许重新分配参数
       "no-reference": false, //true, // 禁止使用/// <reference path=> 导入 ,使用import代替
       "no-unnecessary-type-assertion": true, //如果类型断言没有改变表达式的类型就发出警告
       "no-var-requires": true, //不允许使用var module = require("module"),用 import foo = require('foo')导入
       "only-arrow-functions": false, //[true, "allow-declarations", "allow-named-functions"], //允许箭头表达式,不需要传统表达式 ； 允许独立的函数声明  ；允许表达,function foo() {}但不是function() {}
       "prefer-for-of": true, //建议使用for(..of)
       "promise-function-async": false, //true, //要求异步函数返回promise
       "typedef": false, //[true, "call-signature", "parameter", "member-variable-declaration"], // 需要定义的类型存在
       "typedef-whitespace": true, //类型声明的冒号之前是否需要空格,在类型定义的时候，是否允许使用空格, 使用false，表示不对此项进行校验,不启用此项的校验
       "unified-signatures": true, //重载可以被统一联合成一个
       //function 专用
       "await-promise": true, //警告不是一个 promise 的await
       // "ban": [
       //   true,
       //   "eval",
       //   {
       //     "name": "$",
       //     "message": "please don't"
       //   },
       //   ["describe", "only"],
       //   {
       //     "name": ["it", "only"],
       //     "message": "don't focus tests"
       //   },
       //   {
       //     "name": ["chai", "assert", "equal"],
       //     "message": "Use 'strictEqual' instead."
       //   },
       //   {
       //     "name": ["*", "forEach"],
       //     "message": "Use a regular for loop instead."
       //   }
       // ],
       "curly": true, //for if do while 要有括号
       "forin": false, //true, //用for in 必须用if进行过滤
       "import-blacklist": true, //允许使用import require导入具体的模块
       // "label-postion": true, //允许在do/for/while/swith 中使用 label
       "no-arg": true, //不允许使用 argument.callee
       "no-bitwise": false, //true, //不允许使用按位运算符
       // "no-conditional-assignmen": true, //不允许在do-while/for/if/while判断语句中使用赋值语句
       "no-console": [true, "time", "timeEnd"], //不能使用console
       "no-construct": true, //不允许使用 String/Number/Boolean的构造函数
       "no-debugger": true, //不允许使用debugger
       "no-duplicate-super": true, //构造函数两次用super会发出警告
       "no-empty": false, //true, //不允许空的块
       "no-eval": true, //不允许使用eval
       "no-floating-promises": true, //必须正确处理promise的返回函数
       "no-for-in-array": true, //不允许使用for in 遍历数组
       "no-implicit-dependencies": false, //true, //不允许在项目的package.json中导入未列为依赖项的模块
       "no-inferred-empty-object-type": true, //不允许在函数和构造函数中使用{}的类型推断
       "no-invalid-template-strings": true, //警告在非模板字符中使用${
       "no-invalid-this": false, //true, //不允许在非class中使用 this关键字
       "no-misused-new": true, //禁止定义构造函数或new class
       "no-null-keyword": false, // true, //不允许使用null关键字
       "no-object-literal-type-assertion": false, //true, //禁止 objext 出现在类型断言表达式中
       "no-return-await": true, //不允许return await
       "arrow-parens": false, //true, //箭头函数定义的参数需要括号
       "quotemark": [true, "single", "jsx-double", "avoid-escape"], //引号的使用规则
       "semicolon": false, //[true, "never", "ignore-interfaces"], //分号的使用规则
       "indent": false, //[true, "tabs", 2], //使用Tab进行缩进，每次强制缩进2个字符
       "whitespace": [
         true,
         "check-branch",
         "check-decl",
         "check-operator",
         "check-type"
       ], //空格的校验
       "member-access": false, //类成员的显示可见性声明，即显示定义一个类的成员是否可见，即对类成员定义public | static 等
       "one-line": false //, //要求指定的标记与它们之前的表达式位于同一行
       // "trailing-comma": [true, { //对尾随逗号的校验
       //   "multiline": {
       //     "objects": "ignore",
       //     "arrays": "never",
       //     "functions": "never",
       //     "typeLiterals": "ignore"
       //   },
       //"esSpecCompliant": true //是否允许尾随逗号出现在剩余变量中
       // }]
     }
   }
   

   第三步，禁止单引号变成双引号，在项目的根目录创建.prettierrc文件，配置如下：
    

   // .prettierrc
   
   {
     "singleQuote": true,
     "trailingComma": "all",
     "semi": true
   }
   

   
   下一章节：使用gulp创建通用模板