vue3+vite+ts+pinia+router4后台管理
文章平均质量分 85
从零开始vue3+vite+ts+pinia+router4后台管理
一路向北xwq
这个作者很懒,什么都没留下…
展开
-
什么才是完美的表格二次封装elementPlus表格?-从零开始vue3+vite+ts+pinia+router4后台管理(7)
ElementPlus 是一个优秀的组件库,后台管理表格页面多的话大家都想到表格的二次封装,封装的时候大家都想到 每一列写成 “ 数组” 写法。然后用vue3的去写一些自定义的东西,如下面的例子“ 数组” 封装的缺点有上面的代码可以看出 el-table-column虽然少写了,但是json数组的代码并没有少写,上面的自定义列其实在ElementPlus上面直接写的话也就几行代码我们尤其是复杂的管理页面 自定义的列也会越来越复杂,后面我们的代码也会越来越难维护,那么应该怎么办呢?我的想法下面是我封装二原创 2023-11-16 16:36:52 · 849 阅读 · 0 评论 -
从零开始vue3+vite+ts+pinia+router4后台管理(4)-导航标签栏和keep-alive缓存
这样inclue 我们获取的cachedViews 路由的name和组件name一样 的话页面就会被缓存 如下图,切换页面的时候输入框的值并没有改变。上面的写法在 vue2 中是可以的,但是在 vue3 中需要将 keep-alive 写在 router-view 中才行,我们修改一下写法。,vue3我们用setup 语法的时候没有export default 那我们的name定义在什么地方呢 这里我们需要一个插件。1.我们缓存的是页面的main部分 header和侧边栏是不缓存的 ,vue2 的写法。原创 2023-10-07 18:28:22 · 318 阅读 · 0 评论 -
从零开始vue3+vite+ts+pinia+router4后台管理(3)-动态路由
函数,允许你从路径中解析文件。比如后端返回的是oder/orderList 路由 需要前端匹配 你需要在views文件夹 新建一个order文件夹 然后文件夹新建一个orderList.vue。当然 如果你用的是vue2 vueCli构建的vue项目 你可以用 require引入 import.meta.glob只适用于Vite。),然后前端根据获取的路由数组动态加载路由,今天我们就看看怎么样实现的吧!init为true说明已经获取过路由,就直接放行,init为false则向后台请求用户路由。原创 2023-10-07 11:36:02 · 844 阅读 · 0 评论 -
从零开始vue3+vite+ts+pinia+router4后台管理(2)-页面布局
在store文件夹下面创造一个settings.ts来控制一些全局的设置,layoutMode就是控制布局变量的参数。第二中可以让表格铺满屏幕 展示更多的数据 ,但是两种到想要怎么办?切换页面布局的时候改变settingsStore.layoutMode值就行。用is来实现动态组件 来实现我们后台页面布局切换。1.限制元素 ,下面是官网的解释。页面布局用is实现动态组件。常见的页面布局有两种。原创 2023-10-07 10:48:59 · 343 阅读 · 0 评论 -
从零开始vue3+vite+ts+pinia+router4后台管理(1)
公司上半年重构了后台管理页面,用了,想记录一下一个公司后台管理项目从零到开始的过程# 克隆项目 gitee地址# 进入项目目录# 安装依赖# 本地开发 启动项目。原创 2023-10-06 11:38:43 · 238 阅读 · 0 评论