Skip to content
/ v3s Public

基于 Vue3、Vite5、Vue Router、Pinia 和 Element Plus 构建的高效后台管理模板。结合 VSCode 插件 v3s snippets,助力快速开发业务应用。

License

Notifications You must be signed in to change notification settings

wangyupo/v3s

Repository files navigation


Logo

V3S后台管理模版

Vue3+Pinia搭建的通用后台管理模版,助力你快速进入业务开发。
Less is more 😶

· 报告 Bug · 建议需求

项目介绍

基于 Vue3.0ViteElementPlusJavaScript 的后台解决方案,为项目提供开箱即用的解决方案。包括常用组件(列表/搜索/无缝滚动)函数动态菜单权限校验版本管理等功能。

项目组件化程度较高,搭配 VSCode 定制插件 V3S Snippets,可以快速、便捷的搭建企业级中后台产品。同时,项目有复制粘贴用的 aExample 目录,常用业务功能即粘即用,也非常适合想入门 Vue3 的朋友作为案例代码学习(没用 TypeScript,上手难度低,新手友好)。

v3s 特性

它有如下的特性:

  • 🧸 支持任何中后台开发,开箱即用。
  • 🎈 采用纯 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、如何组织路由?路由如何对应用户权限?二级或更深级页面,如何使顶层菜单高亮?

2、我想用 iconfont,应该怎么更新?在哪里更新?

3、我如何注册一个全局组件?

4、如后端给我配置的服务是 https://xxx.com/admin ,我该如何配置开发或生产环境服务的公共基础路径(打包路径)?

你需要在根据不同环境修改 .env.development、.env.production 中的 VITE_BASE,然后执行 npm run build,重新打包,静态资源基础路径就都指向 https://xxx.com/admin 了。关于 vite.config.js 中 base 的更多解释,可以查阅 vite 官网文档

License

MIT © Richard McRichface.

About

基于 Vue3、Vite5、Vue Router、Pinia 和 Element Plus 构建的高效后台管理模板。结合 VSCode 插件 v3s snippets,助力快速开发业务应用。

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published