一 集成element-plus
- 官网地址:https://element-plus.gitee.io/zh-CN/
@element-plus/icons-vue 是element-plus提供的图标的组件库
pnpm install element-plus @element-plus/icons-vue
- 入口文件
main.ts
全局安装element-plus,element-plus默认支持语言英文设置为中文
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
添加@ts-ignore,忽略当前文件ts类型的检测,否则会有红色提示(打包会失败)
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
app.use(ElementPlus,{
locale:zhCn
})
- Element Plus全局组件类型声明(在tsconfig.json中)
{
"compilerOptions": {
"types": ["element-plus/global"]
}
}
- 全局使用element-plus中的icon图标写入components/index.ts文件中:
(1)pnpm install unplugin-auto-import unplugin-vue-components -D
(2) 在main.ts
中
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
for(const [key,component] of Object.entries(ElementPlusIconsVue)){
app.component(key,component)
}
(3) 在vite.config.ts
中
import AutoImport from 'unplugin-auto-import'
import Components from 'unplugin-vue-components'
import {ElementPlusResolver} from 'unplugin-vue-components/resolvers'
在plugin[]
中写入:
AutoImport({
resolves:[ElementPlusResolver()]
})
Components({
resolves:[ElementPlusResolver()]
})
二 src别名配置
- 在开发项目的时候,文件与文件关系可能很复杂,因此我们需要给src文件夹配置一个别名!!在
vite.config.ts
中
import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
export default defineConfig({ plugins:[vue()], resolve:{ alias:{ "@":path.resolve("./src") // 相对路径别名配置,使用@代替src } } })
- TypeScript编译配置
tsconfig.json
中
{
"compilerOptions":{
"baseUrl":"./", // 解析非相对模块的基地址,默认是当前目录
"paths":{ // 路径映射,相对于baseUrl
"@/*":["src/*"]
}
}
}
三 环境变量配置
项目开发过程中,至少会经历开发环境、测试环境和生产环境(即正式环境)三个阶段。不同阶段请求的状态(如接口地址等)不尽相同,若手动切换接口地址是相当繁琐且易出错的,于是环境变量配置的需求就应运而生,我们只需做简单的配置,把环境状态切换的工作交给代码。
-
开发环境(development)
顾名思义:开发使用的环境,每位开发人员在自己的dev分支上干活,开发到一定程度,同事会合并代码,进行联调 -
测试环境(testing)
测试同事干活的环境,一般会由测试同事自己来部署,然后在此环境进行测试 -
生产环境(production)
生产环境是指正式提供对外服务的,一般会关掉错误报告,打开错误日志。(正式提供给客户使用的环境)
注意:一般情况下,一个环境对应一台服务器,也有的公司开发与测试是一台服务器 -
项目根目录分别添加开发、生产和测试环境的文件
.env.development
.env.production
.env.test
- 文件内容
(1) 开发环境(变量必须以VITE_为前缀才能暴露给外部读取)
NODE_ENV = 'development'
VITE_APP_TITLE = '硅谷甄选运营平台'
VITE_APP_BASE_API = '/dev-api'
(2) 正式环境(变量必须以VITE_为前缀才能暴露给外部读取)
NODE_ENV = 'production'
VITE_APP_TITLE = '硅谷甄选运营平台'
VITE_APP_BASE_API = '/prod-api'
(2) 测试环境(变量必须以VITE_为前缀才能暴露给外部读取)
NODE_ENV = 'test'
VITE_APP_TITLE = '硅谷甄选运营平台'
VITE_APP_BASE_API = '/test-api'
- 配置运行命令:
package.json
"scripts":{
"build:test":"test-tsc && vite build --mode test",
"build:pro":"test-tsc && vite build --mode prodution",
}
- 通过
import.meta.env
获取环境变量
四 SVG图标配置
SVG比img要小的多,放在项目中几乎不占用资源
- 安装SVG依赖插件
pnpm install vite-plugin-svg-icons -D
- 在
vite.config.ts
中配置插件
import {createSvgIconsPlugin} from 'vite-plugin-svg-icons'
import path from 'path'
export default () => {
return {
plugins:[
createSvgIconsPlugin({
// Specify the icon folder to be cached 需要在assets文件夹下新建一个文件夹icons
iconDirs:[path.resolve(process.cwd(),'src/assets/icons')],
// Specify symbolId format
symbolId:'icon-[dir]-[name]'
})
]
}
}
- 入口文件导入
import 'virtual:svg-icons-register'
- 封装svg文件(在vue3_admin_vite项目中有写)
- 自定义插件注册svg全局组件
在main.ts
中引入:
import SvgIcon from '@/components/SvgIcon/index.vue';
app.component('SvgIcon',Svgicon)
- 如果有很多个全局组件,我们需要用更简便的方法去注册全局组件,而不是在main.ts上一个一个写
(1) 在components文件夹下新建index.ts文件,主要内容已在vue3_admin_vite项目中
(2) 在main.ts
中
import globleComponent from '@/components'
app.use(globleComponent)
五 集成sass
- 目前我们在组件内部已经可以使用scss样式,因为配置styleLint工具的时候,项目当中已经安装过sass sass-loader,因此我们在组件内可以使用scss语法,需要加上lang=“scss”
- 接下来我们为项目添加一些全局的样式
(1) 在src/styles目录下创建一个index.scss文件,当然项目中需要用到清除默认样式,因此在index.scss引入reset.scss
(注意:可在npm官网搜索reset.scss,然后复制人家的reset代码)
@import 'reset.scss'
(2) 在main.ts
入口文件引入
import '@/styles/index.scss'
(3) 但是你会发现在src/styles/index.scss全局样式中没有办法使用 变量,因此需要给项目中引入全局变量 变量,因此需要给项目中引入全局变量 变量,因此需要给项目中引入全局变量
在styles文件夹下创建一个variable.scss
文件
在vite.config.ts
文件配置如下
export default defineConfig((config)=>{
css:{
preprocessorOptions:{
scss:{
javascriptEnabled:true,
additionalData:'@import "./src/styles/variable.scss";'
}
}
}
})
(注意:@import "./src/styles/variable.scss";
后面的;
不要忘记,不然会报错)
配置完毕你会发现提供这些全局变量可以在组件样式中使用了
六 mock数据
- 安装依赖 https://www.npmjs.com/package/vite-plugin-mock
pnpm install -D vite-plugin-mock mockjs
- 在
vite.config.js
配置文件启用插件
import {UserConfigExport,ConfigEnv} from 'vite'
import {viteMockServe} from 'vite-plugin-mock'
export default ({command}) => {
return {
plugins:[
vue(),
viteMockServe({
localEnabled:command === 'serve' // 如果飘红,就安装vite-plugin-mock@2.9.6
})
]
}
}
- 在根目录创建’mock文件夹’去写我们需要的mock数据与接口!!!
在mock文件夹内创建一个user.ts
文件
七 axios二次封装
pnpm install axios
- 封装目的:
(1) 使用请求拦截器:可以在请求拦截器中处理一些业务(进度条、请求头携带公共参数)
(2) 使用响应拦截器:可以在响应拦截器中处理一些业务(进度条结束、简化服务器返回数据、处理http网络错误) - 在src目录下创建
utils/request.ts
八 API接口统一管理
- 在src目录下创建文件夹api
- 在api文件夹下创建user(用户信息/登录接口)、product(放产品接口)等文件夹
- 具体操作看代码
- 代码地址:https://gitee.com/xphzzh/vue3_admin_vite