Vite創建的Vue3+TS項目的必備依賴與環境設置

1 引言

用 vite 創建的 vue3+ts 項目后，在 vscode 中打開，可以看到缺少很多 vue 開發必備依賴庫與插件（如下圖）。同時，有些配置與 vue-cli 建立的項目有所差異，此博文將對遇到的問題逐一解決，不斷更新內容。

2 安裝 vue-router

官網：https://router.vuejs.org/zh/installation.html
執行：npm install vue-router@4
在src路徑下，創建文件夾和TS文件src/router/index.ts，並添加如下內容

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import HelloWorld from '../components/HelloWorld.vue'
const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'HelloWorld',
    component: HelloWorld,
  },
]

const router = createRouter({
  history: createWebHistory(),
  routes,
})

export default router

修改main.ts和App.vue文件內容如下。

3 安裝 Pinia

官網：https://pinia.vuejs.org/getting-started.html
執行：npm install pinia
在src路徑下，創建文件夾和TS文件src/store/index.ts，並添加如下內容

import { defineStore } from 'pinia'
// id: 必須唯一
export const useIndexStore = defineStore('index', {
  // 相當於vue的data
  state: () => {
    return {}
  },

  // 相當於vue的compute，在getters中使用了this則必須手動指定返回值類型，否則類型推導不出來
  getters: {},

  // 相當於vue的method，在actions中不能使用箭頭函數，因為箭頭函數綁定外部this
  actions: {}
})

修改main.ts文件內容如下。

4 安裝 Sass

官網：https://www.sass.hk/guide/
執行下面程序添加sass依賴

npm install sass -D
npm install sass-loader -D
npm install node-sass -D

對App.vue文件進行修改，運行可查看效果。

5 安裝 axios

官網：http://www.axios-js.com/zh-cn/
執行：npm install axios
在src路徑下，創建api文件夾，新建index.ts和http.ts文件，並添加內容。
http.ts文件內容

import axios from 'axios'

const env = process.env.NODE_ENV // 此處調用process會報錯，在后配置項解決
const apis = {
  production: 'http://localhost:8480',
  staging: 'http://localhost:8480',
  development: 'http://localhost:8480'
}

const vueAPI = apis[env as keyof typeof apis]
export const http = axios.create({
  baseURL: `${vueAPI}/api`,
  timeout: 10000,
  headers: {
    accept: 'application/json',
    'Content-Type': 'application/json'
  }
})

// 請求攔截
http.interceptors.request.use(
  function (request) {
    console.log('🚀 ~ 發送請求：', request)
    return request
  },
  function (error) {
    console.log('🚀 ~ 發送請求-錯誤：', error.message)
    return Promise.reject(error)
  }
)

// 返回攔截
http.interceptors.response.use(
  function (response) {
    console.log('🚀 ~ 接收請求：', response)
    return response
  },
  function (error) {
    console.log('🚀 ~ 接收請求-錯誤：', error.response)
    return Promise.reject(error)
  }
)

index.ts文件內容

import { http } from './http'
import { ref } from 'vue'

export const dataLoading = ref(true)
export const getData = async () => {
  const errorMsg = ref('')
  const result = ref([])
  dataLoading.value = true
  await http
    .get('/xxxxx/getData') // 待訪問的服務接口
    .then((res) => {
      dataLoading.value = false
      result.value = res.data
      errorMsg.value = ''
    })
    .catch((err) => {
      dataLoading.value = false
      result.value = []
      errorMsg.value = err.message
    })
  return {
    result,
    errorMsg
  }
}

6 安裝 fontawesome 圖標庫

官網： https://fontawesome.com/icons
GitHub：https://github.com/FortAwesome/vue-fontawesome
使用詳解：https://www.hangge.com/blog/cache/detail_2104.html
執行下面語句安裝fontawesome免費圖標庫

npm i --save @fortawesome/vue-fontawesome@prerelease
npm i --save @fortawesome/fontawesome-svg-core
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/free-brands-svg-icons
npm i --save @fortawesome/free-regular-svg-icons

在src路徑下，創建plugins文件夾，新建fontawesome.ts文件，並添加內容。

import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { library } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/free-solid-svg-icons'
import { far } from '@fortawesome/free-regular-svg-icons'
import { fab } from '@fortawesome/free-brands-svg-icons'
import { App } from 'vue'

library.add(fas)
library.add(far)
library.add(fab)

export default (app: App<Element>) => {
  app.component('font-awesome-icon', FontAwesomeIcon)
}

修改main.ts和App.vue文件內容如下：

7 安裝 ElementPlus

官網：https://element-plus.gitee.io/zh-CN/guide/installation.html
執行下面語句安裝element-plus組件與圖標

npm install element-plus --save
npm install @element-plus/icons-vue

在src路徑下，創建plugins文件夾，新建elementpuls.ts文件，並添加內容。

import ElementPlus from 'element-plus'
import 'element-plus/theme-chalk/src/index.scss'
import locale from 'element-plus/es/locale/lang/zh-cn'
import * as ElIconModules from '@element-plus/icons-vue'
import { App } from 'vue'

