项目集成配置
1、集成element-plus
官网地址：https://element-plus.gitee.io/zh-CN/
安装命令: pnpm install element-plus @element-plus/icons-vue
1
2
3
4
5
6
|
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
app.use(ElementPlus, { locale: zhCn })
|
同样别忘了把icon图标都注册成全局组件，注册方式和svg图标全局化的方式一样
1
| import * as ElementPlusIconsVue from '@element-plus/icons-vue'
|
2、别名配置
在开发项目时文件与文件关系很复杂，因此需要给src文件配置一个别名
安装：pnpm i --save-dev @types/path
1
2
3
4
5
6
7
8
9
10
11
12
13
|
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': path.resolve('./src')
}
}
})
|
1
2
3
4
5
6
7
8
9
|
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@/*": ["src/*"]
}
}
}
|
3、环境变量配置
项目开发过程中，至少会经历 开发环境、测试环境和生产环境(即正式环境) 三个阶段。不同阶段请求的状态(如接口地址等)不尽相同，若手动切换接口地址是相当繁琐且易出错的。于是环境变量配置的需求就应运而生，我们只需做简单的配置，把环境状态切换的工作交给代码。
项目根目录分别添加 开发、生产和测试环境的文件!
1
2
3
| .env.development
.env.production
.env.test
|
文件内容
1
2
3
4
| # 变量必须以 VITE_ 为前缀才能暴露给外部读取
NODE_ENV = 'development'
VITE_APP_TITLE = '硅谷甄选运营平台'
VITE_APP_BASE_API = '/dev-api'
|
1
2
3
| NODE_ENV = 'production'
VITE_APP_TITLE = '硅谷甄选运营平台'
VITE_APP_BASE_API = '/prod-api'
|
1
2
3
4
| # 变量必须以 VITE_ 为前缀才能暴露给外部读取
NODE_ENV = 'test'
VITE_APP_TITLE = '硅谷甄选运营平台'
VITE_APP_BASE_API = '/test-api'
|
配置运行命令：package.json
1
2
3
4
5
6
| "scripts": {
"dev": "vite --open",
"build:test": "vue-tsc && vite build --mode test",
"build:pro": "vue-tsc && vite build --mode production",
"preview": "vite preview"
},
|
通过import.meta.env获取环境变量
4、SVG图标配置
在开发项目的时候经常会用到svg矢量图,而且我们使用SVG以后，页面上加载的不再是图片资源,
安装依赖 pnpm install vite-plugin-svg-icons -D
在vite.config.ts中配置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import path from 'path'
export default () => {
return {
plugins: [
createSvgIconsPlugin({
iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
symbolId: 'icon-[dir]-[name]',
}),
],
}
}
|
main.ts入口文件中引入 import 'virtual:svg-icons-register'
将svg封装为全局组件
步骤如下
- 创建一个Svgicon组件 src/components/SvgIcon.vue
- 在src/components文件夹下创建一个index.t文件，用于注册全部全局文件
- 在入口文件引入src/index.ts文件,通过app.use方法安装自定义插件
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
35
36
37
|
<template>
<div>
<svg :style="{ width: width, height: height }">
<use :xlink:href="prefix + name" :fill="color"></use>
</svg>
</div>
</template>
<script setup lang="ts">
defineProps({
prefix: {
type: String,
default: '#icon-'
},
name: String,
color: {
type: String,
default: ""
},
width: {
type: String,
default: '16px'
},
height: {
type: String,
default: '16px'
}
})
</script>
<style scoped></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
|
import SvgIcon from './SvgIcon/index.vue'
import Pagination from './Pagination/index.vue'
import Category from './Category/index.vue'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
const allGloablComponent: any = { SvgIcon, Pagination, Category }
export default {
install(app: any) {
Object.keys(allGloablComponent).forEach((key) => {
app.component(key, allGloablComponent[key])
})
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
}
}
|
1
2
3
|
import gloablComponent from './components/index';
app.use(gloablComponent);
|
5、集成sass
安装sass和sass-loader: pnpm install --save-dev sass sass-loader
接下来我们为项目添加一些全局的样式
在src/styles目录下创建一个index.scss文件，当然项目中需要用到清除默认样式，因此在index.scss引入reset.scss
但是你会发现在src/styles/index.scss全局样式文件中没有办法使用$变量.因此需要给项目中引入全局变量$.
在./src/style 中创建一个variable.scss文件！ 在这里可以写入一些全局可用的样式变量。
在vite.config.ts文件配置如下:
1
2
3
4
5
6
7
8
9
10
| export default defineConfig((config) => {
css: {
preprocessorOptions: {
scss: {
javascriptEnabled: true,
additionalData: '@import "./src/styles/variable.scss";',
},
},
},
})
|
6、axios二次封装
安装：pnpm install axios
在开发项目的时候避免不了与后端进行交互,因此我们需要使用axios插件实现发送网络请求。在开发项目的时候我们经常会把axios进行二次封装。
目的:
1:使用请求拦截器，可以在请求拦截器中处理一些业务(开始进度条、请求头携带公共参数)
2:使用响应拦截器，可以在响应拦截器中处理一些业务(进度条结束、简化服务器返回的数据、处理http网络错误)
在根目录下创建utils/request.ts
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
35
36
37
38
39
40
41
42
| import axios from "axios";
import { ElMessage } from "element-plus";
let request = axios.create({
baseURL: import.meta.env.VITE_APP_BASE_API,
timeout: 5000
})
request.interceptors.request.use(config => {
return config;
});
request.interceptors.response.use((response) => {
return response.data;
}, (error) => {
let msg = '';
let status = error.response.status;
switch (status) {
case 401:
msg = "token过期";
break;
case 403:
msg = '无权访问';
break;
case 404:
msg = "请求地址错误";
break;
case 500:
msg = "服务器出现问题";
break;
default:
msg = "无网络";
}
ElMessage({
type: 'error',
message: msg
})
return Promise.reject(error);
});
export default request;
|
7、API接口统一管理
在src目录下创建api文件夹
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
|
import request from '@/utils/request'
import type {
loginFormData,
loginResponseData,
userInfoReponseData,
} from './type'
enum API {
LOGIN_URL = '/admin/acl/index/login',
USERINFO_URL = '/admin/acl/index/info',
LOGOUT_URL = '/admin/acl/index/logout',
}
export const reqLogin = (data: loginFormData) =>
request.post<any, loginResponseData>(API.LOGIN_URL, data)
export const reqUserInfo = () =>
request.get<any, userInfoReponseData>(API.USERINFO_URL)
export const reqLogout = () => request.post<any, any>(API.LOGOUT_URL)
|
