忙里偷闲，整理了一下关于如何借助 vue-cli3 搭建 ts + 装饰器 的脚手架，并如何自定义 webpack 配置，优化。
准备工作
@vue/cli@4.1.1
vue 2.6
node v12.13.0
安装 node
安装 node
全局安装 nrm，npm 的镜像源管理工具。
npm i nrm -g // 安装 nrm ls // 查看可用源，及当前源，带*的是当前使用的源 nrm use taobao // 切换源，使用源 nrm add <registry> <url> // 其中reigstry为源名，url为源的路径 nrm del <registry> // 删除对应的源 nrm test npm // 测试源的响应速度
安装 vue-cli3
参考官方文档：https://cli.vuejs.org/zh/guide/
npm i @vue/cli -g // 全局安装 vue --version // 检查是否安装
补充
npm list -g --depth 0 // 查看全局安装的包 npm outdated -g --depth=0 // 查看需要更新的全局包 npm update 包名 -g // 更新全局安装的包
搭建项目
新建一个基于 ts 的 vue 项目
vue create vue-cli3-ts
备注：如果是 window 系统，用 git bash 交互提示符（切换）不会工作，用以下命令，即可解决：
winpty vue.cmd create vue-cli3-ts
自定义选项 - Manually select features
添加 ts 支持 - TypeScript
基于类的组件 - y
tslint
根据需要添加 router、vuex、css（less 或 scss） 预处理器、单元测试（jest）
交互说明：
上下箭头键切换
空格键选中
回车确定
在已存在的项目中添加 ts
vue add @vue/typescript
会把所有 .js 更改为 .ts
script 命令
// - 启动服务 npm run serve // - 打包编译 npm run build // - 执行lint npm run lint // - 执行单元测试 npm run test:unit
npm run serve 启动服务：:8080/#/
vue 中 ts 语法
demo: src/components/HelloWorld.vue
<script lang="ts"> import { Component, Prop, Vue } from 'vue-property-decorator'; @Component export default class HelloWorld extends Vue { @Prop() private msg!: string; } </script>
和普通的 vue 项目不一样的就是.vue 文件中 script 的 写法。
主要用到的一个库：vue-property-decorator
用法可参考：
1. 类型注解，类型推论
变量后面通过 冒号+类型 来做类型注解。
编译时类型检查，写代码时代码提醒。
类型推论，根据赋值类型推论出被赋值变量的类型，进行类型限制。
let title: string; // 类型注解 title = 'ts'; // 正确 title = 4; // 错误 let text = 'txt'; // 类型推论 text = 2; // 错误
错误时，vscode 编辑器会有红色波浪号提示。
数组
let names: string[]; // Array<string> names = ['Tom'];
任意类型，没有类型限制
let foo: any; foo = 'foo'; foo = 3; let list: any[]; list = [1, true, 'free']; list[1] = 100;
函数中使用类型
function greeting (person: string): string { return 'Hello, ' + person; } // void 类型，常用于没有返回值的函数 function warnUser (): void { alert('This is msg'); }
案例：vue demo
<template> <div> <input type="text" placeholder="请输入新特性" @keyup.enter="addFeature" /> <ul> <li v-for="feature in features" :key="feature">{{feature}}</li> </ul> </div> </template> <script lang="ts"> import { Component, Prop, Vue } from 'vue-property-decorator'; @Component export default class Demo extends Vue { // 相当于 data 中的数据项 features: string[]; constructor () { super(); this.features = ['类型注解', '类型推论', '编译型语言']; } // 相当于 methods 中的方法 addFeature (event: any) { console.log(event); this.features.push(event.target.value); event.target.value = ''; } } </script>
2.类
ts 中的类和 es6 中的大体相同，关注特性 访问修饰符
private 私有属性，不能在类的外部访问
protected 保护属性，可以在类的内部和派生类的内部访问，不能在类的外部访问
public 公有属性，可以在任意地方访问，默认值
readonly 只读属性，必须在声明时或构造函数里初始化，不可改变值
构造函数：初始化成员变量，参数加上修饰符，能够定义并初始化一个属性
constructor (private name = 'Tom') { super(); }
等同于
name: string; constructor () { super(); this.name = 'Tom'; }
存取器，暴露存取数据时可添加额外逻辑；在 vue 中可用作计算属性
get fullName () { return this.name; } set fullName (val) { this.name = val; }
案例：vue demo