Vue3.x 從零開始（一）—— Vue-cli or Vite 構建 TypeScript 專案

千呼萬喚始出來，2020 年 9 月 19 日凌晨，Vuejs 3.0 終于發布了，代號：One Piece

作為一名從 Vue 1.x 就開始接觸 Vue 的老玩家，心里只有一句話想說：學不動了...

但學不動也得學...

原本打算寫一寫 2.x 和 3.x 的差異，但仔細捋了一下發現內容還不少，干脆拋棄原本的思維，從零開始學 Vue

所以《Vue 3.x 從零開始》系列可能比較啰嗦，對于 Vue 2.x 的用戶，直接閱讀官方的遷移指南是最好的選擇

當然，如果有興趣和我一起從零開始，也是一個不錯的選擇

在開始之前，請確保已經正確安裝了 node.js 

一、Vue CLI 構建專案

為了快速構建 Vue 專案，Vue 團隊開發了腳手架工具 Vue CLI，這個腳手架需要全域安裝

yarn global add @vue/cli
# OR
npm install -g @vue/cli

對于 Vue 3.x 的專案，需要使用 Vue CLI v4.5 以上的版本，如果你的 Vue CLI 版本較低，也需要用上面的命令升級

安裝完成后可以在命令列輸入  vue -V  （注意第二個 V 大寫），如果出現版本號則安裝成功

然后在需要創建專案的檔案夾下啟動終端，在命令列輸入下面的命令

vue ui

