寫這篇文章，主要是因為我記性不太好，所以記錄下來，方便以后查看，距離2020 年 9 月 19 號的發(fā)布，已經(jīng)有一年多了，是時候可以學起來了。
一、在開始之前，請確保已經(jīng)正確安裝了 node.js
（1）如何檢查是否安裝了node.js
在命令提示符面板中，輸入命令：node -v，出現(xiàn)版本號即為已安裝，如下圖。
（2）若未安裝node.js
下載地址 https://nodejs.org/en/download/，選擇對應你系統(tǒng)的Node.js版本進行下載。安裝步驟不再贅述，直接下一步、下一步，完成。
安裝完成后，檢測nodejs是否安裝成功。輸入cmd，然后回車，打開cmd窗口，鍵入命令 node -v，以及 npm -v ，查看nodejs是否安裝成功，出現(xiàn)如上圖所示結果即為安裝成功。
二、檢查Vue CLI版本
輸入vue -V命令，檢查你是否安裝了腳手架。
對于 Vue 3.x 的項目，需要使用 Vue CLI v4.5 以上的版本。如果Vue CLI 版本較低，需要升級。
（1）若安裝版本過低，升級
升級只需要四步：
卸載舊版本：npm uninstall vue-cli -g
安裝新版本：
yarn global add @vue/cli
# OR
npm install -g @vue/cli
查看版本號：vue -V
（2）若未安裝
yarn global add @vue/cli
# OR
npm install -g @vue/cli
安裝完成后可以在命令行輸入 vue -V （注意第二個 V 大寫），如果出現(xiàn)版本號則安裝成功。
三、通過命令行創(chuàng)建項目
vue create vue3-demo
// vue3-demo 是項目目錄的名稱
運行命令之后，通過【↑】【↓】鍵選擇條目
這里可以直接選擇 Vue 3 然后回車，Vue CLI 就會幫我們完成后續(xù)的創(chuàng)建工作
// 也可以選擇第三項 “Manually select features”，會有更多的自定義配置，這里暫不介紹
四、項目結構
項目創(chuàng)建之后，會在當前目錄下多出一個項目文件夾
通過命令行創(chuàng)建的默認 Vue 3 項目是一個比較純粹的項目
從它的 package.json 中可以看到只有 vue.js 的核心依賴，然后啟動項目試試，在項目根目錄運行終端，在命令行輸入
npm run serve
在瀏覽器中打開鏈接 http://localhost:8080/，就能看到項目的啟動頁
項目默認使用的端口是 8080，如果想使用別的端口，可以在項目的根目錄創(chuàng)建一個 vue.config.js
// vue.config.js
module.exports = {
outputDir: 'dist', // 打包的目錄
lintOnSave: true, // 在保存時校驗格式
productionSourceMap: false, // 生產環(huán)境是否生成 SourceMap
devServer: {
open: true, // 啟動服務后是否打開瀏覽器
overlay: { // 錯誤信息展示到頁面
warnings: true,
errors: true
},
host: '0.0.0.0',
port: 8066, // 服務端口
https: false,
hotOnly: false,
// proxy: { // 設置代理
// '/api': {
// target: host,
// changeOrigin: true,
// pathRewrite: {
// '/api': '/',
// }
// },
// },
},
}
這個文件中的 devServer.port 即啟動本地服務的端口。
項目中有一個 public 文件夾，可以存放一些不需要經(jīng)過 webpack 打包的文件。
這個目錄下有一個 index.html 文件，這是整個應用的 html 基礎模板，也是打包編譯后的項目入口
這個 index.html 文件中有一個 #app 節(jié)點：
Vue 的實例會掛載到這個節(jié)點。
項目的代碼在 src 目錄下：
現(xiàn)在的 src 目錄非常簡潔，其中 main.js 是 webpack 打包的入口文件
五、TypeScript
Vue 3 有一個重要的特性就是更好的支持 TypeScirpt
在使用 Vue CLI 創(chuàng)建項目的時候，可以選擇 “Manually select features” 選項，然后選擇 “TypeScript”，這樣就能直接創(chuàng)建 ts 項目
如果一開始沒有創(chuàng)建 ts 項目，但電腦上裝有 Vue CLI，可以通過下面的命令將項目改造為 ts 項目：
vue add typescript
（1）Use class-style component syntax? (Y/n) y
是否使用Class風格裝飾器？
即原本是：home = new Vue()創(chuàng)建vue實例
使用裝飾器后：class home extends Vue{}
（2）Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
是否使用 Babel 編譯 TS 語法
TypeScript 本身就有編譯功能，默認會把 JavaScript 代碼轉換為 ECMAScript 3 版本兼容的代碼
如果你需要現(xiàn)代模式、自動檢測 polyfill、轉換 JSX 語法等功能，則建議開啟這個選項
當選擇以后，TypeScript 本身只會把代碼轉為 ESNext，也就是最新版的 ECMAScript 規(guī)范
然后由 Babel 把 ECMAScript 轉換為低版本 JavaScript，例如 ECMAScript 5，以及自動檢測 polyfill、轉換 JSX 等功能
說白了就是讓 TypeScript 轉換和 Babel 轉換相結合起來一起使用
（3）Convert all .js files to .ts? No
是否需要把所有 .js 文件轉換為 .ts 資源
不建議使用，轉換的過程會修改已有的 .js 資源代碼，可能會帶來問題，建議手動啟用 TypeScript 之后手動把 .js 處理為 .ts
（4）Allow .js files to be compiled? No
是否允許編譯 .js 文件模塊，不建議開啟，既然選擇了 TypeScript，就最好全部更換為 TypeScript，而不要兩者混搭，反而變得不倫不類
不過我們也可以自己動手，一步一步的引入 TypeScript，看看 vue add typescript 到底做了什么
首先安裝 typescript 依賴：
npm install typescript -D
然后在項目根目錄創(chuàng)建 tsconfig.json 文件：
{
"include": [
"src/**/*.ts",
"src/**/*.tsx",
"src/**/*.vue",
],
"exclude": [
"node_modules"
],
"compilerOptions": {
// 與 Vue 的瀏覽器支持保持一致
"target": "es5",
// 如果使用 webpack 2+ 或 rollup，可以利用 tree-shake:
"module": "es2015",
// 這可以對 `this` 上的數(shù)據(jù) property 進行更嚴格的推斷
"strict": true,
"moduleResolution": "node"
}
}
然后把 src 目錄下的 main.js 文件名改為 main.ts，以及其他 js 文件改為 ts 后綴（config.js => config.ts）
并編寫 .d.ts 文件 shims-vue.d.ts 放到 src 目錄下，和 main.ts 平級
/* shims-vue.d.ts */
declare module '*.vue' {
import { defineComponent } from 'vue';
const component: ReturnType<typeof defineComponent>;
export default component;
}
由于 Vue 3 是使用 TypeScript 編寫的，所以只要在 script 標簽上聲明 lang=“ts”，就能直接在 .vue 文件中使用 ts 語法
為了讓 TypeScript 能夠正確推斷 Vue 組件中的類型，還需要使用全局方法 defineComponent 來定義組件
Vue 有一些特性和 TypeScript 并不能完美契合 (如 computed 的返回類型)
為了更好的使用 ts，建議提前閱讀《TypeScript 支持》
到這里項目內部的改造基本完成，接下來只要將入口文件從 main.js 改為 main.ts 即可。
如果是 Vue CLI 創(chuàng)建的普通項目，只需要安裝 @vue/cli-plugin-typescript
npm install @vue/cli-plugin-typescript -D
