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

搞定~ 接下來就可以啓動項目開始愉悅的編碼了~

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章