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