Linux运行脚手架vue,如何用vue-cli3脚手架搭建一个基于ts的基础脚手架的方法

忙里偷闲，整理了一下关于如何借助 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 // 其中reigstry为源名，url为源的路径

nrm del // 删除对应的源

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 // 更新全局安装的包

搭建项目

可参考：使用Vue-cli 3.0搭建Vue项目

新建一个基于 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 启动服务：http://localhost:8080/#/

vue 中 ts 语法

demo: src/components/HelloWorld.vue

import { Component, Prop, Vue } from 'vue-property-decorator';

@Component

export default class HelloWorld extends Vue {

@Prop() private msg!: string;

}

和普通的 vue 项目不一样的就是.vue 文件中 script 的 写法。

主要用到的一个库：vue-property-decorator

用法可参考：

npm

vue-property-decorator用法

ts 官方文档

1. 类型注解，类型推论

变量后面通过 冒号+类型 来做类型注解。

编译时类型检查，写代码时代码提醒。

类型推论，根据赋值类型推论出被赋值变量的类型，进行类型限制。

let title: string; // 类型注解

title = 'ts'; // 正确

title = 4; // 错误

let text = 'txt'; // 类型推论

text = 2; // 错误

错误时，vscode 编辑器会有红色波浪号提示。

数组

let names: string[]; // Array

names = ['Tom'];

任意类型，没有类型限制

let foo: any;

foo = 'foo';

foo = 3;

let list: any[];

list = [1, true, 'free'];

list[1] = 100;

函数中使用类型