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
文档地址、管理系统演示、门户博客前台演示
管理系统、门户博客前台代码都是同一安装包、使用同一个服务
正在以及想使用框架快速开发网站系统,有过前端开发经验 1 年+
熟悉 Vue.js 技术栈,使用它开发过几个实际项目,热爱技术,爱学习,想进阶和提升的同学
Vite官方文档、Vite官方中文文档
Vite 需要 Node.js 版本 >= 12.2.0。然而,有些模板需要依赖更高的 Node 版本才能正常运行,当你的包管理器发出警告时,请注意升级你的 Node 版本。
安装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
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
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
}
启动服务
npm run dev
vue-bag-admin
,是开源免费的,遵循MIT开源协议,意味着您无需支付任何费用,也无需授权,即可将它应用到您的产品中。