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

news/2024/4/19 0:21:52

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服务端或者源代码,将下载好的安装包解压到任意非…

订水商城实战教程07-搜索

目录 1 创建数据源2 首页搜索功能3 创建搜索页面4 搭建搜索结果页面总结 上一篇我们讲解了店铺信息的展示功能&#xff0c;本篇讲解一下搜索功能。通常小程序在首页都配置了搜索的功能&#xff0c;输入关键词进行检索&#xff0c;可以在结果页上进行选购。同时还记录了用户的搜…

Java日志组件之三Log4j2漏洞剖析及重现

一、前言 这一篇我们来介绍一下史上第二严重的安全漏洞是个什么情况&#xff0c;原理是什么&#xff0c;如何重现。 二、Log4j2 Lookup机制 Log4j2 Lookup机制最重要的功能就是提供一个可扩展的方式让你可以添加某些特殊的值到日志中。你调用logger.info(name);这样的语句&a…

[Linux 基础] Linux使用git上传gitee三板斧

文章目录 1、使用git1.1 安装git1.2 在Gitee上创建项目1.2.1 使用Gitee创建项目1.2.2 上传本地代码到远端仓库 1.3 git上传三板斧1.3.1 三板斧第一招&#xff1a;git add1.3.2 三板斧第二招&#xff1a;git commit1.3.3 三板斧第三招&#xff1a;git push 1、使用git 1.1 安装…

【排序算法】 计数排序(非比较排序)详解!了解哈希思想!

&#x1f3a5; 屿小夏 &#xff1a; 个人主页 &#x1f525;个人专栏 &#xff1a; 算法—排序篇 &#x1f304; 莫道桑榆晚&#xff0c;为霞尚满天&#xff01; 文章目录 &#x1f4d1;前言&#x1f324;️计数排序的概念☁️什么是计数排序&#xff1f;☁️计数排序思想⭐绝对…

css中flexbox和grid的区别

css中flexbox和grid的区别 我们是不是被那些不会按预期排列的元素所影响&#xff1f;这篇文章我们将深入探讨css中flexbox和grid的布局。通过了解他们的主要差异&#xff0c;我们会发现这些布局是如何改变我们网站的风格。 理解CSS布局 css布局是网页设计的一个重要方面&…

软考高项-49个项目管理过程输入、输出和工具技术表

知识领域数量五大过程组启动规划执行监控收尾整体7制订项目章程制订项目管理计划指导与管理项目工作 管理项目知识 监控项目工作 实施整体变更控制 结束项目或阶段范围6规划范围管理 收集需求 定义范围 创建WBS 确认范围 控制范围 进度6规划进度管理 定义活动

Vectrosity 插件使用

1 下载 https://download.csdn.net/download/moonlightpeng/88490704?spm1001.2014.3001.5503 2 使用&#xff0c;目前在2020.3.3上测试可以 导入时选5.6 再导入demo

Handler面试题

Handler面试题 1、子线程到主线程通信都有哪些方式&#xff1f;子线程到主线程通信的原理 handler 内存&#xff1a;线程间共享 主线程&#xff1a;处理消息 Handler.handlerMessage() Looper.loop()死循环取消息 -> queue.next ->handler.dispatchMessage()->handle…

HTTP和HTTPS本质区别——SSL证书

HTTP和HTTPS是两种广泛使用的协议&#xff0c;尽管它们看起来很相似&#xff0c;但是它们在网站数据传输的安全性上有着本质上的区别。 HTTP是明文传输协议&#xff0c;意味着通过HTTP发送的数据是未经加密的&#xff0c;容易受到拦截、窃听和篡改的风险。而HTTPS通过使用SSL或…

分布式事务(再深入)——分布式事务理论基础 Java分布式事务解决方案

前言 事务(TRANSACTION)是一个不可分割的逻辑单元&#xff0c;包含了一组数据库操作命令&#xff0c;并且把所有的命令作为一个整体向系统提交&#xff0c;要么都执行、要么都不执行。 事务作为系统中必须考虑的问题&#xff0c;无论是在单体项目还是在分布式项目中都需要进行…

[BUUCTF NewStarCTF 2023 公开赛道] week3 crypto/pwn

居然把第3周忘了写笔记了. 后边难度上来了,还是很有意思的 Crypto Rabins RSA rsa一般要求e与phi互质,但rabin一般用2,都是板子题也没什么好解释的 from Crypto.Util.number import * from secret import flag p getPrime(64) q getPrime(64) assert p % 4 3 assert q %…

webGL编程指南 第五章 TexturedQuad_Clamp_Mirror

我会持续更新关于wegl的编程指南中的代码。 当前的代码不会使用书中的缩写&#xff0c;每一步都是会展开写。希望能给后来学习的一些帮助 git代码地址 &#xff1a;空 上一章节中我们学习了如何使用varyting变量绘制图片&#xff0c;本章节&#xff0c;我们学习texParameter…