beihang/docs/guide/index.md

入门

本项目是基于 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

实际工作中可直接克隆在此基础包中进行开发。

文档持续更新中...