忙里偷閑，整理了一下關于如何借助 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;

函數中使用類型