VUE-PAOBAI-ADMIN
简介
VUE-PAOBAI-ADMIN 是一个免费开源的中后台模版。
使用了最新的vue3,Arco Design UI,vite,TypeScript, pinia等主流技术开发，开箱即用的中后台前端解决方案，也可用于学习参考。
特性
- 最新技术栈：Vue 全家桶，基于
Vue3,Vite,Vue Router开发 - TypeScript: 应用程序级 JavaScript 的语言
- UI：UI库来自字节跳动开源的
Arco Design - Mock 数据： 内置 Mock 数据方案 搭配
mockjs,vite-plugin-mock插件食用 - 主题：可配置的
主题颜色, 支持暗色系统 - 布局：内置多种
布局方式，满足多方需求 - 权限： 内置完善的根据
API动态路由权限生成方案,权限支持控制精到button
预览
（路过的掘友给个star吧！呜呜呜~~~）
- PAOBAI-github-pages - github pages 站点
- PAOBAI-gitee-pages - gitee pages 站点
测试账号: paobai/paobai
亮色模式：
暗色模式：
自定义主题颜色：
多种布局方式：
更多功能控制面板， 等你调试哦！
项目前期准备
- node 和 git -项目开发环境
- Vite - 熟悉 vite 特性
- Vue3 - 熟悉 Vue 基础语法
- TypeScript - 熟悉
TypeScript基本语法 - Es6+ - 熟悉 es6 基本语法
- Vue-Router-Next - 熟悉 vue-router 基本使用
- Arco-Design-Vue - ui 基本使用
- Mock.js - mockjs 基本语法
安装使用
- 获取项目代码
git clone git@github.com:paobai/vue-paobai-admin.git
- 安装依赖
cd vue-paobai-admin
npm install
- 运行
npm run dev
- 打包
npm run build
项目地址
项目结构
├── .husky （husky自动lint相关配置）
├── build（build相关工具配置）
├── dist（构建文件目录）
├── index.html
├── LICENSE
├── mock（API mock 相关配置）
├── package.json
├── public
├── README.md
├── src
| ├── api
| ├── App.vue
| ├── assets
| ├── components
| ├── config （配置文件目录）
| ├── constant （常量文件目录）
| ├── directives （系统自定义指令文件目录）
| ├── enums （枚举文件目录）
| ├── hooks
| ├── init.ts
| ├── layout （系统layout）
| ├── main.ts （系统入口文件）
| ├── model （系统使用的结构）
| ├── plugins （插件）
| ├── router （router相关配置）
| ├── store （系统store pinia 相关配置）
| ├── styles （系统styles）
| ├── types
| ├── utils （工具类）
| └── views （系统页面）
├── tsconfig.json
├── vite.config.ts
├── .env （系统启动配置文件）
├── .env.development
├── .env.production
├── .eslintignore
├── .eslintrc.js （eslint 配置）
├── .gitignore
├── .npmrc
├── .prettierignore
├── .prettierrc.js（prettier 配置）
├── .stylelintignore
├── .stylelintrc.js （stylelintrc配置）
└── yarn.lock
如何贡献
项目目前还在开发优化阶段。非常欢迎你的加入！提一个 Issue 或者提交一个 Pull Request。
最后
如果掘友们感兴趣，我下期详细说一下项目结构和组成。路过的掘友给个star吧~~~~（卑微ing）
顺便可看看作者的其他好文哦。
作者的其他文章：
