定制软件Vite创建项目Vue3 + TS必备的依赖和环境

@

开始

用 创建的 vue3+ts 项目后，在 vscode 中打开，定制软件可以看到缺少很多 vue 定制软件开发必备依赖库与插件。

1. 创建项目

定制软件可以移步到vite官网
定制软件兼容性注意
Vite 需要 Node.js 版本 >= 12.0.0。

$ npm init vite@latest
1

定制软件你还可以通过附加的命定制软件令行选项直接指定项目定制软件名称和你想要使用的模板。例如，定制软件要构建一个 Vite + Vue 项目，运行:

# npm 6.xnpm init vite@latest my-vue-app --template vue# npm 7+, 需要额外的双横线：npm init vite@latest my-vue-app -- --template vue# yarnyarn create vite my-vue-app --template vue# pnpmpnpm create vite my-vue-app -- --template vue
1
2
3
4
5
6
7
8
9
10
11

2. 配置vue-router

官网：
执行：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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

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

import { createApp } from 'vue'import App from './App.vue'// 导入路由import router from './router'createApp(App).use(router).use(pinia).mount('#app')
1
2
3
4
5
6

App.vue

<script setup lang="ts"></script><template>  <img alt="Vue logo" src="./assets/logo.png" />  <router-view msg="Hello Vue 3 + TypeScript + Vite" /></template>
1
2
3
4
5
6
7

3. 安装 Pinia 存储

官网：
执行：npm install pinia
在 src路径下，创建文件夹和TS文件src/store/index.ts，并添加如下内容

import { defineStore } from 'pinia'export const useIndexStore = defineStore('index', {  // 相当于vue的data  state: () => {    return {}  },  // 相当于vue的compute，在getters中使用了this则必须手动指定返回值类型，否则类型推导不出来  getters: {},  // 相当于vue的method，在actions中不能使用箭头函数，因为箭头函数绑定外部this  actions: {}})
1
2
3
4
5
6
7
8
9
10
11
12
13

修改 main.ts文件内容如下：
main.ts

import { createApp } from 'vue'import App from './App.vue'// 导入路由import router from './router'import { createPinia } from 'pinia'const pinia = createPinia()const app = createApp(App)app.use(pinia).mount('#app')
1
2
3
4
5
6
7
8
9

4. 安装Sass

官网：
执行：添加sass依赖

npm install sass -Dnpm install sass-loader -Dnpm install sass-node -D
1
2
3

对 App.vue文件进行修改，运行查看效果。

App.vue

<script setup lang="ts"></script><template>  <img alt="Vue logo" src="./assets/logo.png" />  <router-view msg="Hello Vue 3 + TypeScript + Vite" />  <div class="preprocessor">安装了SASS的测试</div></template><style lang="scss" scoped>.preprocessor {  width: 300px;  height: 100px;  box-shadow: 5px 5px 10px 1px rgba(0, 0, 0, 0.3);  border-radius: 10px;  background-color: rgb(180, 180, 180);  text-align: center;  color: #fff;  padding: 10px;}</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

5. 安装axios

官网：
执行：npm install axios
在 src路径下，创建api文件夹，新建index.ts和http.ts文件，并添加内容。
修改 main.ts和 App.vue文件内容如下
http.ts

import axios from 'axios'const baseUrl = 'http://localhost:3000';export const http = axios.create({  baseURL: baseUrl,  timeout: 60000,  headers: {    accept: 'application/json',    'Content-Type': 'application/json'  }})// 请求拦截http.interceptors.request.use( (request) => {    console.log('发送请', request)    return request  },  (error) {    console.log('发送请求错误', error.message)    return Promise.reject(error)  })// 返回拦截http.interceptors.response.use(	 (response) => {    console.log('响应：', response)    return response  },	(error) => {    console.log('响应-错误：', error.response)    return Promise.reject(error)  })
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
29
30
31
32
33
34

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  }}
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

6. 安装 fontawesome 图标库

官网：
使用详解：
执行下面获取fontawesome免费图标库

npm i --save @fortawesome/vue-fontawesome@prereleasenpm i --save @fortawesome/fontawesome-svg-corenpm i --save @fortawesome/free-solid-svg-iconsnpm i --save @fortawesome/free-brands-svg-iconsnpm i --save @fortawesome/free-regular-svg-icons
1
2
3
4
5

在 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)}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

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