export default (app: App<Element>) => {
  app.use(ElementPlus, { locale })
  for (const iconName in ElIconModules) {
    // app.component(transElIconName(iconName), ElIconModules[iconName])
    app.component(
      iconName,
      ElIconModules[iconName as keyof typeof ElIconModules]
    )
  }
}
// 統一el-icon圖標命名
// function transElIconName (iconName) {
//   return iconName.replace(/[A-Z]/g, (p) => '-' + p.toLowerCase()).substring(1)
// }

修改main.ts和App.vue文件內容如下：

8 未定義 process.env 引用問題

vue-cli 建立的 vue3 項目，通過 process.env 獲取開發環境的變量配置

vite 建立的 vue3 項目中，直接使用 process.env 產生未定義錯誤

vite 建立的 vue3 項目，通過 import.meta.env 獲取開發環境的變量配置

若一定要在 vite 建立的項目中使用 process.env，
先執行 npm i --save-dev @types/node，然后在vite.config.ts文件， 添加下面的define內容。

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  define: {
    'process.env': process.env
    //'process.env': { // 手動添加process.env 
    //  'NODE_ENV':'development'
    //},
  },
})

9 @/../.. 找不到模塊

vite 建立的 vue3 項目，導入模塊時，使用 @/.../... 絕對路徑找不到模塊

在 tsconfig.json 文件的 "compilerOptions" 中填加下面內容

{
  "compilerOptions": {
    ......
    "allowSyntheticDefaultImports": true, 
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
  },
  ......
}

然后，先在tsconfig.node.json 文件的 "compilerOptions" 中填加 "allowSyntheticDefaultImports": true,項，
在將下面內容填加在vite.config.ts文件中。

....
import path from 'path' // 不按照上述修改 tsconfig.node.json 文件會報錯

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
  ....
})

10 Prettier 配置

使用 prettier 進行代碼格式化， 在項目根路徑下建立 prettier.config.ts 文件，常用配置內容如下。

module.exports = {
  semi: false, // 聲明結尾使用分號(默認true)
  singleQuote: true, // 使用單引號（默認false）
  trailingComma: 'none', // 多行使用拖尾逗號（默認none）
  printWidth: 100, // 每行代碼長度（默認80）
  tabWidth: 2, // 每個tab相當於多少個空格（默認2）ab進行縮進（默認false）
  useTabs: false, // 是否使用t
  bracketSpacing: true, // 對象字面量的大括號間使用空格（默認true）
  jsxBracketSameLine: false, // 多行JSX中的>放置在最后一行的結尾，而不是另起一行（默認false）
  // 箭頭函數參數括號 默認avoid 可選 avoid| always
  // avoid 能省略括號的時候就省略 例如 x => x
  // always 總是有括號
  arrowParens: 'avoid',
  endOfLine: 'auto', // 因為prettier的規范和eslint的換行規則不同，所以這個必須配置。要不然每次打開文件都會有一堆的警告
}

11 安裝 vxe-table4.0

官網： https://xuliangzhan_admin.gitee.io/vxe-table/v4/#/table/start/use
執行：npm install xe-utils@3 vxe-table@next
按照官網進行組件按需加載配置
項目使用 vite 創建的，先執行 npm install vite-plugin-style-import -D，然后粘貼官網提供的修改 vite.config.ts 文件

在修改 vite.config.ts 文件時，發生了報錯 此表達式不可調用。類型 "typeof import ..." 沒有調用簽名。

通過網上查找，發現類似的問題，其原因是安裝了 vite-plugin-style-import 的最新版

執行：npm install vite-plugin-style-import@1.4.1 -D 安裝指定版，可解決這個問題。
真對新版的 vite-plugin-style-import，也就是2.0.0版本的，vxe-table在4.2.7-beta3中給出了引用方法

但運行服務的時候會報錯，缺少consola組件

執行 npm install consola -D，安裝consola，就可以正常運行了

12 安裝 ulid

github: https://github.com/ulid/javascript
執行：npm install --save ulid

// 通用使用
import { ulid } from 'ulid'
ulid() // 01ARZ3NDEKTSV4RRFFQ69G5FAV
// 通過時間戳生成唯一碼
ulid(1469918176385) // 01ARYZ6S41TSV4RRFFQ69G5FAV

// 生成單調遞增唯一碼
import { monotonicFactory } from 'ulid'
const ulid = monotonicFactory()
// Strict ordering for the same timestamp, by incrementing the least-significant random bit by 1
ulid(150000) // 000XAL6S41ACTAV9WEVGEMMVR8
ulid(150000) // 000XAL6S41ACTAV9WEVGEMMVR9
ulid(150000) // 000XAL6S41ACTAV9WEVGEMMVRA
ulid(150000) // 000XAL6S41ACTAV9WEVGEMMVRB
ulid(150000) // 000XAL6S41ACTAV9WEVGEMMVRC
// Even if a lower timestamp is passed (or generated), it will preserve sort order
ulid(100000) // 000XAL6S41ACTAV9WEVGEMMVRD