3.项目集成
3.1 集成element-plus
element-plus基于 Vue 3，面向设计师和开发者的组件库。
3.1.1 安装
安装element-plus
pnpm install element-plus
3.项目集成
3.1 集成element-plus
element-plus基于 Vue 3，面向设计师和开发者的组件库。
3.1.1 安装
安装element-plus
pnpm install element-plus
3.1.2 应用
入口文件main.ts全局安装element-plus
import { createApp } from 'vue' import './style.css' import App from './App.vue' import elementplus from 'element-plus' import 'element-plus/dist/index.css' const app=createApp(App) app.use(elementplus).mount('#app')
组件使用
<script setup lang="ts"> import {Plus} from '@element-plus/icons-vue' </script> <template> <div> <el-button type="primary" :icon="Plus">hello</el-button> </div> </template>
3.2 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/*"] } } }
3.3 Mock
3.3.1 Mock 定义
Mock测试就是在测试过程中，对于某些不容易构造或者容易获取的对象，用一个虚拟的对象来创建以便测试的测试方法。
Mock可以模拟一个http接口的后台响应，就这么简单，可以模拟request、response。
3.3.2 Mock 使用场景
1.调用第三方系统而无法给客户搭建一套演示环境
2.调用第三方系统而无法进行稳定的开发测试
3.调用第三方系统而无法进行自己系统的性能测试
4.后端未完成接口开发，前端要先一步开发
5.真实场景的返回值覆盖不了测试场景
3.3.3 安装和测试
安装依赖
pnpm install -D vite-plugin-mock@2.9.6 mockjs
在 vite.config.ts 配置文件启用插件。
import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import path from 'path' import {viteMockServe} from 'vite-plugin-mock' export default ({ command })=> { return { plugins: [ vue(), viteMockServe({ localEnabled: command === 'serve', }), ], } }
在根目录创建mock文件夹:去创建我们需要mock数据与接口，在mock文件夹内部创建一个user.ts文件
//用户信息数据 function createUserList() { return [ { username: 'admin', password: '111111', }, { username: 'system', password: '111111', }, ] } export default [ // 用户登录接口 { url: '/user/login',//请求地址 method: 'post',//请求方式 response: ({ body }) => { //获取请求体携带过来的用户名与密码 const { username, password } = body; //调用获取用户信息函数,用于判断是否有此用户 const checkUser = createUserList().find( (item) => item.username == username && item.password == password, ) //没有用户返回失败信息 if (!checkUser) { return { code: 201, data: { message: '账号或者密码不正确' } } } //如果有返回成功信息 const { token } = checkUser return { code: 200, data: {message: '登录成功'} } }, }, ]
最后就可以通过axios进行测试。
3.4 axios封装
在开发项目的时候避免不了与后端进行交互,因此我们需要使用axios插件实现发送网络请求。在开发项目的时候我们经常会把axios进行二次封装。
1:使用请求拦截器，可以在请求拦截器中处理一些业务(开始进度条、请求头携带公共参数)
2:使用响应拦截器，可以在响应拦截器中处理一些业务(进度条结束、简化服务器返回的数据、处理http网络错误)
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;
3.5 集成Sass
3.5.1 sass介绍
Sass 是一种 CSS 的预编译语言。它提供了 变量（variables）、嵌套（nested rules）、 混合（mixins）、 函数（functions）等功能，并且完全兼容 CSS 语法。Sass 能够帮助复杂的样式表更有条理， 并且易于在项目内部或跨项目共享设计。
3.5.2 安装
pnpm install sass sass-loader
但是你会发现在src/styles/index.scss全局样式文件中没有办法使用变量 ，因此需要给项目中引入全局变量。在style/variable.scss创建一个variable.scss文件！里面存放全局变量，然后在vite.config.ts中配置如下：
export default defineConfig((config) => { css: { preprocessorOptions: { scss: { javascriptEnabled: true, additionalData: '@import "./src/styles/variable.scss";', }, }, }, } }
配置完毕你会发现scss提供这些全局变量可以在组件样式中使用了。
3.5.3 sass语法
变量
在sass中我们可以把反复使用的css属性定义成变量，然后通过变量名去引用他们，从而不用重复书写这个属性值，使用$符号定义变量。在sass变量名中的中划线和下划线是等同的，不做区分
$highlight-border: 1px solid red;
普通嵌套
sass提供了一种嵌套式写法，只需写一次且可读性更高
div{ h1{ color:$red; } }
伪类选择器
当我们使用到伪类选择器的时候
article a { color: blue; :hover { color: red } }
编译后的css代码是这样子的
article a { color: blue; } article a :hover { color: red; }
这时候sass就提供了&给我们使用，&代表的是我们父类的选择器，这里的&代表的就是article a，我们可以把sass代码写成这样
article a { color: blue; &:hover { color: red } }
混合器mixin
我们可以用@mixin标识符定义一大段的css样式，然后在不同地方用@include重复复用它
@mixin alert { background-color: yellow; color: red; } h1{ @include alert }
混合器支持像函数一样进行参数传递，来达到模块定制的功能
@mixin alert($text-color,$backgroud-color) { background-color: $backgroud-color; color: $text-color; } h1{ @include alert(red,blue) }
继承
继承是SASS中非常重要的一个特性，可以通过@extend指令在选择器之间复用CSS属性，并且不会产生冗余的代码。
@mixin alert($text-color,$backgroud-color) { background-color: $backgroud-color; color: $text-color; } h1{ @include alert(red,blue) } h2{ @extend h1 }
@import
sass可以通过@import的形式导入其他sass文件，达到模块化的效果, 那些专门供别的sass文件import的文件被称为局部文件，sass有个特殊的约定这些文件命名。那就是以下划线开头，在引入的时候还可以省略下划线。举例来说，你想导入styles/_a.scss这个局部文件里的变量，你只需在样式表中写@import "styles/a"。
