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

忙里偷闲，整理了一下关于如何借助 vue-cli3 搭建 ts + 装饰器 的脚手架，并如何自定义 webpack 配置，优化。

准备工作

安装 node

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

搭建项目

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

新建一个基于 ts 的 vue 项目

vue create vue-cli3-ts

备注：如果是 window 系统，用 git bash 交互提示符（切换）不会工作，用以下命令，即可解决：

winpty vue.cmd create vue-cli3-ts

交互说明：

在已存在的项目中添加 ts

vue add @vue/typescript

会把所有 .js 更改为 .ts

script 命令

// - 启动服务npm run serve// - 打包编译npm run build// - 执行lintnpm run lint// - 执行单元测试npm run test:unit

npm run serve 启动服务：http://localhost:8080/#/

vue 中 ts 语法

demo: src/components/HelloWorld.vue

<script lang="ts">import { Component, Prop, Vue } from 'vue-property-decorator';@Componentexport 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;

函数中使用类型