使用vuecli3.0 + ts + vue-test-unit + html分离 + tslint创建通用基础框架
- 根据vue-cli3创建一个基础项目 （技术栈为：node-sass, babel, typescript, router（我是忘记添加unit-jest了，后续手动加入）
- html文件分离，创建的新项目是使用.vue格式作为文件模板的，但是由于这样子html、ts、scss就放置于一个文件里了，这样子不便于阅读和管理，所以我还是建议把这三个文件分成三个文件比较好，这里需要用到html-loader。
然后，在该项目的根目录新创建一个vue.config.js文件，添加chainWebpack配置选项，chainWebpack用做高级配置；包括对loader的添加，修改；以及插件的配置。yarn add html-loader （loader安装后均需要在vue.congig.js配置使用）//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', }, }, }, }这个时候你就能够成功跑起来了
-
虽然现在项目跑起来了，但是你会发现会报很多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, // 禁止使用///导入 ,使用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, // 禁止使用///导入 ,使用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创建通用模板