乐趣区

关于vue3:优秀的你才能遇到优秀的世界-Bag管理系统框架

jiezi

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 年 +

相熟 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


<template>
    <router-view></router-view>
</template>
<script>

</script>
<style>

</style>

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


<template>
    <router-view></router-view>
</template>
<script>

</script>
<style>

</style>

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
}
启动服务 
npm run dev

版权信息

vue-bag-admin，是开源收费的，遵循 MIT 开源协定，意味着您无需领取任何费用，也无需受权，即可将它利用到您的产品中。

退出移动版