(Vite-Vue-Admin)Vue3+vite+element-plus项目功能和问题总结

news/2025/2/19 2:38:26/

1.vite快速构建vue3项目 npm create vite@latest vite-vue-admin -- --template vue
2.element-plus三种引入方式(全局引入,按需引入,手动引入)
3.vue3引入路由
4.layout整体布局实现(header,aslide,main)

可以写一个公共的样式文件index.less
5.问题:设置整个高度为100%不生效:解决,不仅设置#app,还要设置html和body。

    html,body,#app{margin: 0;padding: 0;height: 100%;}

6.header图标使用

  • element-plus的el-icon引入 npm install @element-plus/icons-vue;注意图标需要全局引入,或者配置按需引入;
  • el-button中使用图标,最好在el-button下再引入el-icon或者svg图标好设置图标大小
  • element-plus中el-avatar以及el-image组件使用本地路径的图片无法显示的问题。解决:需要使用new URL(url, import.meta.url)特定图片处理方法(import.meta.url 是一个 ESM 的原生功能,会暴露当前模块的 URL。将它与原生的 URL 构造器 组合使用,在一个 JavaScript 模块中,通过相对路径我们就能得到一个被完整解析的静态资源 URL)

7.header右侧下拉菜单实现:el-dropdown;里面可以有表单然后包含处理方法

8.左侧菜单的初步实现(el-menu);动态图标使用<component>  ;el-menu的index对应路由路径配置    

<el-icon><component class="icons" :is="item.icon"></component></el-icon>

9.基础样式整理实现

10.vue3中如何使用vuex实现菜单折叠(vuex在setup中mapState等辅助函数用法)

const store = useStore();
const isCollapse = computed(() => store.state.layout.isCollapse);const collapseMenu = (isCollapse) =>{store.commit("layout/modifyCollapse",isCollapse);
}

11.左侧路由跳转右侧展示相应组件的实现
12.home组件左侧动态实现
13.vue3本地mock和线上fastmock的使用(本地:一定要引入mock.js文件到main.js)
14.二次封装axios的原因及实现:请求封装,线上fastmock,

  • 三个环境的配置(vite获取环境变量import.meta.env.MODE):导出的config包括当前环境;三个环境配置根据当前环境的返回;全局mock设置
  • Mock总开关和单个接口自定义开关(便于接口调试和联调):isMock是mock是否使用线上mock控制的总开关,如果这里设置true,后面单个接口可以不设置,如果想单独设置false也可以在具体接口中设置,在后续联调时好一次性修改
  • 判断是线上环境不能使用mock ,使用线上api
  • 注意属性值method不是methods

15.Home组件右侧上面数据的展示:el-card用户信息,购买数据显示

16.注意布局格式:el-row和el-col
17.Home组件右侧echarts表格的渲染

  • 获取数据折线图,柱状图,拼图数据,并设置option的基本配置
  • 获取数据:重点在接口数据获取后,数据的重新组装,xAxis.data和series数据不对,就显示不出来
  • Setup中获取proxy方法类似于this
  • 折线图:x轴数据,series数据,type通过过去的数据设置进去(根据echarts 官网),echarts.init()方法,参数必须是真实的DOM元素
  • 柱状图:
  • 饼图

18.面包屑的实现:breakcrumb vuex 
    问题:setup中使用vuex辅助函数?
    首页一直显示,其他分级显示
    less样式穿透:deep()

多级菜单可以设置多个属性:

 menuItem: [{first: "其他", second: "页面1"}]
      <el-breadcrumb separator="/"><el-breadcrumb-item class="root" :to="{ path: '/' }">首页</el-breadcrumb-item><el-breadcrumb-item v-if="menuItem.first && menuItem.first!=='首页'"><a href="/">{{menuItem.first}}</a></el-breadcrumb-item><el-breadcrumb-item v-if="menuItem.second">{{menuItem.second}}</el-breadcrumb-item></el-breadcrumb>

19.tags标签展示及切换
tags标签的删除(删除后高亮显示逻辑)
    Tag显示和删除,高亮显示,tag实现步骤
    el-tag tag为home时不能删除
    左侧菜单点击时,tag显示
    点击tag进行路由跳转
    关闭tag ,取length 关闭后索引减一且vuex中数据删除
    删除当前跳转后一个,删除最后一个跳转前一个

element-plus的el-tag标签关闭标签时的高亮显示逻辑-CSDN博客

20.use组件table数据的展示:用户管理用本地mock实现,因为有增删改查
用户管理分页实现
分页样式处理
用户搜索的实现
用户新增UI实现
用户新增数据实现
    渲染,分页,点击某页时数据更新
    分页样式,

21.计算表格高度,用calc计算高度用于动态计算长度值

用户搜索
    用户新增:dialog,新增完成后,关闭弹窗,提示,重置表单,刷新表单数据,重置表单需要有prop属性重置表单不生效?日期处理;

setup()函数中emit的用法:

 setup(props,context) {const dialogVisible = props.dialogVisible;// 关闭弹窗const handleClose = done => {context.emit("closeDialog", false);}
}


新增用户表单验证:新增和编辑共用组件;title处理:变量区分;编辑时数据通过插槽传入;

22.浅拷贝对编辑数据进行处理Object.assign;?

23.点击后再点新增新增窗口有值?通过nextTick进行处理

主要通过Object.assign()对userForm数据进行浅拷贝,并且通过nextTick()方法使浅拷贝的数据立即生效

    // 打开用户编辑窗口const openEditDialog = row => {dialogVisible.value = true;type.value = "edit";proxy.$nextTick(() => {Object.assign(userForm.value, row);});};