這個命令會在瀏覽器打開一個頁面(http://localhost:8000/project/select)

這是 Vue CLI 提供的可視化工具，可以通過頁面上的【創建】標簽創建專案

除了這種可視化的方式之外，還可以完全通過命令列創建專案：

vue create my-vue3-demo
# my-vue3-demo 是專案目錄的名稱

運行命令之后，通過【↑】【↓】鍵選擇條目

這里可以直接選擇 Vue 3 然后回車，Vue CLI 就會幫我們完成后續的創建作業

// 也可以選擇第三項 “Manually select features”，會有更多的自定義配置，這里暫不介紹

二、專案結構

專案創建之后，會在當前目錄下多出一個專案檔案夾

通過命令列創建的默認 Vue 3 專案是一個比較純粹的專案

從它的 package.json 中可以看到只有 vue.js 的核心依賴

然后啟動專案試試，在專案根目錄運行終端，在命令列輸入

npm run serve

在瀏覽器中打開鏈接 http://localhost:8080/，就能看到專案的啟動頁

專案默認使用的埠是 8080，如果想使用別的埠，可以在專案的根目錄創建一個 vue.config.js 

// vue.config.js
module.exports = {
  outputDir: 'dist', // 打包的目錄
  lintOnSave: true, // 在保存時校驗格式
  productionSourceMap: false, // 生產環境是否生成 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 檔案夾，可以存放一些不需要經過 webpack 打包的檔案（參考鏈接）

這個目錄下有一個 index.html 檔案，這是整個應用的 html 基礎模板，也是打包編譯后的專案入口

這個 index.html 檔案中有一個 #app 節點：

Vue 的實體會掛載到這個節點

專案的代碼在 src 目錄下：

現在的 src 目錄非常簡潔，其中 main.js 是 webpack 打包的入口檔案

main.js 只是引入了 App.vue 組件，并掛載到上面提到的 #app 節點下

這里的 createApp 方法是 Vue 3 新增的全域 API，用來創建一個 Vue 應用，并掛載到某個 DOM 節點

在 2.x 的時代，上面的代碼是這樣寫的：// 以下內容為 2.x 的對比，不感興趣的話可以直接跳到下一節

從表面上看，createApp 只是改良版的 render 函式，但其實他解決了 2.x 中的一些不太優雅用法

2.x 時代的 Vue 沒有“應用”的概念，所謂的應用只是一個 Vue 的根實體  new Vue() 

當我們需要修改一些全域屬性的時候，只能通過 Vue 物件本身來修改，比如：

// 2.x 時代的全域屬性
Vue.prototype.$http = axios;
Vue.directive('focus', {
  inserted: el => el.focus()
});
Vue.config.errorHandler = errorHandler;

這樣的行為會污染 Vue 物件，導致從同一個 Vue 創建的實體會共享相同的全域配置

而通過 createApp 回傳的是獨立的實體，修改該實體的屬性不會影響其他 createApp 創建的實體：

// 3.x createApp
const foo = createApp(Foo);
foo.directive('focus' /* ... */);

const bar = createApp(Bar);
bar.directive('focus' /* ... */);

// foo 和 bar 都具備了 focus 指令，但這兩個指令的內容相互獨立

如果確實需要兩個應用共享配置，還可以通過 createApp 創建一個工廠函式：

const createMyApp = options => {
  const app = createApp(options)
  app.directive('focus' /* ... */)
  return app
}

const foo = createMyApp(Foo).mount('#foo')
const bar = createMyApp(Bar).mount('#bar')

// foo 和 bar 會具備同一個 focus 指令

三、使用 Vite 構建專案

除了上面的 Vue CLI 創建專案之外，Vue 3.x 還可以通過新工具 Vite 創建專案

Vite 是一個由原生 ES 模塊驅動的 Web 開發構建工具，支持模塊熱更新和按需加載

用尤大的話來講，用了 Vite 之后就可以告別 webpack 了

先來用 Vite 創建一個專案吧：

npm init vite-app <project-name>
# 將 <project-name> 改為自己的專案名

專案結構也非常簡潔，在 package.json 中只引入了 vue.js

然后安裝依賴，并啟動專案：

npm install
npm run dev

專案地址為 http://localhost:3000/，如果頁面沒有自動打開，可以手動打開鏈接查看

如果需要對 Vite 進行配置，也需要在根目錄創建一個 config 檔案，命名為 vite.config.js（或者 vite.config.ts）

// vite.config.js
module.exports = {
  port: 8077, // 服務埠
  proxy: { // 代理
    // string shorthand
    "/foo": "http://localhost:4567/foo",
    // with options
    "/api": {
      target: "http://jsonplaceholder.typicode.com",
      changeOrigin: true,
      rewrite: (path) => path.replace(/^\/api/, ""),
    },
  },
};

更多配置可以參考原始碼中的 config.ts，不過大部分的配置項和上面提到的 vue.config.js 是一樣的

目前（2020-09-24）Vite 還處于 beta 階段，用 Vite 創建專案的方式可以了解，但不建議用到專案中

如果想學習更多關于 Vite 的知識，可以查看 @yuuang 寫的《Vite 原始碼分析》

四、TypeScript

Vue 3 有一個重要的特性就是更好的支持 TypeScirpt

在使用 Vue CLI 創建專案的時候，可以選擇 "Manually select features" 選項，然后選擇 "TypeScript"，這樣就能直接創建 ts 專案

如果一開始沒有創建 ts 專案，但電腦上裝有 Vue CLI，可以通過下面的命令將專案改造為 ts 專案：

vue add typescript

不過我們也可以自己動手，一步一步的引入 TypeScript，看看 vue add typescript 到底做了什么

首先安裝 typescript 依賴：

npm install typescript -D

然后在專案根目錄創建 tsconfig.json 檔案：

{
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
  ],
  "exclude": [
    "node_modules"
  ],
  "compilerOptions": {
    // 與 Vue 的瀏覽器支持保持一致
    "target": "es5",
    // 如果使用 webpack 2+ 或 rollup，可以利用 tree-shake:
    "module": "es2015",
    // 這可以對 `this` 上的資料 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 即可

如果是 Vite 創建的專案，直接修改根目錄下的 index.html 檔案，將 <script> 標簽的 src 地址改為 "/src/main.ts"

如果是 Vue CLI 創建的普通專案，只需要安裝 @vue/cli-plugin-typescrip 

npm install @vue/cli-plugin-typescript -D

搞定~ 接下來就可以啟動專案開始愉悅的編碼了~

標籤：JavaScript

上一篇：開課吧web全堆疊架構師第16期(2020完結)(22.11G）

下一篇：Node.js 概述