搭建Vue3 Admin Plus 框架

2024-08-24 12:28

本文主要是介绍搭建Vue3 Admin Plus 框架,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

Vue3 Admin Plus 是一个基于 Vue 3 和 Vite 的后台管理模板,通常包含了 Element Plus 作为 UI 库,并且集成了常见的管理系统功能,如权限管理、菜单配置、国际化等。以下是如何从头搭建 Vue3 Admin Plus 项目的步骤。

目录

1. 克隆 Vue3 Admin Plus 项目模板

2. 安装依赖

3. 运行开发服务器

4. 项目结构概览

5. 项目功能配置

a. 路由配置

b. 权限管理

c. 国际化支持

d. Element Plus UI 库

6. 打包和部署

7. 环境变量配置

8. 项目扩展

9. 总结


1. 克隆 Vue3 Admin Plus 项目模板

首先,您可以通过以下方式从 GitHub 上克隆 Vue3 Admin Plus 项目模板:

git clone https://github.com/jzfai/vue3-admin-plus.git

进入项目目录:

cd vue3-admin-plus

2. 安装依赖

在项目目录下运行以下命令来安装依赖项:

npm install

或使用 Yarn:

yarn install

3. 运行开发服务器

安装完依赖后,运行开发服务器以启动项目:

npm run dev

或使用 Yarn:

yarn dev

这个命令将启动本地开发服务器,您可以通过 http://localhost:3000 访问。

4. 项目结构概览

项目的目录结构大致如下:

vue3-admin-plus/
├── public/                         # 公共静态资源
├── src/                            # 源代码目录
│   ├── api/                        # API 接口定义
│   ├── assets/                     # 静态资源
│   ├── components/                 # 公共组件
│   ├── layout/                     # 布局相关文件
│   ├── router/                     # 路由配置
│   ├── store/                      # 状态管理(Pinia 或 Vuex)
│   ├── views/                      # 页面组件
│   ├── App.vue                     # 根组件
│   ├── main.js                     # 入口文件
│   ├── permission.js               # 权限控制
│   └── settings.js                 # 项目设置
├── .env.development                # 开发环境变量
├── .env.production                 # 生产环境变量
├── vite.config.js                  # Vite 配置文件
├── package.json                    # 项目依赖配置文件
└── README.md                       # 项目说明文件

5. 项目功能配置

a. 路由配置

路由文件位于 src/router 目录下,包含了项目的路由配置。可以根据需要添加、修改或删除路由。

import { createRouter, createWebHistory } from 'vue-router'
import Layout from '@/layout/index.vue'const routes = [{path: '/',component: Layout,redirect: '/dashboard',children: [{path: 'dashboard',name: 'Dashboard',component: () => import('@/views/dashboard/index.vue'),meta: { title: 'Dashboard', icon: 'dashboard' }}]},// 其他路由配置...
]const router = createRouter({history: createWebHistory(),routes
})export default router
b. 权限管理

权限管理的核心是通过 src/permission.js 文件来控制访问。通过在路由的 meta 属性中定义 roles 来指定哪些角色可以访问特定路由。

import router from './router'
import store from './store'
import { ElMessage } from 'element-plus'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'router.beforeEach(async (to, from, next) => {const hasToken = store.getters.tokenif (hasToken) {if (to.path === '/login') {next({ path: '/' })} else {const hasRoles = store.getters.roles && store.getters.roles.length > 0if (hasRoles) {next()} else {try {const { roles } = await store.dispatch('user/getInfo')const accessRoutes = await store.dispatch('permission/generateRoutes', roles)router.addRoutes(accessRoutes)next({ ...to, replace: true })} catch (error) {await store.dispatch('user/resetToken')ElMessage.error(error || 'Has Error')next(`/login?redirect=${to.path}`)}}}} else {if (['/login', '/auth-redirect'].indexOf(to.path) !== -1) {next()} else {next(`/login?redirect=${to.path}`)}}
})
c. 国际化支持

项目通常集成了国际化插件,可以通过 src/locales 目录进行多语言配置。你可以根据需求添加新的语言包。

import { createI18n } from 'vue-i18n'
import en from './en'
import zh from './zh'const messages = {en,zh
}const i18n = createI18n({locale: 'en',messages
})export default i18n

