Paso a paso para construir la plantilla de proyecto Vue3+Vite
1. Introducción
Este proyecto es una plantilla de proyecto Vite3construida en base a Vue3la integración de herramientas de administración de paquetes , configuración TypeScriptde iconos , etc.ESLintPrettierStylelintHuskyCommitlintpnpmelement-plusVue RouterPiniaSVGSASSAxios
Entorno de ejecución: VSCode, Node16+, VSCodeComplementos: TypeScript Vue Plugin (Volar), Vue Language Features (Volar), Prettier - Code formatter.
Nota: Es necesario cerrar Veturel complemento.
2. Cree una plantilla de sistema de gestión backend
2.1 Inicialización del proyecto
Hoy les mostraré cómo crear una versión vue3 del sistema de administración backend desde cero. Para tener una especificación unificada para un proyecto, necesitamos usar eslint+stylelint+prettier para detectar y reparar la calidad de nuestro código, necesitamos usar husky para realizar la intercepción de confirmación, necesitamos usar commitlint para unificar las especificaciones de envío y necesitamos Usar la preinstalación para unificar las herramientas de administración de paquetes.
A continuación, utilizaremos este conjunto de especificaciones para inicializar nuestro proyecto e integrar una plantilla estandarizada.
2.1.1 Preparación del entorno
- nodo v16.14.2
- pnpm 8.0.0
2.1.2 Inicializar proyecto
Este proyecto está construido usando vite. Referencia a la documentación oficial china de vite: https://cn.vitejs.dev/guide/
pnpm: performant npm, que significa "alto rendimiento npm". pnpmDerivado de npm/yarnél, resuelve npm/yarnposibles problemas internos bug, optimiza en gran medida el rendimiento y amplía los escenarios de uso. Conocida como "la herramienta de gestión de paquetes más avanzada"
instrucciones de instalación pnpm
npm i -g pnpm
Comando de inicialización del proyecto:
pnpm create vite
Vaya al directorio raíz del proyecto pnpm installpara instalar todas las dependencias. Después de instalar las dependencias, ejecute el programa:pnpm run dev
Después de ejecutar el proyecto http://127.0.0.1:5173/, ¡puedes acceder a tu proyecto!
2.2 Configuración del proyecto
2.2.1 configuración eslint
eslintSitio web oficial chino: http://eslint.cn/
ESLintOriginalmente un proyecto de código abierto creado por Nicholas C. Zakas en junio de 2013. Su objetivo es proporcionar una javascriptherramienta de detección de código de complemento.
Instalar primeroeslint
pnpm i eslint -D
Generar archivo de configuración:.eslint.cjs
npx eslint --init
.eslint.cjs配置文件
module.exports = {
//运行环境
"env": {
"browser": true,//浏览器端
"es2021": true,//es2021
},
//规则继承
"extends": [
//全部规则默认是关闭的,这个配置项开启推荐规则,推荐规则参照文档
//比如:函数不能重名、对象不能出现重复key
"eslint:recommended",
//vue3语法规则
"plugin:vue/vue3-essential",
//ts语法规则
"plugin:@typescript-eslint/recommended"
],
//要为特定类型的文件指定处理器
"overrides": [
],
//指定解析器:解析器
//Esprima 默认解析器
//Babel-ESLint babel解析器
//@typescript-eslint/parser ts解析器
"parser": "@typescript-eslint/parser",
//指定解析器选项
"parserOptions": {
"ecmaVersion": "latest",//校验ECMA最新版本
"sourceType": "module"//设置为"script"（默认），或者"module"代码在ECMAScript模块中
},
//ESLint支持使用第三方插件。在使用插件之前，您必须使用npm安装它
//该eslint-plugin-前缀可以从插件名称被省略
"plugins": [
"vue",
"@typescript-eslint"
],
//eslint规则
"rules": {
}
}
complemento de verificación de código de entorno vue3
# 让所有与prettier规则存在冲突的Eslint rules失效，并使用prettier进行代码检查
"eslint-config-prettier": "^8.6.0",
"eslint-plugin-import": "^2.27.5",
"eslint-plugin-node": "^11.1.0",
# 运行更漂亮的Eslint，使prettier规则优先级更高，Eslint优先级低
"eslint-plugin-prettier": "^4.2.1",
# vue.js的Eslint插件（查找vue语法错误，发现错误指令，查找违规风格指南
"eslint-plugin-vue": "^9.9.0",
# 该解析器允许使用Eslint校验所有babel code
"@babel/eslint-parser": "^7.19.1",
Instrucciones de instalación
pnpm install -D eslint-plugin-import eslint-plugin-vue eslint-plugin-node eslint-plugin-prettier eslint-config-prettier eslint-plugin-node @babel/eslint-parser
Modificar .eslintrc.cjsarchivo de configuración
// @see https://eslint.bootcss.com/docs/rules/
module.exports = {
env: {
browser: true,
es2021: true,
node: true,
jest: true,
},
/* 指定如何解析语法 */
parser: 'vue-eslint-parser',
/** 优先级低于 parse 的语法解析配置 */
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
parser: '@typescript-eslint/parser',
jsxPragma: 'React',
ecmaFeatures: {
jsx: true,
},
},
/* 继承已有的规则 */
extends: [
'eslint:recommended',
'plugin:vue/vue3-essential',
'plugin:@typescript-eslint/recommended',
'plugin:prettier/recommended',
],
plugins: ['vue', '@typescript-eslint'],
/*
* "off" 或 0 ==> 关闭规则
* "warn" 或 1 ==> 打开的规则作为警告（不影响代码执行）
* "error" 或 2 ==> 规则作为一个错误（代码不能执行，界面报错）
*/
rules: {
// eslint（https://eslint.bootcss.com/docs/rules/）
'no-var': 'error', // 要求使用 let 或 const 而不是 var
'no-multiple-empty-lines': ['warn', {
max: 1 }], // 不允许多个空行
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-unexpected-multiline': 'error', // 禁止空余的多行
'no-useless-escape': 'off', // 禁止不必要的转义字符
// typeScript (https://typescript-eslint.io/rules)
'@typescript-eslint/no-unused-vars': 'error', // 禁止定义未使用的变量
'@typescript-eslint/prefer-ts-expect-error': 'error', // 禁止使用 @ts-ignore
'@typescript-eslint/no-explicit-any': 'off', // 禁止使用 any 类型
'@typescript-eslint/no-non-null-assertion': 'off',
'@typescript-eslint/no-namespace': 'off', // 禁止使用自定义 TypeScript 模块和命名空间。
'@typescript-eslint/semi': 'off',
// eslint-plugin-vue (https://eslint.vuejs.org/rules/)
'vue/multi-word-component-names': 'off', // 要求组件名称始终为 “-” 链接的单词
'vue/script-setup-uses-vars': 'error', // 防止<script setup>使用的变量<template>被标记为未使用
'vue/no-mutating-props': 'off', // 不允许组件 prop的改变
'vue/attribute-hyphenation': 'off', // 对模板中的自定义组件强制执行属性命名样式
},
}
.eslintignoreignorar archivo
dist
node_modules
ejecutar guión
package.jsonSe agregaron dos nuevos scripts de ejecución.
"scripts": {
"lint": "eslint src",
"fix": "eslint src --fix",
}
2.2.2 Configurar más bonito
Si ya lo tienes eslint, ¿por qué todavía lo tienes prettier? eslintLo que pretende es javascriptser una herramienta de detección, incluida jsla gramática y una pequeña cantidad de problemas de formato. Parece eslintque la gramática correcta puede garantizar el funcionamiento normal del código y los problemas de formato son secundarios, pero prettieres una herramienta de formato. que no puede tolerar el formato inconsistente, por lo que eslintcontinúa haciendo lo que no hizo bien. Además, prettieradmite jsmúltiples idiomas incluidos.
En resumen, eslintcon prettierestos dos hermanos, uno garantiza la calidad del código js y el otro garantiza la belleza del código.
Instalar paquetes de dependencia
pnpm install -D eslint-plugin-prettier prettier eslint-config-prettier
.prettierrc.jsonAgregar regla
{
"singleQuote": true,
"semi": false,
"bracketSpacing": true,
"htmlWhitespaceSensitivity": "ignore",
"endOfLine": "auto",
"trailingComma": "all",
"tabWidth": 2
}
.prettierignoreignorar archivo
/dist/*
/html/*
.local
/node_modules/**
**/*.svg
**/*.sh
/public/*
Revisando pnpm run lintla gramática, si hay algún formato irregular pnpm run fixmodifíquelo
2.2.3 Configurar estilolint
stylelintHerramientas para css lint. Puede formatear cssel código, comprobar si hay csserrores gramaticales y escritura irrazonable, especificar cssel orden de escritura, etc.
scssUtilizado como preprocesador en nuestro proyecto , instale las siguientes dependencias:
pnpm add sass sass-loader stylelint postcss postcss-scss postcss-html stylelint-config-prettier stylelint-config-recess-order stylelint-config-recommended-scss stylelint-config-standard stylelint-config-standard-vue stylelint-scss stylelint-order stylelint-config-standard-scss -D
.stylelintrc.cjsArchivo de configuración
Sitio web oficial: https://stylelint.bootcss.com/
// @see https://stylelint.bootcss.com
module.exports = {
extends: [
'stylelint-config-standard', // 配置stylelint拓展插件
'stylelint-config-html/vue', // 配置 vue 中 template 样式格式化
'stylelint-config-standard-scss', // 配置stylelint scss插件
'stylelint-config-recommended-vue/scss', // 配置 vue 中 scss 样式格式化
'stylelint-config-recess-order', // 配置stylelint css属性书写顺序插件,
'stylelint-config-prettier', // 配置stylelint和prettier兼容
],
overrides: [
{
files: ['**/*.(scss|css|vue|html)'],
customSyntax: 'postcss-scss',
},
{
files: ['**/*.(html|vue)'],
customSyntax: 'postcss-html',
},
],
ignoreFiles: [
'**/*.js',
'**/*.jsx',
'**/*.tsx',
'**/*.ts',
'**/*.json',
'**/*.md',
'**/*.yaml',
],
/**
* null => 关闭该规则
* always => 必须
*/
rules: {
'value-keyword-case': null, // 在 css 中使用 v-bind，不报错
'no-descending-specificity': null, // 禁止在具有较高优先级的选择器后出现被其覆盖的较低优先级的选择器
'function-url-quotes': 'always', // 要求或禁止 URL 的引号 "always(必须加上引号)"|"never(没有引号)"
'no-empty-source': null, // 关闭禁止空源码
'selector-class-pattern': null, // 关闭强制选择器类名的格式
'property-no-unknown': null, // 禁止未知的属性(true 为不允许)
'block-opening-brace-space-before': 'always', //大括号之前必须有一个空格或不能有空白符
'value-no-vendor-prefix': null, // 关闭 属性值前缀 --webkit-box
'property-no-vendor-prefix': null, // 关闭 属性前缀 -webkit-mask
'selector-pseudo-class-no-unknown': [
// 不允许未知的选择器
true,
{
ignorePseudoClasses: ['global', 'v-deep', 'deep'], // 忽略属性，修改element默认样式的时候能使用到
},
],
},
}
.stylelintignoreignorar archivo
/node_modules/*
/dist/*
/html/*
/public/*
ejecutar guión
"scripts": {
"lint:style": "stylelint src/**/*.{css,scss,vue} --cache --fix"
}
Finalmente configurar un formato unificado para formatear prettiernuestra suma jsy código.csshtml
"scripts": {
"dev": "vite --open",
"build": "vue-tsc && vite build",
"preview": "vite preview",
"lint": "eslint src",
"fix": "eslint src --fix",
"format": "prettier --write \"./**/*.{html,vue,ts,js,json,md}\"",
"lint:eslint": "eslint src/**/*.{ts,vue} --cache --fix",
"lint:style": "stylelint src/**/*.{css,scss,vue} --cache --fix"
},
Cuando lo ejecutemos pnpm run format, el código se formateará directamente.
2.2.4 Configurar ronca
Hemos integrado nuestra herramienta de verificación de código anterior, pero debemos ejecutar manualmente el comando cada vez para formatear nuestro código. Si alguien lo envía al repositorio remoto sin formatearlo, entonces esta especificación es de poca utilidad. Por lo tanto, debemos obligar a los desarrolladores a enviar de acuerdo con las especificaciones del código.
Para hacer esto, necesitamos activar ( un gancho en el lado del cliente) huskyantes de enviar el código y luego ejecutarlo para formatear automáticamente nuestro código.git hookgitpnpm run format
Instalarhusky
pnpm install -D husky
implementar
npx husky-init
Se generará un .huskydirectorio en el directorio raíz. Habrá un archivo debajo de este directorio pre-commit. Los comandos en este archivo commitse ejecutarán cuando lo ejecutemos.
.husky/pre-commitAgregue el siguiente comando al archivo:
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
pnpm run format
Cuando operamos el código commit, ejecutaremos el comando, formateamos el código y luego lo enviaremos.
2.2.5 Configurar confirmación
También existen estándares unificados para nuestra commitinformación. No podemos escribirlo casualmente. Necesitamos que todos lo implementen de acuerdo con estándares unificados. Podemos usarlos para commitlintlograrlo.
Paquete de instalación
pnpm add @commitlint/config-conventional @commitlint/cli -D
Agregue el archivo de configuración, cree uno nuevo commitlint.config.cjs(tenga en cuenta que sí cjs) y luego agregue el siguiente código:
module.exports = {
extends: ['@commitlint/config-conventional'],
// 校验规则
rules: {
'type-enum': [
2,
'always',
[
'feat',
'fix',
'docs',
'style',
'refactor',
'perf',
'test',
'chore',
'revert',
'build',
],
],
'type-case': [0],
'type-empty': [0],
'scope-empty': [0],
'scope-case': [0],
'subject-full-stop': [0, 'never'],
'subject-case': [0, 'never'],
'header-max-length': [0, 'always', 72],
},
}
package.jsonConfigurar scriptscomandos en
# 在scrips中添加下面的代码
{
"scripts": {
"commitlint": "commitlint --config commitlint.config.cjs -e -V"
},
}
La configuración ha terminado. Ahora, cuando completemos commitla información, debemos traer lo siguientesubject
'feat',//新特性、新功能
'fix',//修改bug
'docs',//文档修改
'style',//代码格式修改, 注意不是 css 修改
'refactor',//代码重构
'perf',//优化相关，比如提升性能、体验
'test',//测试用例修改
'chore',//其他修改, 比如改变构建流程、或者增加依赖库、工具等
'revert',//回滚到上一个版本
'build',//编译相关的修改，例如发布版本、对项目构建或者依赖的改动
Configuraciónhusky
npx husky add .husky/commit-msg
commit-msgAgregue el siguiente comando al archivo generado
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
pnpm commitlint
Cuando commitenviamos información, ya no podemos escribirla casualmente. Debe git commit -m 'fix: xxx'ajustarse al tipo. Cabe señalar que el tipo debe ir seguido de inglés: y debe haber un espacio después de los dos puntos. Esto no se puede omitir. .
2.2.6 Forzar el uso de la herramienta de administración de paquetes pnpm
Cuando un equipo desarrolla un proyecto, es necesario unificar la herramienta de administración de paquetes, porque diferentes herramientas de administración de paquetes pueden descargar la misma dependencia en diferentes versiones.
Esto causa bugproblemas en el proyecto, por lo que la herramienta de administración de paquetes debe administrarse de manera uniforme. ! !
Cree scritps/preinstall.jsun archivo en el directorio raíz y agregue el siguiente contenido
if (!/pnpm/.test(process.env.npm_execpath || '')) {
console.warn(
`\u001b[33mThis repository must using pnpm as the package manager ` +
` for scripts to work properly.\u001b[39m\n`,
)
process.exit(1)
}
Comandos de configuración
"scripts": {
"preinstall": "node ./scripts/preinstall.js"
}
Cuando usamos npm o Yarn para instalar el paquete, se informará un error. El principio es que el código en el archivo de preinstalación (enganche de ciclo de vida proporcionado por npm) se activará durante la instalación.
3. Integración del proyecto
3.1 Integrar elemento-plus
Dirección del sitio web oficial: https://element-plus.gitee.io/zh-CN/
Instalarelement-plus
pnpm install element-plus @element-plus/icons-vue
El idioma admitido predeterminado main.tspara la instalación global del archivo de entrada es chino y el inglés es chino.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 PlusDeclaración de tipo de componente global
// tsconfig.json
{
"compilerOptions": {
// ...
"types": ["element-plus/global"]
}
}
Una vez completada la configuración, puede probar element-plusel uso de componentes e íconos.
3.2 Integrar el enrutador Vue
Instalarvue-router
pnpm i vue-router@4
Configuración de enrutamiento
// `src\router\index.ts`
// 通过vue-router插件实现模板路由配置
import {
createRouter, createWebHashHistory } from 'vue-router'
import {
constantRoute } from './router'
//创建路由器
const router = createRouter({
//路由模式hash
history: createWebHashHistory(),
routes: constantRoute,
//滚动行为
scrollBehavior() {
return {
left: 0,
top: 0,
}
},
})
export default router
// `src\router\router.ts`
// 对外暴露配置路由(常量路由)
export const constantRoute = [
{
//登录路由
path: '/login',
component: () => import('@/views/login/index.vue'),
name: 'login', //命名路由
},
{
//登录成功以后展示数据的路由
path: '/',
component: () => import('@/views/home/index.vue'),
name: 'layout',
},
{
path: '/404',
component: () => import('@/views/404/index.vue'),
name: '404',
},
{
//重定向
path: '/:pathMatch(.*)*',
redirect: '/404',
name: 'Any',
},
]
salida de enrutamiento
src\App.vue
3.3 Integrando Pinia
Instalar pinia:pnpm i [email protected]
// `src\store\index.ts`
// 仓库大仓库
import {
createPinia } from 'pinia'
//创建大仓库
const pinia = createPinia()
//对外暴露：入口文件需要安装仓库
export default pinia
// `src\store\modules\user.ts`
//创建用户相关的小仓库
import {
defineStore } from 'pinia'
//创建用户小仓库
const useUserStore = defineStore('User', {
//小仓库存储数据地方
state: () => {
},
//处理异步|逻辑地方
actions: {
},
getters: {
},
})
//对外暴露小仓库
export default useUserStore
3.4 Configuración del alias src
Al desarrollar un proyecto, la relación entre archivos puede ser complicada, por lo que necesitamos srcconfigurar un alias para la carpeta. ! !
// 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
}
}
})
TypeScriptCompilar configuración
// tsconfig.json
{
"compilerOptions": {
"baseUrl": "./", // 解析非相对模块的基地址，默认是当前目录
"paths": {
//路径映射，相对于baseUrl
"@/*": ["src/*"]
}
}
}
3.5 Configuración de variables de entorno.
Durante el proceso de desarrollo del proyecto, pasará por al menos tres etapas: entorno de desarrollo, entorno de prueba y entorno de producción (es decir, entorno formal). El estado de las solicitudes (como direcciones de interfaz, etc.) en diferentes etapas es diferente. Cambiar manualmente la dirección de la interfaz es bastante tedioso y propenso a errores. Entonces surgió la necesidad de configurar las variables de entorno. Solo necesitamos hacer una configuración simple y dejar el trabajo de cambiar los estados del entorno al código.
Entorno de desarrollo ( development)
Como sugiere el nombre, en el entorno de desarrollo, cada desarrollador trabaja en su propia rama de desarrollo. Cuando el desarrollo alcanza un cierto nivel, los colegas fusionarán el código y realizarán una depuración conjunta.
Entorno de prueba ( testing)
El entorno en el que trabajan los compañeros de prueba suele ser implementado por los propios compañeros de prueba y luego probado en este entorno.
Entorno de producción ( production)
El entorno de producción se refiere a la prestación oficial de servicios externos. Generalmente, los informes de errores están desactivados y los registros de errores están activados. (Entorno proporcionado oficialmente a los clientes).
Nota: Generalmente, un entorno corresponde a un servidor, y los entornos de desarrollo y prueba de algunas empresas son un servidor. ! !
¡Agregue archivos para entornos de desarrollo, producción y prueba al directorio raíz del proyecto respectivamente!
.env.development
.env.production
.env.test
contenido del documento
# 变量必须以 VITE_ 为前缀才能暴露给外部读取
NODE_ENV = 'development'
VITE_APP_TITLE = 'XX平台'
VITE_APP_BASE_API = '/dev-api'
NODE_ENV = 'production'
VITE_APP_TITLE = 'XX平台'
VITE_APP_BASE_API = '/prod-api'
# 变量必须以 VITE_ 为前缀才能暴露给外部读取
NODE_ENV = 'test'
VITE_APP_TITLE = 'XX平台'
VITE_APP_BASE_API = '/test-api'
Configurar el comando en ejecución:package.json
"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.envObtener variables de entorno por
3.6 Configuración de iconos SVG
Los gráficos vectoriales se utilizan a menudo al desarrollar proyectos svgy, después de usarlos SVG, los recursos de imagen ya no se cargan en la página. Esto es una gran mejora para el rendimiento de la página y nuestra SVGproporción de archivos imges mucho menor. Casi no se utilizan recursos en el proyecto. .
Instalar SVGcomplementos dependientes
pnpm install vite-plugin-svg-icons -D
vite.config.tsConfigurar el complemento en
import {
createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import path from 'path'
export default () => {
return {
plugins: [
createSvgIconsPlugin({
// Specify the icon folder to be cached
iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
// Specify symbolId format
symbolId: 'icon-[dir]-[name]',
}),
],
}
}
Importación de archivos de entrada
import 'virtual:svg-icons-register'
svgEncapsulado como un componente global
Debido a que muchos módulos del proyecto necesitan usar íconos, ¡están encapsulados como componentes globales! ! !
src/componentsCree un componente en el directorio SvgIcon: representado de la siguiente manera
<template>
<div>
<svg :style="{ width: width, height: height }">
<use :xlink:href="prefix + name" :fill="color"></use>
</svg>
</div>
</template>
<script setup lang="ts">
defineProps({
//xlink:href属性值的前缀
prefix: {
type: String,
default: '#icon-'
},
//svg矢量图的名字
name: String,
//svg图标的颜色
color: {
type: String,
default: ""
},
//svg宽度
width: {
type: String,
default: '16px'
},
//svg高度
height: {
type: String,
default: '16px'
}
})
</script>
<style scoped></style>
Cree un archivo en srcel directorio de la carpeta index.ts: se utiliza para registrar componentstodos los componentes globales dentro de la carpeta. ! !
import SvgIcon from './SvgIcon/index.vue';
import type {
App, Component } from 'vue';
const components: {
[name: string]: Component } = {
SvgIcon };
export default {
install(app: App) {
Object.keys(components).forEach((key: string) => {
app.component(key, components[key]);
})
}
}
Introduzca archivos en el archivo de entrada e instale complementos personalizados src/index.tsmediante métodosapp.use
import gloablComponent from './components/index';
app.use(gloablComponent);
3.7 Integrando descaro
Actualmente podemos usar estilos dentro del componente scssporque styleLintse instalaron en el proyecto al configurar la herramienta sass sass-loader, por lo que podemos usar la sintaxis dentro del componente scss. ! ! Necesita agregarlang="scss"
<style scoped lang="scss"></style>
A continuación agregamos algunos estilos globales al proyecto.
src/stylesCree un archivo en el directorio . index.scssPor supuesto, el proyecto debe borrar el estilo predeterminado, por lo que al index.scssintroducirreset.scss
@import reset.scss
Importado en el archivo de entrada
import '@/styles'
Pero encontrará que src/styles/index.scssno hay forma de utilizar variables en el archivo de estilo global, por lo que debe introducir variables globales en el proyecto.
¡ Creando style/variable.scssun variable.scssarchivo!
La configuración del archivo es vite.config.tsla siguiente:
export default defineConfig((config) => {
css: {
preprocessorOptions: {
scss: {
javascriptEnabled: true,
additionalData: '@import "./src/styles/variable.scss";',
},
},
},
}
}
@import "./src/styles/variable.less"No olvide el ";" al final; de lo contrario, se informará un error.
Una vez completada la configuración, encontrará scssque estas variables globales se pueden usar en estilos de componentes. ! !
3.8 embalaje secundario de axios
Al desarrollar un proyecto, es inevitable interactuar con el backend, por lo que necesitamos usar axioscomplementos para enviar solicitudes de red. Al desarrollar un proyecto
A menudo realizamos axiosembalaje secundario.
Objetivo:
1: Con el interceptor de solicitudes, puede manejar algunos negocios en el interceptor de solicitudes (iniciar la barra de progreso, el encabezado de la solicitud contiene parámetros públicos)
2: Con el interceptor de respuestas, puede manejar algunos negocios en el interceptor de respuestas (fin de la barra de progreso, simplificación de los datos devueltos por el servidor, manejo de httperrores de red)
Crear en el directorio raízutils/request.ts
import axios from "axios";
import {
ElMessage } from "element-plus";
//创建axios实例
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;