基于 Vue3.0、Vite、ElementPlus、JavaScript 的后台解决方案,为项目提供开箱即用的解决方案。包括常用组件(列表/搜索/无缝滚动)
、函数
、动态菜单
、权限校验
、版本管理
等功能。
项目组件化程度较高,搭配 VSCode 定制插件 V3S Snippets,可以快速、便捷的搭建企业级中后台产品。同时,项目有复制粘贴用的 aExample 目录,常用业务功能即粘即用,也非常适合想入门 Vue3 的朋友作为案例代码学习(没用 TypeScript,上手难度低,新手友好)。
它有如下的特性:
- 🧸 支持任何中后台开发,开箱即用。
- 🎈 采用纯 JavaScript 编写,设计简洁美观。
- 📁 遵循直观的目录结构约定。
- 🗄️ 内置了现成的业务代码和 API 示例。
- 🐇 完全采用 setup 和 Composition API 开发。
- 💻 配合 VSCode 专属插件 V3S Snippets,实现团队指令级开发。
v3s 采用非常简单直观的项目目录结构
├──src
├──api # api目录
│ └── api.js
├──assets # 资源(图片、第三方js)目录
│ └── no-data.png
├──components # 公共组件目录
│ └── RhTable
├──enums # 枚举、示例数据目录
│ └── index.js
├──layout # 布局目录
│ └── index.vue
├──router # 路由目录
│ └── index.js
├──stores # pinia目录
│ └── aExample.js
├──styles # 样式目录
│ ├── iconfont # iconfont文件
│ └── common.scss # 全局样式文件
├──utils # 函数目录
│ ├── index.js # 函数入口
│ └── request.js # axios配置
└──views # 业务目录
└── aExample # 功能示例,即粘即用
Node 版本:20.10.0 或以上
# 拉取代码
git clone https://github.com/wangyupo/v3s.git
# 进入项目目录
cd v3s
# 安装依赖
npm install
# 运行项目
npm run dev
推荐使用 nvm 管理 node 版本(nvm 安装配置教程)
这里提供了一些更加详细的文档,及解决方案:
1、如何组织路由?路由如何对应用户权限?二级或更深级页面,如何使顶层菜单高亮?
4、如后端给我配置的服务是 https://xxx.com/admin
,我该如何配置开发或生产环境服务的公共基础路径(打包路径)?
你需要在根据不同环境修改 .env.development、.env.production 中的 VITE_BASE
,然后执行 npm run build
,重新打包,静态资源基础路径就都指向 https://xxx.com/admin
了。关于 vite.config.js 中 base 的更多解释,可以查阅 vite 官网文档。