Vue 爬坑之路（十）—— Vue2.5 + Typescript 构建项目
发布时间：2020-12-16 23:17:19 所属栏目：百科 来源：网络整理
导读：Typescript 在前端圈已经逐渐普及，Vue 2.5.0?改进了类型声明，使得对 TypeScript 更加友好 不过要想在项目中直接使用 TypeScript? 仍然需要对项目进行一些改造 PS: 建议使用? ?Visual Studio Code 进行开发 vue-cli 3.0 可以直接创建 typescript 项目，不过
|
Typescript 在前端圈已经逐渐普及，Vue 2.5.0?改进了类型声明，使得对 TypeScript 更加友好 不过要想在项目中直接使用 TypeScript? 仍然需要对项目进行一些改造 PS: 建议使用??Visual Studio Code 进行开发 vue-cli 3.0 可以直接创建 typescript 项目，不过目前还只有 beta 版，有兴趣的朋友可以 一、安装依赖 首先还是用 vue-cli 生成项目 vue init webpack
然后安装必要依赖项：typescript、ts-loader、vue-class-component -D
-D
上面安装 ts-loader 的时候，指定了版本 3.3.1 这是因为在写这篇博客的时候，在安装 ts-loader 的最新版 4.0.1 的情况下，启动项目会报错 另外还有几个库可以按需引入： : 规范 ts 代码，需要配合 tsllint-loader 使用，最好再加上 tslint-config-standard； vue-property-decorator:? vue-class-component 的扩展，添加了几个结合 Vue 特性的装饰器（@Emit，@Prop 等）； 在 vue-class-component 基础上加强了对 vuex 的支持。 二、配置 Webpack 然后修改 ./build/webpack.base.conf.js 文件：
在 resolve.extension 中添加 ‘.ts’，使引入 ts 文件时不用写 .ts 后缀
/.tsx?$//node_modules//.vue$/
在 module.rules 中添加 webpack 对 ts 文件的解析 三、其他配置 在项目根目录下创建 tsconfig.json 文件：
"compilerOptions"
"target": "es5"
"strict":
"module": "es2015""moduleResolution": "node"
完整的 tsconfig.json 配置项可以参考 在 ./src 目录创建 vue-shim.d.ts 文件，让 ts 识别 .vue 文件：
declare module "*.vue""vue"
四、文件改造 将 src 目录下的所有 js 文件后缀改为 .ts
然后将 webpack 配置文件 ./build/webpack.base.conf.js 中的入口 entry 修改为 main.ts
改造之后的 ts 文件不会识别 .vue 文件，所以在引入 .vue 文件的时候，需要手动添加 .vue 后缀
在 .vue 文件中，都需要在 组件内部不再采用 Vue 的格式，一开始也许不易接受，可以参考官方的迁移示例
>
prop: {{propMessage}} msg: {{msg}} helloMsg: {{helloMsg}} computed msg: {{computedMsg}} 六、使用TSlint 规范代码 如果对代码格式有着严格的要求，建议引入 tslint 来规范代码，首先安装以下依赖 npm init -D
然后在 ./build/webpack.base.conf.js 的 module.rules 中添加规则
/.ts$/
在项目根目录创建配置文件 tslint.json
: :
这时已经可以启动项目了，如果出现了这样的警告
只需要在 main.ts 里面，将实例化的 Vue 赋值给一个对象就好
只是这里的 tslint 校验规则是直接引入的 standard 规范，如果需要自定义 贴一篇网上找的 tslint.json 的配置项说明
adjacent-overload-signatures ： ,
ban-comma-：,
ban-type: [,[,],[]]
member-access： [,|||| || ],
member-order: [,{order:....}],
no-any: ,
no-empty-:
no-import-side-effect: [,{: }],
no-inferrable-types：[,,]，
no--module:，
no-magic-numbers: [,,,],
no-: [ ,],
no-non--assertion: ,
no-parameter-reassignment: ,
no-reference: , 导入 ，使用import代替
no-unnecessary-type-assertion： ,
no--requires： ,
only-arrow-functions：[，，],
prefer--of:,
promise-function-: ,,,],
typedef-whitespace： ,
unified-signatures： , </span><span style="color: #008000;">//</span><span style="color: #008000;">function 专用</span>
<span style="color: #0000ff;">await</span>-promise： <span style="color: #0000ff;">true</span>,<span style="color: #008000;">//</span><span style="color: #008000;">警告不是一个promise的await</span>
<span style="color: #000000;"> ban: [ <span style="color: #800000;">"<span style="color: #800000;">name<span style="color: #800000;">": [<span style="color: #800000;">"<span style="color: #800000;">chai<span style="color: #800000;">",<span style="color: #800000;">"<span style="color: #800000;">assert<span style="color: #800000;">",<span style="color: #800000;">"<span style="color: #800000;">equal<span style="color: #800000;">"<span style="color: #000000;">],<span style="color: #800000;">"<span style="color: #800000;">message<span style="color: #800000;">": <span style="color: #800000;">"<span style="color: #800000;">Use 'strictEqual' instead.<span style="color: #800000;">"<span style="color: #000000;"> },{<span style="color: #800000;">"<span style="color: #800000;">name<span style="color: #800000;">": [<span style="color: #800000;">"<span style="color: #800000;">*<span style="color: #800000;">",<span style="color: #800000;">"<span style="color: #800000;">forEach<span style="color: #800000;">"],<span style="color: #800000;">"<span style="color: #800000;">message<span style="color: #800000;">": <span style="color: #800000;">"<span style="color: #800000;">Use a regular for loop instead.<span style="color: #800000;">"<span style="color: #000000;">} ],curly: <span style="color: #0000ff;">true,<span style="color: #008000;">//<span style="color: #008000;">for if do while 要有括号 forin:<span style="color: #0000ff;">true,<span style="color: #008000;">//<span style="color: #008000;">用for in 必须用if进行过滤 import-blacklist:<span style="color: #0000ff;">true,<span style="color: #008000;">//<span style="color: #008000;">允许使用import require导入具体的模块 label-postion: <span style="color: #0000ff;">true,<span style="color: #008000;">//<span style="color: #008000;">允许在do/for/while/swith中使用label no-arg:<span style="color: #0000ff;">true,<span style="color: #008000;">//<span style="color: #008000;">不允许使用 argument.callee no-bitwise:<span style="color: #0000ff;">true,<span style="color: #008000;">//<span style="color: #008000;">不允许使用按位运算符 no-conditional-assignmen: <span style="color: #0000ff;">true,<span style="color: #008000;">//<span style="color: #008000;">不允许在do-while/for/if/while判断语句中使用赋值语句 no-console：<span style="color: #0000ff;">true,<span style="color: #008000;">//<span style="color: #008000;">不能使用console no-construct: <span style="color: #0000ff;">true,<span style="color: #008000;">//<span style="color: #008000;">不允许使用 String/Number/Boolean的构造函数 no-debugger： <span style="color: #0000ff;">true,<span style="color: #008000;">//<span style="color: #008000;">不允许使用debugger no-duplicate-super: <span style="color: #0000ff;">true,<span style="color: #008000;">//<span style="color: #008000;">构造函数两次用super会发出警告 no-empty:<span style="color: #0000ff;">true,<span style="color: #008000;">//<span style="color: #008000;">不允许空的块 no-eval: <span style="color: #0000ff;">true,<span style="color: #008000;">//<span style="color: #008000;">不允许使用eval no-floating-promises: <span style="color: #0000ff;">true,<span style="color: #008000;">//<span style="color: #008000;">必须正确处理promise的返回函数 no-<span style="color: #0000ff;">for-<span style="color: #0000ff;">in-array: <span style="color: #0000ff;">true,<span style="color: #008000;">//<span style="color: #008000;">不允许使用for in 遍历数组 no-<span style="color: #0000ff;">implicit-dependencies: <span style="color: #0000ff;">true,<span style="color: #008000;">//<span style="color: #008000;">不允许在项目的package.json中导入未列为依赖项的模块 no-inferred-empty-<span style="color: #0000ff;">object-type： <span style="color: #0000ff;">true， <span style="color: #008000;">//<span style="color: #008000;">不允许在函数和构造函数中使用{}的类型推断 no-invalid-template-strings： <span style="color: #0000ff;">true,<span style="color: #008000;">//<span style="color: #008000;">警告在非模板字符中使用${ no-invalid-<span style="color: #0000ff;">this：<span style="color: #0000ff;">true,<span style="color: #008000;">//<span style="color: #008000;">不允许在非class中使用 this关键字 no-misused-<span style="color: #0000ff;">new: <span style="color: #0000ff;">true,<span style="color: #008000;">//<span style="color: #008000;">禁止定义构造函数或new class no-<span style="color: #0000ff;">null-keyword: <span style="color: #0000ff;">true,<span style="color: #008000;">//<span style="color: #008000;">不允许使用null关键字 no-<span style="color: #0000ff;">object-literal-type-assertion：<span style="color: #0000ff;">true,<span style="color: #008000;">//<span style="color: #008000;">禁止objext出现在类型断言表达式中 no-<span style="color: #0000ff;">return-<span style="color: #0000ff;">await：<span style="color: #0000ff;">true,<span style="color: #008000;">//<span style="color: #008000;">不允许return await arrow-parens： <span style="color: #0000ff;">true,<span style="color: #008000;">//<span style="color: #008000;">箭头函数定义的参数需要括号 } （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
相关内容