main.js 中注册:

import { createApp } from 'vue'
import i18n from './locales'
import App from './App.vue'const app = createApp(App)
app.use(i18n)
app.mount('#app')
d. Element Plus UI 库

Vue3 Admin Plus 使用 Element Plus 作为 UI 组件库,通常在 main.js 中进行全局引入:

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'const app = createApp(App)
app.use(ElementPlus)

6. 打包和部署

开发完成后,可以通过以下命令来打包项目:

npm run build

或使用 Yarn:

yarn build

打包后会生成 dist 文件夹,其中包含了所有的静态资源文件。将这些文件上传到服务器即可部署。

7. 环境变量配置

项目使用 .env 文件进行环境变量配置。你可以在 env.developmentenv.production 中添加或修改环境变量。

# .env.development
VITE_APP_BASE_API = '/dev-api'# .env.production
VITE_APP_BASE_API = '/prod-api'

在代码中使用 import.meta.env.VITE_APP_BASE_API 访问这些变量。

8. 项目扩展

你可以根据业务需求进一步扩展项目,例如:

  • 集成更多第三方库:如图表库 (ECharts)、富文本编辑器 (Quill) 等。
  • 优化权限管理:根据实际需要完善权限验证机制。
  • 添加更多国际化支持:根据用户需求增加新的语言包。

9. 总结

Vue3 Admin Plus 提供了一个现代化的 Vue 3 后台管理模板,具备完善的功能和优秀的性能。通过上述步骤,您可以快速搭建并部署一个功能强大的后台管理系统。如果需要更多定制化功能,您可以进一步扩展和配置该框架。

这篇关于搭建Vue3 Admin Plus 框架的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1102477

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

【C++ Primer Plus习题】13.4

大家好,这里是国中之林! ❥前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站。有兴趣的可以点点进去看看← 问题: 解答: main.cpp #include <iostream>#include "port.h"int main() {Port p1;Port p2("Abc", "Bcc", 30);std::cout <<

搭建Kafka+zookeeper集群调度

前言 硬件环境 172.18.0.5        kafkazk1        Kafka+zookeeper                Kafka Broker集群 172.18.0.6        kafkazk2        Kafka+zookeeper                Kafka Broker集群 172.18.0.7        kafkazk3

【IPV6从入门到起飞】5-1 IPV6+Home Assistant(搭建基本环境)

【IPV6从入门到起飞】5-1 IPV6+Home Assistant #搭建基本环境 1 背景2 docker下载 hass3 创建容器4 浏览器访问 hass5 手机APP远程访问hass6 更多玩法 1 背景 既然电脑可以IPV6入站,手机流量可以访问IPV6网络的服务,为什么不在电脑搭建Home Assistant(hass),来控制你的设备呢?@智能家居 @万物互联

BUUCTF靶场[web][极客大挑战 2019]Http、[HCTF 2018]admin

目录   [web][极客大挑战 2019]Http 考点:Referer协议、UA协议、X-Forwarded-For协议 [web][HCTF 2018]admin 考点:弱密码字典爆破 四种方法:   [web][极客大挑战 2019]Http 考点:Referer协议、UA协议、X-Forwarded-For协议 访问环境 老规矩,我们先查看源代码

计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

🍊作者:计算机编程-吉哥 🍊简介:专业从事JavaWeb程序开发,微信小程序开发,定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事,生活就是快乐的。 🍊心愿:点赞 👍 收藏 ⭐评论 📝 🍅 文末获取源码联系 👇🏻 精彩专栏推荐订阅 👇🏻 不然下次找不到哟~Java毕业设计项目~热门选题推荐《1000套》 目录 1.技术选型 2.开发工具 3.功能

cross-plateform 跨平台应用程序-03-如果只选择一个框架,应该选择哪一个?

跨平台系列 cross-plateform 跨平台应用程序-01-概览 cross-plateform 跨平台应用程序-02-有哪些主流技术栈? cross-plateform 跨平台应用程序-03-如果只选择一个框架,应该选择哪一个? cross-plateform 跨平台应用程序-04-React Native 介绍 cross-plateform 跨平台应用程序-05-Flutte