cool-team-official / Cool Admin Vue
Licence: mit
cool-admin一个很酷的后台权限管理框架,模块化、插件化、CRUD极速开发,永久开源免费,基于midway.js 2.0、typeorm、mysql、jwt、element-ui、vuex、vue-router、vue等构建
Stars: ✭ 73
Projects that are alternatives of or similar to Cool Admin Vue
Vue Admin
基于Vue2、element ui、vue-cli、vuex、vue-router、axios 、echarts后台管理系统demo. 权限管理,用户管理,菜单管理。无限级菜单,下拉树形选择框
Stars: ✭ 1,135 (+1454.79%)
Mutual labels: vuex, vue-router, element-ui
Mall Admin Web
mall-admin-web是一个电商后台管理系统的前端项目,基于Vue+Element实现。 主要包括商品管理、订单管理、会员管理、促销管理、运营管理、内容管理、统计报表、财务管理、权限管理、设置等功能。
Stars: ✭ 9,123 (+12397.26%)
Mutual labels: vuex, vue-router, element-ui
Venture Management
一个包含vuejs和nodejs技术的全栈项目
Stars: ✭ 208 (+184.93%)
Mutual labels: vuex, vue-router, element-ui
Xz Admin
基于Vue、element-ui技术栈开发的前后端分离后台管理系统(持续维护中)
Stars: ✭ 62 (-15.07%)
Mutual labels: vuex, vue-router, element-ui
Vue Boilerplate Template
🍎 Efficient development of web SPA using Vue.js(2.*) + Webpack + Element-ui + Pwa + Vuex + Vuex-router + Vue-i18n + Dayjs + Lodash.
Stars: ✭ 461 (+531.51%)
Mutual labels: vuex, vue-router, element-ui
Vue Admin Template
a vue2.0 minimal admin template
Stars: ✭ 15,411 (+21010.96%)
Mutual labels: vuex, vue-router, element-ui
Vue Project
基于vue-cli构建的财务后台管理系统(vue2+vuex+axios+vue-router+element-ui+echarts+websocket+vue-i18n)
Stars: ✭ 301 (+312.33%)
Mutual labels: vuex, vue-router, element-ui
Vuejs Admin
基于eggjs、vuejs的设备管理系统,有帮助的话麻烦给个star谢谢
Stars: ✭ 350 (+379.45%)
Mutual labels: vuex, vue-router, element-ui
Dokit
基于 Spring Boot2、 Jpa、 Spring Security、JWT、redis、Vue的前后端分离的后台管理系统开发平台, 用户管理、菜单管理、角色管理、字典管理、权限控制的方式为RBAC,操作日志、异常日志、接口限流、项目支持数据权限管理,支持一键生成前后端代码(支持在线预览及打包下载),支持前端菜单动态路由 可一键部署服务器应用,数据库。系统中活跃用户状态监控,监视当前系统CPU、内存、磁盘、堆栈等相关信息,基于Element UI在线表单设计及生成Vue代码。
Stars: ✭ 348 (+376.71%)
Mutual labels: vuex, vue-router, element-ui
Vue2 Admin
基于vue-element-admin、Vue2 权限、监控、管理系统(包含地图等嵌套)
Stars: ✭ 74 (+1.37%)
Mutual labels: vuex, vue-router, element-ui
Vue2 Study
vue 的webpack配置,按需加载,element-ui,vuex
Stars: ✭ 16 (-78.08%)
Mutual labels: vuex, vue-router, element-ui
Vue Electron
vue-blog client,base on vue-electron,axios, vuex, vue-router.
Stars: ✭ 193 (+164.38%)
Mutual labels: vuex, vue-router, element-ui
Vue Blog
🎉 基于vue全家桶 + element-ui 构建的一个后台管理集成解决方案
Stars: ✭ 208 (+184.93%)
Mutual labels: vuex, vue-router, element-ui
Fantastic Admin
一款开箱即用的 Vue 中后台管理系统框架,基于ElementUI,兼容PC、移动端,vue-admin, vue-element-admin, vue后台
Stars: ✭ 153 (+109.59%)
Mutual labels: vuex, vue-router, element-ui
Vue Admin Design
基于vue + elementUI的管理系统模板
Stars: ✭ 279 (+282.19%)
Mutual labels: vuex, vue-router, element-ui
Vue2 Manage
基于 vue + element-ui 的后台管理系统
Stars: ✭ 11,345 (+15441.1%)
Mutual labels: vuex, vue-router, element-ui
Vue Store
基于Vue+Vue-Router+Vuex+Element-ui+axios,参考小米商城,实现的电商项目。
Stars: ✭ 308 (+321.92%)
Mutual labels: vuex, vue-router, element-ui
Blog.admin
✨ 基于vue 的管理后台,配合Blog.Core与Blog.Vue等多个项目使用
Stars: ✭ 500 (+584.93%)
Mutual labels: vuex, vue-router, element-ui
cool-admin 一个很酷的后台权限管理系统,开源免费,模块化、插件化、极速开发 CRUD,方便快速构建迭代后台管理系统, 到论坛 进一步了解
演示
- 账户:admin
- 密码:123456
项目后端
https://github.com/cool-team-official/cool-admin-midway
微信群
微信公众号
在线社区
使用条件
请确保您的操作系统上安装了 Node.js(> = 8.9.0)、@vue/cli (> 3.0.0)。
安装项目依赖
推荐使用 yarn
:
yarn
解决 node-sass
网络慢的方法:
yarn config set sass-binary-site http://npm.taobao.org/mirrors/node-sass
运行应用程序
安装过程完成后,运行以下命令启动服务。您可以在浏览器中预览网站 http://localhost:9000
yarn serve
极速 CRUD
-
vscode
编辑器下输入关键字cl-crud
,会生成对应的模板代码:
<template>
<cl-crud ref="crud" @load="onLoad">
<el-row type="flex" align="middle">
<!-- 刷新按钮 -->
<cl-refresh-btn />
<!-- 新增按钮 -->
<cl-add-btn />
<!-- 删除按钮 -->
<cl-multi-delete-btn />
<cl-flex1 />
<!-- 关键字搜索 -->
<cl-search-key />
</el-row>
<el-row>
<!-- 数据表格 -->
<cl-table v-bind="table"></cl-table>
</el-row>
<el-row type="flex">
<cl-flex1 />
<!-- 分页控件 -->
<cl-pagination />
</el-row>
<!-- 新增、编辑 -->
<cl-upsert ref="upsert" v-bind="upsert"></cl-upsert>
</cl-crud>
</template>
<script>
export default {
data() {
return {
// 新增、编辑配置
upsert: {
items: []
},
// 表格配置
table: {
columns: []
}
};
},
methods: {
onLoad({ ctx, app }) {
// crud 配置
ctx.service().done();
// 发送 page 接口请求
app.refresh();
}
}
};
</script>
- 编辑数据表格
cl-table
:
{
table: {
// 参数与 el-table-column 一致,并支持许多骚操作
columns: [
// 多选列
{
type: "selection",
width: 60
},
// 自定义列
{
label: "昵称",
prop: "name"
},
{
label: "账户",
prop: "price",
sortable: "custom" // 是否添加排序
},
{
label: "状态",
prop: "status",
// 字典匹配,使用 el-tag 展示
dict: [
{
label: "启用",
value: 1,
type: "primary"
},
{
label: "禁用",
value: 0,
type: "danger"
}
]
},
{
label: "创建时间",
prop: "createTime"
},
// 操作按钮列,默认包含:编辑、删除
{
type: "op"
}
];
}
}
- 编辑新增、编辑表单
cl-upsert
:
{
upsert: {
items: [
{
label: "昵称",
prop: "name",
// 参数与 el-form-item 一致
props: {},
value: "神仙都没用", // 昵称默认值
// 渲染参数,支持 slot, 组件实例,jsx
component: {
name: "el-input", // 可以是任意已注册的组件名
props: {}, // 组件的参数
on: {} // 组件的回调事件
},
// 验证规则,与 el-form 一致
rules: {
required: true,
message: "昵称不呢为空"
}
},
{
label: "存款",
prop: "price",
component: {
name: "el-input-number",
props: {
min: 0,
max: 10000
}
}
},
{
label: "状态",
prop: "status",
value: 1,
component: {
name: "el-radio-group",
options: [
{
label: "启用",
value: 1
},
{
label: "禁用",
value: 0
}
]
}
}
];
}
}
- 绑定
service
。在src/service/
下新建文件test.js
,并编辑:
// src/service/test.js
import { BaseService, Service, Permission } from "cl-admin";
// 请求接口的路径
@Service("test")
class Test extends BaseService {
// 继承 BaseService 后,拥有 page, list, add, delete, update, info 6个基本接口
// 自定义其他接口
@Permission("product") // 权限装饰器,可选
product(id) {
// this.request() 参数与 axios 一致
return this.request({
url: "/product",
method: "POST",
data: {
id
}
});
}
}
export default Test;
在 src/service/
下的文件,框架会自动根据 目录结构
和 文件名称
格式化成对应的 $service
对象。你现在可以这么使用它:
this.$service.test.page({ page: 1 });
this.$service.test.product(1);
service
编写好后,我们把它绑定在 crud
上:
export default {
methods: {
onLoad({ ctx, app }) {
// 绑定 service,这边指定到 test 即可
ctx.service(this.$service.test).done();
// 发起 page 请求
app.refresh({
// 请求默认参数
});
}
}
};
- 效果预览
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].