嵌入式团队后台管理系统

ui图设计
未命名文件-ProcessOn

创建前的配置

"scripts": {

    "dev": "vite --open",//浏览器自动打开
  },

eslint

ESLint 中文网
ESLint最初是由Nicholas C. Zakas 于2013年6月创建的开源项目。它的目标是提供一个插件化的**javascript代码检测工具

ui组件库引入

npm install element-plus --save

src文件别名

如果出现红色波浪线,卸载vetur插件

环境变量的配置

集成SVG图标

体积小
在开发项目的时候经常会用到svg矢量图,而且我们使用SVG以后，页面上加载的不再是图片资源,

这对页面性能来说是个很大的提升，而且我们SVG文件比img要小的很多，放在项目中几乎不占用资源。

安装

npm 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
        iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
        // Specify symbolId format
        symbolId: 'icon-[dir]-[name]',
      }),
    ],
  }
}

入口文件导入

import 'virtual:svg-icons-register'

使用

封装svg组件

项目中有很多地方用到svg图片

<template>

    <h1>测试svg图标</h1>

    <!-- svg: 图标外层容器节点 , 内部需要与use标签结合使用 -->

    <svg :style="{width:width,height:height}">

      <use :xlink:href="prefix+name" :fill="color"></use>

    </svg>

</template>

  

<script setup lang='ts'>

//接收父组件传过来的参数

defineProps({

  //xlink:href属性的前缀(vue3官方文档)

  prefix:{

   type:String,

   default:"#icon-"

  },

  //svg图标的名字

  name:String,

  //父组件传递的参数

  color:{

    type:String,

    default:""

  },

  width:{

    type:String,

    default:'16px'

  },

  height:{

    type:String,

    default:'16px'

  }

})

</script>

<style lang='scss' scoped>

  

</style>

父组件中

<script setup lang="ts">

import SvgIcon from "@/components/SvgIcon/index.vue"

</script>

  

<template>

  <SvgIcon name="test" width="200px" height="200px" color="pink"></SvgIcon>

  

</template>

  

<style scoped>

  

</style>

注册全局组件

将其注册成为全局组件

import SvgIcon from '@/components/SvgIcon/index.vue'
//注册全局组件
app.component('SvgIcon', SvgIcon)

利用自定义插件 – 注册全局组件

如果全局组件越来越多,每一个都要引入注册
比较麻烦

install方法会将app引入作为参数
利用app的component方法就可以注册组件

全局样式

默认样式去除

引入css文件
scss-reset - npm (npmjs.com)

无法使用sass全局变量

mock数据

vite-plugin-mock/README.zh_CN.md at ca2e9eabf1704f2e1bbb33f4cd66bfd440c90828 · vbenjs/vite-plugin-mock · GitHub

axios二次封装

在开发项目的时候避免不了与后端进行交互,因此我们需要使用axios插件实现发送网络请求。在开发项目的时候

我们经常会把axios进行二次封装。

目的:

1. 使用请求拦截器，可以在请求拦截器中处理一些业务(开始进度条、请求头携带公共参数)

2. 使用响应拦截器，可以在响应拦截器中处理一些业务(进度条结束、简化服务器返回的数据、处理http网络错误)

//进行axios二次封装,使用拦截器

import axios from "axios";

import { ElMessage } from "element-plus";

//1. 创建axios实例

let request = axios.create({

    //基础路径

    baseURL: import.meta.env.VITE_APP_BASE_API,

    //超时时间(请求必须在5秒内获得响应)

    timeout: 5000

})

  

//2. 添加请求拦截器

request.interceptors.request.use(function (config) {

    // 在发送请求之前做些什么

  
  

    //返回配置对象config

    //config中有一个属性headers,可以用来设置请求头,给服务器携带公共参数

    return config;

  }, function (error) {

    // 对请求错误做些什么

    return Promise.reject(error);

  });

  

//3. 添加响应拦截器

request.interceptors.response.use(function (response) {

    // 成功回调

    return response.data;

  }, function (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

    })

  
  

    //返回一个pending状态的Promise,中断promise链

    return Promise.reject(error);

  });

  
  

//4. 导出axios实例

export default request;

vue 使用

过渡特效(路由组件切换的)
https://router.vuejs.org/zh/guide/advanced/transitions.html

刷新页面,菜单合拢-----让菜单保持展开效果