Only when you are good can you meet a good world, Bag management system framework

Bag quickly develops the management system, portal website, blog system framework, provides a basic framework, quickly builds enterprise products, responsive development, and you can apply it to any application that requires server-side management. Such as: API interface of development management system, portal website blog, internal business management, ERP, CMS, APP background, etc.

Technology selection

Bag management system is built with Vue3, Vue-Router4, Vuex4, Ant-Design-Vue, Vite, TypeScript, Egg.js, Mysql

Bag portal blog front desk is built with Vue3, Vue-Router4, Vite, Pinia, Element-plus, Equal-Vue, Bootstrap, Vite, TypeScript, Egg.js, Mysql, loads modules on demand, and has built-in rich UI

Install

 npm i vue-bag-admin --save

online demo

Administrator account: username: admin, password: 123456

Super administrator account: username: superadmin, password: 123456

Document address , management system demo , portal blog front desk demo

The main function

• User management: system administrator assigns user roles and role permissions
• Role management: Create the main object of permission control, assign different api permissions and menu permissions to roles
• Menu management: realize the dynamic menu configuration of users, and realize different menus for different roles
• Rich Text Editor: MarkDown Editor Feature Embedding
• Quick Form: One-click development of CURD, configuration conditional search example
• Quick API: Based on Egg development, add, delete, modify and check the basic sample list of API
• Interface design: model creation, associated query, one-click access
• Permission instruction: component permission instruction encapsulation
• Network configuration: basic axios encapsulation, request reconnection, error cancellation, dynamic configuration
• State Management: Rich Vuxe and Pinia to choose from
• Routing configuration: nested routing, dynamic routing can be dynamically configured, fast rendering
• Global configuration: basic site configuration background image, Login, Slogan, etc.
• ......

rapid development

The management system and the front-end code of the portal blog are the same installation package and use the same service

For people

Are and want to use the framework to quickly develop website systems, have experience in front-end development for 1 year+

Familiar with the Vue.js technology stack, used it to develop several practical projects, love technology, love learning, and want to advance and improve

surroundings

Vite official documentation , Vite official Chinese documentation

Vite requires Node.js version >= 12.2.0. However, some templates require a higher Node version to function properly, so be careful to upgrade your Node version when your package manager warns you.

1. Vite creates a project

Templates for installing Vue programs, the next generation front-end development and build tools

 # 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 to create a project

Vue CLI official documentation , the standard tool for Vue.js development

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

Install dependencies

 cd my-vue-app
npm install

install cnpm

?> If the installation is too slow, use cnpm to install

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

Configure service proxy

The project installed by vite, open 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/, '')
            },
        }
    }
})

The project installed by vue-cli, open 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': ''
                }
            },
        }
    }
}

management side

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')

Startup project

 npm run dev

web side

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')

Startup project

 npm run dev

Background Services

Click to download Eggjs program

Install dependencies

 npm install

Open egg/config/config.default.js and configure your own database

 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
}

start the service

 npm run dev

Copyright Information

vue-bag-admin , is open source and free, and follows the MIT open source license, which means that you can apply it to your product without paying any fees and without authorization.