承接上篇 [筆記] Vue 2 升級 Vue 3 + Vite 心得 – 1 ，這篇筆記下轉換成 Composition API 以及補上 TypeScript 的過程。
內容
改成 Composition API
若你有搭配 Pinia 一同使用，會在兩種寫法間遇上衝突。建議還是一個個緩慢修改測試為宜
加入 TypeScript
1. 安裝下列套件 typescript, vue-tsc, @types/node, @typescript-eslint/eslint-plugin, @typescript-eslint/parser
2. 在根目錄新增 tsconfig.json
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
{ "compilerOptions": { "target": "esnext", "useDefineForClassFields": true, "module": "esnext", "moduleResolution": "node", "strict": true, "jsx": "preserve", "sourceMap": true, "resolveJsonModule": true, "esModuleInterop": true, "allowJs": true, "lib": ["esnext", "dom"], "baseUrl": "./", "paths": { "@/*": ["src/*"] }, "allowSyntheticDefaultImports": true, "skipLibCheck": true, "types": ["vite/client"] }, "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.vue"] } |
3. 在 build 的指令前加入 vue-tsc –noEmit
4. index.html 的入口改為 main.ts
5. 在 src 資料夾下，新增 env.d.ts 來讓 TS 可以認得 *.vue。若你有用到的套件沒有型別檔的話，也可以在這邊新增簡易定義，讓 TS 不會報錯
|
1 2 3 4 5 6 7 8 |
// / <reference types="vite/client" /> declare module '*.vue' { import { DefineComponent } from 'vue' // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types const component: DefineComponent<{}, {}, any> export default component } |
6. 所有的 *.vue 的 script 部分加上 lang=”ts”，並修正可能的型別錯誤
7. 將所有的 *.js 改名為 *.ts
8. 修正 .eslintrc 設定如下
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
module.exports = { root: true, env: { browser: true, es2022: true, node: true, }, parser: 'vue-eslint-parser', extends: [ 'eslint-config-prettier', 'eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:vue/vue3-recommended', 'plugin:vue/vue3-essential', 'plugin:prettier/recommended', ], parserOptions: { ecmaVersion: 'latest', parser: '@typescript-eslint/parser', sourceType: 'module', }, plugins: ['vue', '@typescript-eslint'], rules: { 'eslint-disable-next-line': 'off', 'no-console': process.env.NODE_ENV === 'production' ? 2 : 0, 'vue/multi-word-component-names': 'off', }, } |
完成上述步驟後，就算是成功加入 TypeScript 了。
後續
將 Bootstrap 和 scss 拔除，改用 unocss
按讚加入粉絲團
