优秀的你，才能遇到优秀的世界，|优秀的你，才能遇到优秀的世界， Bag管理系统框架优秀的你，才能遇到优秀的世

文章图片

Bag快速开发管理系统、门户网站、博客系统框架，提供基础的框架，快速搭建企业产品，响应式开发，你可以将它应用在任何需要服务端管理的应用。如：开发管理系统的 API 接口、门户网站博客、企业内部的业务管理、ERP、CMS、APP 的后台等

技术选型

Bag管理系统采用Vue3、Vue-Router4、Vuex4、Ant-Design-Vue、Vite、TypeScript、Egg.js、Mysql构建
Bag门户博客前台采用Vue3、Vue-Router4、Vite 、Pinia、Element-plus、Equal-Vue、Bootstrap、Vite、TypeScript、Egg.js、Mysql构建，按需加载模块，内置丰富UI

安装

npm i vue-bag-admin --save

在线演示

管理员账户：用户名：admin ，密码：123456
超级管理员账户：用户名：superadmin ，密码：123456

文档地址、管理系统演示、门户博客前台演示
主要功能

用户管理：系统管理员分配用户角色和角色权限
角色管理：创建权限控制的主要对象，可以给角色分配不同api权限和菜单权限
菜单管理：实现用户动态菜单配置，实现不同角色不同菜单
富文本编辑器：MarkDown编辑器功能嵌入
快速表单：一键开发CURD，配置化条件搜索示例
快速API：基于Egg开发，增删改查API基本样列
接口设计：模型创建，关联查询，一键接入
权限指令：组件权限指令封装
网络配置：基础axios封装，请求重连、错误取消，动态配置
状态管理：丰富的Vuxe和Pinia任意选择
路由配置：嵌套路由，动态路由可动态配置，快速呈现
全局配置：站点基本配置背景图片、Login、Slogan等等
......

快速开发

管理系统、门户博客前台代码都是同一安装包、使用同一个服务

适用人群

正在以及想使用框架快速开发网站系统，有过前端开发经验 1 年+
【优秀的你，才能遇到优秀的世界，|优秀的你，才能遇到优秀的世界， Bag管理系统框架】熟悉 Vue.js 技术栈，使用它开发过几个实际项目，热爱技术，爱学习，想进阶和提升的同学

环境
Vite官方文档、Vite官方中文文档

Vite 需要 Node.js 版本 >= 12.2.0。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。

1、Vite创建项目

安装Vue程序的模板，下一代前端开发与构建工具

# npm 6.x npm create vite@latest my-vue-app --template vue# npm 7+, extra double-dash is needed: npm create vite@latest my-vue-app -- --template vue# yarn yarn create vite my-vue-app --template vue# pnpm pnpm create vite my-vue-app --template vue

2、Vue CLI创建项目

Vue CLI官方文档，Vue.js 开发的标准工具

npm install -g @vue/cli 然后就可以使用vue命名 vue create my-vue-app

安装依赖

cd my-vue-app npm install

安装cnpm ?> 如果安装过慢、使用cnpm安装

npm install -g cnpm --registry=https://registry.npm.taobao.org cd my-vue-app cnpm install

配置服务代理

vite安装的项目, 打开vite.config.js

defineConfig({ server: { host: '0.0.0.0', port: 8290, https: false, proxy: { '^/api': { target: 'http://127.0.0.1:8001', // 请看服务配置 changeOrigin: true, rewrite: (path: any) => path.replace(/^/api/, '') }, } } })

vue-cli安装的项目，打开vue.config.js

module.exports = { devServer: { host: '0.0.0.0', port: 8290, https: false, proxy: { '^/api': { target: 'http://127.0.0.1:8001', // 请看服务配置 changeOrigin: true, pathRewrite: { '^/api': '' } }, } } }

管理端

App.vue

main.js

import {createApp} from 'vue' import App from './App.vue' import install from 'vue-bag-admin' import 'vue-bag-admin/mock/admin' import 'vue-bag-admin/lib/style.min.css'createApp(App).use(install).mount('#app')

启动项目

npm run dev

web端

App.vue

main.js

import {createApp} from 'vue' import App from './App.vue' import install from 'vue-bag-admin/lib-web/index.es.js' import 'vue-bag-admin/mock/index' import 'vue-bag-admin/lib-web/style.min.css'createApp(App).use(install).mount('#app')

启动项目

npm run dev

后台服务

点击下载Eggjs程序

安装依赖

npm install

打开egg/config/config.default.js，配置自己的数据库

module.exports = appInfo => { const config = {} config.sequelize = { dialect: 'mysql', host: 'x.xx.xx.xx', port: 3306, username: 'xxxxxxx', // 数据库用户名 password: 'xxxxxxx', // 数据库密码 database: 'xxxxxxx', define: { // model的全局配置 timestamps: true, // 添加create,update,delete时间戳 paranoid: false, // 添加软删除 freezeTableName: true, // 防止修改表名为复数 underscored: false, // 防止驼峰式字段被默认转为下划线 }, } return config }

启动服务