diff --git a/README.md b/README.md index a7bad8b1..2d1efa5e 100644 --- a/README.md +++ b/README.md @@ -1,54 +1,90 @@ -##vue-element-admin -vue+element+axios 的管理后台 [线上地址](http://panjiachen.github.io/vue-element-admin) +[线上地址](http://panjiachen.github.io/vue-element-admin) -这半年来一直在用vue写管理后台，目前后台已经有七十多个页面，十几种权限，但维护成本依然很低，效率依然很高。这半年来积累了不少的后台开发经验，所以准备开源分享一下。 +## 前言 +> 这半年来一直在用vue写管理后台，目前后台已经有七十多个页面，十几种权限，但维护成本依然很低，效率依然很高，所以准备开源分享一下后台开发的经验和成果。目前的技术栈主要的采用vue+element+axios.由于是个人项目，所以数据请求都是用了mockjs代替。会出一系列的教程配套文章，如如何从零构建后台项目框架，如何做完整的用户系统（如权限验证，二次登录等），如何二次开发组件（如富文本），如何整合七牛等等文章，各种后台开发经验等等。莫急~~ -### 功能 -- [x] 登录/注销 -- [x] 权限验证 -- [x] 侧边栏 -- [x] 面包屑 -- [x] 富文本编辑器 -- [x] Markdown编辑器 -- [x] JSON编辑器 -- [x] 列表拖拽 -- [x] SplitPane -- [x] Dropzone -- [x] Sticky -- [x] CountTo -- [x] echarts图表 -- [x] 401，401错误页面 -- [x] 错误日志 -- [x] 导出excel -- [x] table example -- [x] form example -- [x] 多环境发布 -- [x] dashboard -- [x] 二次登录 -- [x] 动态侧边栏 -- [x] mock +## 功能 +- 登录/注销 +- 权限验证 +- 侧边栏 +- 面包屑 +- 富文本编辑器 +- Markdown编辑器 +- JSON编辑器 +- 列表拖拽 +- plitPane +- Dropzone +- Sticky +- CountTo +- echarts图表 +- 401，401错误页面 +- 错误日志 +- 导出excel +- table example +- form example +- 多环境发布 +- dashboard +- 二次登录 +- 动态侧边栏 +- mock数据 -### 开发 +## 开发 ```bash # 克隆项目 - git clone https://github.com/PanJiaChen/vue-element-admin.git - + git clone https://github.com/PanJiaChen/vue-element-admin.git + # 安装依赖 npm install - - # 本地开发 开启服务，浏览器访问 http://localhost:9527 + + # 本地开发 开启服务 npm run build ``` -### 发布 +浏览器访问 http://localhost:9527 + +## 发布 ```bash # 发布测试环境 带webpack ananalyzer npm run build:sit-preview - + # 构建生成环境 npm run build:prod ``` +## 目录结构 +```shell +├── build // 构建相关   +├── config // 配置相关 +├── src // 源代码 +│   ├── api // 所以请求 +│   ├── assets // 主题 字体等静态资源 +│   ├── components // 全局公用组件 +│   ├── directive // 全局指令 +│   ├── filtres // 全局filter +│   ├── mock // mock数据 +│   ├── router // 路由 +│   ├── store // 全局store管理 +│   ├── styles // 全局样式 +│   ├── utils // 全局公用方法 +│   ├── view // view +│   ├── App.vue // 入口页面 +│   └── main.js // 入口 加载组件 初始化等 +├── static // 第三方不打包资源 +│   ├── jquery +│   └── Tinymce // 富文本 +├── .babelrc // babel-loader 配置 +├── eslintrc.js // eslint 配置项 +├── .gitignore // git 忽略项 +├── favicon.ico // favicon图标 +├── index.html // html模板 +└── package.json // package.json + +``` + +## 状态管理 +后台只有user和app配置相关状态使用vuex存在全局，其它数据都由每个业务页面自己管理。 + + ## 效果图 #### 两步验证登录 支持微信和qq diff --git a/src/assets/iconfont/iconfont.js b/src/assets/iconfont/iconfont.js index d397893d..fce13fd7 100644 --- a/src/assets/iconfont/iconfont.js +++ b/src/assets/iconfont/iconfont.js @@ -38,6 +38,12 @@ '' + '' + '' + + '' + + '' + + '' + + '' + + '' + + '' + '' + '' + '' + diff --git a/src/router/index.js b/src/router/index.js index 6c8e8540..1dbd7105 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -18,6 +18,9 @@ import authRedirect from '../views/login/authredirect'; import sendPWD from '../views/login/sendpwd'; import reset from '../views/login/reset'; +/* Introduction*/ +const Introduction = resolve => require(['../views/introduction/index'], resolve); + /* components*/ const componentsIndex = resolve => require(['../views/components/index'], resolve); const Tinymce = resolve => require(['../views/components/tinymce'], resolve); @@ -84,11 +87,19 @@ export default new Router({ redirect: '/dashboard', name: '首页', hidden: true, + children: [{ path: 'dashboard', component: dashboard }] + }, + { + path: '/introduction', + component: Layout, + redirect: '/introduction/index', + name: '简述', + icon: 'xinrenzhinan', + noDropdown: true, children: [ - { path: 'dashboard', component: dashboard } + { path: 'index', component: Introduction, name: '简述' } ] }, - { path: '/permission', component: Layout, diff --git a/src/views/introduction/index.vue b/src/views/introduction/index.vue new file mode 100644 index 00000000..0ff5456b --- /dev/null +++ b/src/views/introduction/index.vue @@ -0,0 +1,15 @@ + + diff --git a/src/views/theme/index.vue b/src/views/theme/index.vue index b5cf8c25..52cf7f4c 100644 --- a/src/views/theme/index.vue +++ b/src/views/theme/index.vue @@ -24,7 +24,7 @@
- + {{tag.name}}