main.ts

import { createApp } from 'vue'import App from '@/App.vue'// 导入路由import router from '@/router'//  引入pinia存储库import { createPinia } from 'pinia'import installFontawesome from '@/plugins/fontawesome'const pinia = createPinia()const app = createApp(App)installFontawesome(app)app.use(router).use(pinia).mount('#app')
1
2
3
4
5
6
7
8
9
10
11
12
13
14

App.vue

<script setup lang="ts"></script><template>  <img alt="Vue logo" src="./assets/logo.png" />  <router-view msg="Hello Vue 3 + TypeScript + Vite" />  <div class="preprocessor">安装了SASS的测试</div>  <div class="font_box">    <font-awesome-icon icon="chess-knight" size="lg" />    <font-awesome-icon icon="chess-knight" size="2x" />    <font-awesome-icon icon="bag-shopping" />  </div></template><style lang="scss" scoped>.preprocessor {  width: 300px;  height: 100px;  box-shadow: 5px 5px 10px 1px rgba(0, 0, 0, 0.3);  border-radius: 10px;  background-color: rgb(180, 180, 180);  text-align: center;  color: #fff;  padding: 10px;}</style>
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

7. 安装 ElementPlus UI框架

官网：
执行下面语句安装element-plus组件与图标

npm install element-plus --savenpm install @element-plus/icons-vue
1
2

在 src路径下，创建plugins文件夹，新建elementpuls.ts文件，并添加内容。
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(      iconName,      ElIconModules[iconName as keyof typeof ElIconModules]    )  }}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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

main.ts

import { createApp } from 'vue'import App from '@/App.vue'// 导入路由import router from '@/router'//  引入pinia存储库import { createPinia } from 'pinia'import installFontawesome from '@/plugins/fontawesome'import installElementPuls from '@/plugins/elementpuls'const pinia = createPinia()const app = createApp(App)installFontawesome(app)installElementPuls(app)app.use(router).use(pinia).mount('#app')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

App.vue

<script setup lang="ts"></script><template>  <img alt="Vue logo" src="./assets/logo.png" />  <router-view msg="Hello Vue 3 + TypeScript + Vite" />  <div class="preprocessor">安装了SASS的测试</div>  <div class="font_box">    <font-awesome-icon icon="chess-knight" size="lg" />    <font-awesome-icon icon="chess-knight" size="2x" />    <font-awesome-icon icon="bag-shopping" />  </div>  <el-button type="success">Success</el-button></template><style lang="scss" scoped>.preprocessor {  width: 300px;  height: 100px;  box-shadow: 5px 5px 10px 1px rgba(0, 0, 0, 0.3);  border-radius: 10px;  background-color: rgb(180, 180, 180);  text-align: center;  color: #fff;  padding: 10px;}</style>
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

8. process未定义的问题

vue-cli 建立的 项目，通过 process.env 获取开发环境的变量配置
vite 建立的 vue3 项目中，直接使用 process.env 产生未定义错误

vite建立的项目中使用process.env
执行：npm i --save-dev @types/node,然后在vite.config.ts文件添加define内容

```typescriptimport { 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'    //},  },})
1
2
3
4
5
6
7
8
9
10
11
12
13
14

9. @找不到模块

vite 建立的 vue3 项目，导入模块时，使用 @/…/… 绝对路径找不到模块

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

{  "compilerOptions": {    ......    "allowSyntheticDefaultImports": true,     "baseUrl": ".",    "paths": {      "@/*": [        "src/*"      ]    },  },  ......}
1
2
3
4
5
6
7
8
9
10
11
12
13

然后，先在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'),    },  },  ....})
1
2
3
4
5
6
7
8
9
10
11
12