手把手教—搭建Vue3.2 + TypeScript + Pinia + Vite4 + Element-Plus + 微前端（qiankun） 后台管理系统模板

已于 2023-05-23 15:53:29 修改
阅读量1.9k 收藏 5
点赞数 1
分类专栏： vite+vue3项目搭建 文章标签： vue3 vite typescript pinia qiankun
于 2022-10-13 17:46:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cwin8951/article/details/127305705
版权

第一步、vite+vue3+ts项目搭建

第二步、集成vue-router、axios封装、element-plus及icon

配置eslint&prettier参考

部分vite实用插件介绍

第三步、以Pinia代替vuex及Pinia持久化处理

第四步、Layout组件搭建、如何全局自动注册基础组件、缓存页面

第五步、qiankun引入并让其主子应用之间切换

第六步主要基础组件

1、条件查询基础组件

2、TTable基础组件

3、TForm基础组件

4、下拉Table基础组件

最终效果

后台管理系统模板

在这里插入图片描述

主子应用切换

在这里插入图片描述

组件地址

gitHub组件地址

gitee码云组件地址

在线预览地址

相关文章

基于ElementUi再次封装基础组件文档

vue3+ts基于Element-plus再次封装基础组件文档

wocwin
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化
05-12
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+...
基于 Vue3+TypeScript+Vite+Pinia+Element-Plus 构建的后台系统.zip
01-03
Vue3，springboot，element-ui使用技巧，实战应用开发小系统参考资料，源码参考。 详细介绍了一些Qt框架的各种功能和模块，以及如何使用Qt进行GUI开发、网络编程和跨平台应用开发等。 适用于初学者和有经验的开发者...
基于 vue3.x + CompositionAPI + javascript + vite的开源免费H5移动端模板
02-12
html5开发
开箱即用，这些 Vue3 后台管理系统模板绝对让你爽歪歪！
热门推荐
唐先森的博客
09-02 5万+
之前写了一篇关于 Vue2 的后台管理系统模板的推荐，详情请见。Vue3 在今年2月份已成为新的默认版本，本文收集了一些 Vue3 的后台管理系统模板，分享给在座的仌 👣。还是老规矩，按照星标数量来依次介绍。
vite创建vue3引入elementui-plus + vue-router4过程_element vue route vite(1)
最新发布
2401_84617302的博客
05-16 438
打开全栈工匠技能包-1小时轻松掌握SSR两小时精通jq+bs插件开发生产环境下如歌部署Node.js网易内部VUE自定义插件库NPM集成谁说前端不用懂安全，XSS跨站脚本的危害webpack的loader到底是什么样的？两小时带你写一个自己loader。
vue3开源后台管理系统模板
q2724338648的博客
12-18 7503
（github上的标星数为14.2k）基于 vite + vue3 + gin 搭建的开发基础平台（支持TS，JS 混用），集成 jwt鉴权，权限管理，动态路由，显隐可控组件，分页封装，多点登录拦截，资源权限，上传下载，代码生成器，表单生成器等开发必备功能。和 UnoCSS 的清新优雅的中后台模版，它使用了最新的前端技术栈，内置丰富的主题配置，有着极高的代码规范，基于 mock 实现的动态权限路由，开箱即用的中后台前端解决方案，也可用于学习参考。（github上的标星数为13.5k）是一个基于。
Vue3 后台管理系统模板
追光者
03-13 2349
之前写了一篇关于的后台管理系统模板的推荐，详情请见。在今年2月份已成为新的默认版本，本文收集了一些 Vue3 的后台管理系统模板，分享给在座的仌 👣。还是老规矩，按照星标数量来依次介绍。个人较推荐。意见仅供参考，具体可根据团队审美，业务需求选择一款更契合的。
Vue3后台管理系统模板推荐
weixin_50379372的博客
10-10 3908
Vue-Vben-Admin（github上的标星数为14.2k）是一个基于 Vue3.0、Vite、 Ant-Design-Vue、TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。包括二次封装组件、utils、hooks、动态菜单、权限校验、按钮级别权限控制等功能。项目使用前端较新的技术栈，可以作为项目的启动模版
Vue3.0+TypeScript+Element-Plus编写的一套后台管理系统（兼容移动端）.zip
05-02
Vue3.0+TypeScript+Element-Plus编写的一套后台管理系统（兼容移动端），使用了最新的vue3 vite2 Element-Plus TypeScript等主流技术开发，开箱即用的中后台前端解决方案，也可用于学习参考。 Vue3.0+TypeScript+...
基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip
04-12
基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip 基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip 基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip 基于...
Vue3+Vite4+Element-Plus+TypeScript编写的一款后台管理系统（兼容移动端）
05-03
Vue3+Vite4+Element-Plus+TypeScript编写的一款后台管理系统（兼容移动端）；精简版是基于 vue-pure-admin 提炼出的架子，包含主体功能，更适合实际项目开发，打包后的大小在全局引入 element-plus 的情况下仍然低于...
vue系列（三）——手把手教你搭建一个vue3管理后台基础模板
xxfen_的博客
07-02 1万+
手把手教你搭建一个vue3管理后台基础模，附带源代码
【VUE】vue3.0后台常用模板
LuviaWu的博客
03-07 5835
推荐基于vue3.0开发的后台管理好用的模板，让需要的人快速获取合适的模板
Vue3.2 + TypeScript + Pinia + Vite4 + Element-Plus + 微前端（qiankun）后台管理系统模板（已开源---新增T-ui-plus超级表格demo）
wocwin的博客
04-20 2548
Vue3.2 + TypeScript + Pinia + Vite4 + Element-Plus + 微前端（qiankun） 后台管理系统模板（已开源）vue3+vite项目；Vue3项目；后台管理系统，脚手架模板，开箱即用，登录页面重写及新增fastmock接口，新增大屏页面；新增菜单及按钮权限控制；EasyMock；fastMock
vue3+element-plus 、 vue3+ant-design-vue、 react + antd版本的后台管理系统模板。后端springboot代码也有提供
qq_61233877的博客
06-05 1万+
规范：后台系统模板，按照企业级别的规范搭建的。权限控制：通过后端返回的路由表（这个路由表是由前端这边在系统配好的然后存储在后端的）来动态渲染菜单和注册路由，同时也根据页面内的接口权限对页面中的按钮做了是否可见的设置。前端这边有路由、角色、用户管理3个模块来控制权限，配权限找到这3个模块一步步配就行了。功能模块封装：对axios进行了封装；封装了pinia持久化插件；封装了判断按钮权限的函数；封装了自定义hook来操作vue-i18n的国际化；封装了基于浏览器存储的自定义存储方式；封装了常用的工具函数。
微前端-qiankun：vue3-vite 接入 vue3-webpack
snowball的博客
03-15 1118
​ 主应用：vue3、vite 子应用：vue3、webpack
vue3.0 + elementPlus 后台管理系统模板
张一西的博客
02-04 9093
gif示例 github地址: github 基于vue3.x + elementPlus 实现的后台管理系统模板 1、 登录逻辑. 2、 基本布局(基于elementPlus) 3、 动态路由逻辑 4、 动态菜单栏逻辑 5、 面包屑 6、 皮肤切换 7、 假数据模拟路由菜单 Project setup yarn install Compiles and hot-reloads for development yarn serve Compiles and minifies fo
使用vue3+element-ui plus 快速构建后台管理模板
m0_63622279的博客
10-12 9341
使用vue3+element-ui plus 快速构建后台管理模板，分为侧边栏，顶部栏和内容区域三个块，前两个抽离为组件，内容区域使用routerview跳转即可，组件通信使用父子组件的通信方式。element ui plus 主要使用了 container布局容器以及icon图标。
vue3+vite+TypeScript+Element plus+pinia搭建开发脚手架
oschina_41559824的博客
03-02 1433
eslint-config-prettier：解决ESLint中的样式规范和prettier中样式规范的冲突，以prettier的样式规范为准，使ESLint中的样式规范自动失效。@typescript-eslint/parser：ESLint的解析器，用于解析typescript，从而检查和规范Typescript代码。在 src/assets 下新增 style 文件夹，用于存放全局样式文件，新建 index.scss,在main.ts文件中定义定义pinia-plugin-persist使用。
vue3+vite4+element-plus+typescript编写的一款后台管理系统(兼容移动端)
09-16
Vue3是一种流行的JavaScript框架，它被广泛用于构建现代化的Web应用程序。Vite4是Vue3的一种构建工具，它具有快速的冷启动时间和即时的热模块替换，使开发过程更加高效。Element Plus是一套基于Vue3的UI组件库，它提供了丰富的可定制化的组件，使得构建界面变得简单。 这款后台管理系统是使用Vue3、Vite4和Element Plus进行开发的。它提供了一个现代化的用户界面，适用于管理各种类型的后台数据。 由于使用了Vue3和Vite4，该后台管理系统具有卓越的性能和开发速度。Vue3的响应式数据绑定机制可以确保数据状态的变更能够自动同步到界面上，使用户获得更流畅和高效的交互体验。Vite4的快速冷启动和即时热模块替换功能，可以大大提升开发过程中的效率，保证开发者可以实时看到代码改动的效果。 另外，使用Element Plus作为UI组件库，可以让开发者快速构建各种功能丰富的界面元素。Element Plus提供了大量的可用组件，如表格、表单、图表等，开发者可以根据需求轻松地快速搭建出美观且易用的后台管理系统。 这款后台管理系统还具备移动端适配能力，可以在手机等移动设备上正常访问和使用。通过Vue3的响应式设计和Element Plus的响应式布局，界面可以根据不同的屏幕大小和设备自动适应并呈现最佳的使用体验。 总而言之，这款使用Vue3、Vite4和Element Plus开发的后台管理系统具有出色的性能、灵活的开发工具、丰富的可定制化组件和良好的移动端适配能力，适合开发者快速构建现代化的后台管理系统。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

wocwin

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值