用户编辑实现第一步
用户编辑实现第二步
删除用户

24.登录静态页面实现
    登录后左侧菜单数据不一样,菜单显示不同
    菜单数据app里面调用,每次登录都要获取
登录后返回左侧菜单的列表
存储到vuex中的aside组件显示出来
解决数据持久化问题 

import createPersistedState from 'vuex-persistedstate'const store = createStore({modules:{layout,token},plugins: [createPersistedState()]
});


25动态路由实现(重点)
    登录后需要调用menu数据,然后根据menu数据动态设置路由数据
    路由里面通过循环路由数据生成动态路由
    router.addRoute()
    问题:路由重复? 动态路由设置在app.vue里面刷新时有问题

动态路由配置总结:vue3动态路由配置总结-CSDN博客
登出功能实现
26.路由守卫实现(路由拦截逻辑)
    token设置,获取,清楚,通过js-cookie进行设置
    没有token且路由不为login
    登录以后用错误路由地址栏回车:路由匹配,获取到路由用当前路由进行匹配
    否则进行跳转


// 路由守卫中再次设置路由(此时是在地址栏直接回车时处理)
store.commit("layout/setDynamicRoutes", router);// 判断路由在配置的动态路由中是否存在,不存在则跳转到home,存在则直接跳转
const checkRouter = (path) =>{let hasCheck =  router.getRoutes().filter(item=>item.path == path).length;if (hasCheck) {return true} else {return false}
}router.beforeEach((to, from, next) => {// 要重新获取tokenconst token = store.state.token.token;//注意这里的逻辑: 如果咩有token且路由不为/login则直接跳转到login页面// 如果路由存在且有token则直接到home页面否则直接nextif (!token && to.path !== '/login') {next('/login');// 否则检查路由是否存在,不存在直接跳转home页面}else if(!checkRouter(to.path)){next('/main');}else {// 存在则直接跳转next();}
});

27.api封装中实现请求拦截后ElMessage弹窗处理信息,发现ElMessage样式错误

如果要再非vue组件中使用element-plus组件且有样式需要组件和样式文件一起引入(这种情况配置了按需引入也没用)

import { ElMessage } from 'element-plus'
import 'element-plus/dist/index.css'


http://www.ppmy.cn/news/1191315.html

相关文章

AI“走深向实”,蚂蚁蚁盾在云栖大会发布实体产业「知识交互建模引擎」

数字化起步晚、数据分散稀疏、专业壁垒高、行业知识依赖「老师傅」&#xff0c;是很多传统产业智能化发展面临的难题。2023年云栖大会上&#xff0c;蚂蚁集团安全科技品牌蚁盾发布“知识交互建模引擎”&#xff0c;将实体产业知识与AI模型有机结合&#xff0c;助力企业最快10分…

c++设计模式二:原型模式

使用场景&#xff1a;当需要构建多个相同的类对象时&#xff0c;而且该类对象结构较为复杂&#xff0c;如果每个都重新组织构建会很麻烦。 其实&#xff0c;就是写一个拷贝构造函数&#xff0c;或者写一个拷贝每个成员变量的clone()方法。 举例说明&#xff1a;比如一个相亲网站…

http代理和ip代理的区别,代理IP带来了哪些好处?

随着互联网的快速发展&#xff0c;代理IP和HTTP代理已成为网络爬虫、网络营销、数据抓取等领域中不可或缺的一部分。但是&#xff0c;很多人在使用代理IP和HTTP代理时并不清楚两者的区别&#xff0c;以及代理IP所带来的好处。本文将详细介绍这两者之间的差异&#xff0c;以及代…

Feign的Retryer接口

Feign的Retryer接口 Feign的Retryer接口是用于重试失败请求的接口。当使用Feign进行远程调用时&#xff0c;可能会出现网络故障或服务器错误等问题导致请求失败。此时&#xff0c;可以通过Retryer接口实现自动重试机制&#xff0c;让请求重新发送&#xff0c;直到成功或达到最…

电子器件 MOS管的参数、选型与使用技巧

一、电路符号 MOS管分为 G&#xff08;栅极&#xff09;、S&#xff08;源极&#xff09;、D&#xff08;漏极&#xff09; 三极&#xff0c;在图中 S 极有两条线&#xff0c;D 极只有一条线。 1.1 NMOS 和 PMOS 下图中&#xff0c;左侧是 PMOS&#xff0c;右侧是 NMOS。箭头…

Jmeter之JSR223

一、JSR223组件 JSR是Java Specification Requests的缩写,意思是Java规范提案。JSR已成为Java界的一个重要标准. JSR223其实包含了有好几种组件,但是其用法都是一致的,并且都是执行一段代码&#xff0c;主要分类如下&#xff1a; JSR223 PreProcessor JSR223 Timer JSR223 S…

MySQL - 系统库之 sys

sys 系统库用于管理和监控MySQL服务器的性能和运行状态&#xff1a; 用途&#xff1a; 性能监控和分析&#xff1a;sys 系统库用于监控MySQL服务器的性能和资源利用情况。它提供了各种视图和函数&#xff0c;用于分析查询性能、资源利用、等待事件等方面的数据。性能调优&…

01-Nacos安装和下载

Nacos安装和下载 安装步骤 Nacos是阿里巴巴的产品现在是SpringCloud中的一个组件&#xff0c;相比于Eureka功能更加丰富&#xff0c;在国内受欢迎程度较高 第一步: 在Nacos的GitHub上Release的下载页面上可以下载编译好的Nacos服务端或者源代码,将下载好的安装包解压到任意非…