本项目是基于 Vue2.6,配合使用 bin-ui 作为组件库来进行搭建wcm后台管理系统,在基于vue-admin1.0
版本基础上进行二次重构,增加了登录的token验证和简单主题配置功能,目前暂时为2.0.0版本初稿,后续会进行持续更新。
功能概述
- 全局功能
- 动态侧边栏(支持多级路由嵌套)
- 动态面包屑
- 快捷导航(标签页)
- 阿里iconfont图标嵌入
- Easy-Mock数据
- 自适应收缩侧边栏
- 错误页面
- 401
- 403
- 404
- 500
- 組件
- 按钮组
- ECharts 图表
- Divider 分割线
- Drawer 抽屉
- 标题栏、文本栏
- SplitPane 分隔区块
- Tinymce 富文本封装
注:仅列举部分组件和功能
环境搭建
需要在本地安装 node 和 vue-cli3。本项目技术栈基于
ES6、
vue、
vuex、
vue-router、
axios、
bin-ui
学习相关内容在开发项目时将会很有帮助。
此外,为实现图表、加载进度,请求参数转换,数字累加等功能,本项目还安装依赖了一些辅助库, 如
echarts、
qs、
vue-count-to
good-storage、等。
所有的请求数据都使用Easy-Mock模拟
目录结构
整个项目的目录结构如下,具体包含内容后续会进行详细介绍和解释
├── docs // 文档目录
├── public // 公共资源,第三方,不打包资源
├── src // 源代码
│ ├── api // 所有请求相关资源
│ ├── assets // 静态资源,会打包的资源
│ ├── components // 全局公用组件
│ ├── config // 自定义配置参数
│ ├── layout // 全局布局和相关组件
│ ├── mock // mock server 数据
│ ├── plugin // 自定义插件,注入指令,全局mixin
│ ├── router // 路由
│ ├── store // 全局 store
│ ├── utils // 全局工具包
│ ├── views // views 所有页面
│ ├── App.vue // 入口页面
│ └── main.js // 入口文件 加载组件 初始化等
├── .eslintrc.js // eslint 配置项
├── .gitignore // git 忽略项
├── babel.config.js // babel 配置项
├── vue.config.js // vue-cli3集成配置项
└── package.json // package.json
安装
# 克隆项目
git clone https://github.com/wangbin3162/bin-admin.git
# 安装依赖
npm install
# 本地开发 启动项目
npm run serve
# OR vue ui 图形化界面启动
vue ui
实际工作中可直接克隆在此基础包中进行开发。
文档持续更新中…