使用vite + vue3 + pinia + ElementPlus 搭建后台管理项目

于 2025-01-27 22:12:41 发布
阅读量370 收藏 2
点赞数 9
文章标签： vue.js 前端 前端框架 elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/zihan0321/article/details/145383132
版权

考虑到不是所有人都会ts，本文中所有的代码都是以js为主

前端采用 Vue3，后端采用 springBoot + Mytatis
技术优势
使用 Vue3、Vite、ElementPlus、Pinia最新开发技术栈， 拥有完整的Token登录鉴权、路由配置、界面简洁美观，可根据需要灵活配置主题、系统采用响应式布局，自适应各类屏幕尺寸、源代码有详细的注释，便于使用和升级、授权用户有专属技术服务群。
采用最新技术栈
使用 Vue3、ElementPlus、vite、CompositionApi、Scss、Pinia，Axios 最新版搭建。
国际化支持
系统采用最新的国际化语言支持，系统支持简体中文、繁体中文、English 三种语言，可满足不同地区的开发人员的需要。
支持多种终端使用
系统采用响应式设计、支持大部分主流的浏览器：Chorme、Firefox、Safari、360浏览器。
演示地址：https://www.eleadmin.cn

系统截图：

zihan0321
关注
vue3 一个基于pinia简单易懂的系统权限管理实现方案，vue-router动态路由异步问题解决_如何解决router是异步的问题(1)
2401_84446963的博客
04-29 612
power: ‘’,//权限：0-admin,1-部门总负责人,2-部门项目负责人,3-部门成员。//处理404问题，并且从login跳转任何404页面重置为Login页面。//如果存在免登录，如果登录过程存在路由不存在的问题则404，否则正常跳转。//刷新进入，判断是否过期了登录时间，Cookie中是否存在密码。// 第一个参数是应用程序中 store 的唯一 id。//pinia仓库可以最早出现的地方，路由初始化完毕。//不是404，登录状态在，正常跳转。
实战篇：（十四）从零开始：使用 Vite + Vue 3 + Element Plus 构建后台管理系统，掌握注册、登录与权限控制！
mmc123125的博客
10-17 763
在本篇文章中，我们将使用 Vite、Vue 3 和 Element Plus 创建一个简单的后台管理系统，具备用户注册和登录功能，并实现权限控制。通过这个示例，您将学习如何组织代码、管理用户状态以及控制用户权限。
vue3 + vite3 addRoute 实现权限管理系统
DZQ1223的博客
09-19 1151
在权限系统开发中，根据后端返回的菜单列表动态添加路由是非常常见的需求，它可以实现根据用户权限动态加载可访问的页面。本篇文章我们将重点介绍动态添加路由的全过程。
前端面试必问（后台管理系统的权限控制与管理）
热门推荐
我是小奶音啊的博客
09-05 2万+
此文章根据视频教程进行整理前端面试官必问系列-后台系统的权限控制与管理，建议搭配视频教程一起食用效果更佳 在Web 系统中，权限很久以来一直都只是后端程序所控制的． 为什么呢？ 因为Web 系统的不质围绕的是数据， 而和数据库最紧密接触的是后端程序． 所以在很长的一段时间内， 权限一直都只是后端程序要考虑的话题． 但是随看前后 端分离架构的流行， 越来越多的项目也在前端进权限控制 一、 权限相关概念 1.1 权限的分类 后端权限 从根不上讲前端仅仅只是视图层的展示， 权限的核心是在于服务器中的数据变，所以
vue3+pinia搭建
qq_36529240的博客
03-18 375
3.在src文件夹下新建stores文件夹（如图，可以用ts，这个项目我用js）modules文件夹新建文件比如user.js,代码。1.用vite搭建vue3脚手架 （略）4.在main.js添加stores。2.安装pinia(略)5.调用stores。
搭建vue3.2+vite+ts+pinia项目
小菜张的博客
11-24 4062
搭建vite+vue3.2+ts+pinia 项目
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+...
基于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 + Vite5 + Vue Router + Pinia + Element Plus 搭建的后台管理模版
04-03
总的来说，这套"Vue3 + Vite5 + Vue Router + Pinia + Element Plus 搭建的后台管理模版"提供了一个现代化的前端开发环境，结合高效的开发工具和强大的库，使得构建后台管理系统变得更加便捷和高效。无论是对于新手...
基于vite+vue3+pinia+element-plus+ts后台管理系统
04-08
【标题】"基于vite+vue3+pinia+element-plus+ts后台管理系统"是一个现代的前端开发框架，用于构建高效、可扩展的企业级后台管理界面。这个项目整合了多种前沿的技术，旨在提供一个功能全面、性能优异的解决方案，...
基于vue3全新后台管理方案vite4+vue3+pinia2+vue-i18n
quanzhan_King的博客
06-03 1225
基于构建后台管理系统。支持vue-i18n国际化多语言、动态路由鉴权、4种布局模板及tab页面缓存等功能。
vue3+vite+ts实现管理系统摸板
m0_53273062的博客
11-02 928
项目使用vite搭建基础框架，配置Router、store等，根据大多需求的情况下，实现系统的菜单权限，路由权限，登录鉴权，按钮权限等。同时封装了axios请求，router路由以及pinia状态管理等。目前登录没有完整，只是为了能够登录，后期使用需要做相应的修改。
vue3+ts+vite+element-plus+pinia项目搭建的【详细教程】
最新发布
weixin_43503406的博客
11-21 2565
帮助新手小白以及需要的人快速进行开发
vue3+elementplus+ts搭建权限管理系统--11
m0_37846059的博客
12-20 721
其中应用管理模块包含用户管理(User)、机构管理(Dept)、角色管理(Role)、资源管理(Resource)4个子功能模块，系统管理包含用户管理(User)、公告管理(Notice)两个子功能模块，审计日志包含操作日志(Operation)、访问日志(visit)两个子功能模块。本系统导航菜单配置的图标都是elementplus图标集内的图标，因此使用el-icon标签引入对应图标，由于图标的不固定，因此使用组件形式的图标时采用component动态组件，设置is属性对应图标组件名称。
Vue3权限控制全攻略：路由与组件层面的用户角色与权限管理方法深度解析
在这里，我乐于倾囊相授，分享我的技术心得、项目实战经验、技术技巧。希望能够惠及更多的开发者，助力大家在技术的海洋中扬帆远航。
03-09 9909
权限控制是一个很重要的概念，在 Web 应用程序中尤其重要。简单地说，权限控制就是将用户分为不同的分类，为每个分类分配相应的用户权限。这样，用户就只能访问他们所允许的内容了。权限控制可以提高应用程序的安全性和稳定性，使数据更加安全可靠。 在 Vue 中进行权限控制，通常有两种方式：第一种是在路由层面进行控制，第二种是在组件层面进行控制。
使用Vue3、TypeScript、Vite、Element Plus和Pinia来构建校园后台管理系统
nangongwenxuan的博客
07-05 942
校园后台管理系统是一个用于管理学校各项事务的应用程序。它提供了学校管理人员和教职员工管理学生、教师、课程、班级等信息的功能。本篇笔记将介绍如何使用Vue3、TypeScript、Vite、Element Plus和Pinia来构建校园后台管理系统。
1小时搞定Vue3+vite+Element UI或者Element Plus开发后台管理系统，使用vite构建管理项目，前后端分离包含mysql数据库，网站后台
编程小石头
04-29 5350
我们通常给小程序或者app开发后台时，不可避免的要用到可视化的数据管理后台，而vue和Element是我们目前比较主流的开发管理后台的主流搭配。所以今天石头哥就带大家来一起学习下vue3和Element plus的开发。
vue3 + vite + js + vue-router4 + pinia + elementPlus + echarts5 搭建后台管理系统
05-01
好的，下面是搭建后台管理系统的简单步骤： 1. 创建项目 使用 Vue CLI 创建项目，选择 vue3 preset，安装完成后进入项目目录。 ``` vue create my-project cd my-project ``` 2. 安装依赖包 安装 vite、vue-router 和 element-plus。 ``` npm install vite vue-router@4 element-plus --save ``` 安装 pinia 和 echarts。 ``` npm install pinia echarts@5 --save ``` 3. 配置 vite 在根目录下创建 `vite.config.js` 文件，配置 alias 和 server。 ```js import path from 'path' import { defineConfig } from 'vite' export default defineConfig({ resolve: { alias: { '@': path.resolve(__dirname, 'src'), }, }, server: { port: 3000, open: true, }, }) ``` 4. 配置路由 在 `src` 目录下创建 `router` 文件夹，并创建 `index.js` 文件，配置路由。 ```js import { createRouter, createWebHistory } from 'vue-router' import Home from '@/views/Home.vue' const routes = [ { path: '/', name: 'Home', component: Home, }, ] const router = createRouter({ history: createWebHistory(), routes, }) export default router ``` 在 `src` 目录下的 `main.js` 中引入路由。 ```js import { createApp } from 'vue' import App from './App.vue' import router from './router' const app = createApp(App) app.use(router) app.mount('#app') ``` 5. 配置状态管理 在 `src` 目录下创建 `store` 文件夹，并创建 `index.js` 文件，配置状态管理。 ```js import { createPinia } from 'pinia' const store = createPinia() export default store ``` 在 `src` 目录下的 `main.js` 中引入状态管理。 ```js import { createApp } from 'vue' import App from './App.vue' import router from './router' import store from './store' const app = createApp(App) app.use(router) app.use(store) app.mount('#app') ``` 6. 配置 UI 框架 在 `src` 目录下的 `main.js` 中引入 element-plus。 ```js import { createApp } from 'vue' import App from './App.vue' import router from './router' import store from './store' import ElementPlus from 'element-plus' import 'element-plus/lib/theme-chalk/index.css' const app = createApp(App) app.use(router) app.use(store) app.use(ElementPlus) app.mount('#app') ``` 7. 配置 echarts 在 `src` 目录下的 `main.js` 中引入 echarts。 ```js import { createApp } from 'vue' import App from './App.vue' import router from './router' import store from './store' import ElementPlus from 'element-plus' import 'element-plus/lib/theme-chalk/index.css' import * as echarts from 'echarts' const app = createApp(App) app.use(router) app.use(store) app.use(ElementPlus) app.config.globalProperties.$echarts = echarts app.mount('#app') ``` 8. 创建页面 在 `src` 目录下创建 `views` 文件夹，并创建页面组件。 9. 创建布局 在 `src` 目录下创建 `layouts` 文件夹，并创建布局组件。 10. 配置路由和布局 在 `router/index.js` 中配置路由和布局。 ```js import { createRouter, createWebHistory } from 'vue-router' import Layout from '@/layouts/Layout.vue' import Home from '@/views/Home.vue' const routes = [ { path: '/', component: Layout, children: [ { path: '', name: 'Home', component: Home, }, ], }, ] const router = createRouter({ history: createWebHistory(), routes, }) export default router ``` 11. 运行项目 在项目根目录下运行 `npm run dev`，打开浏览器访问 `http://localhost:3000` 查看效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值