refine

Author: PanJiaChen

README.md

@@ -1,54 +1,90 @@
-##vue-element-admin
-vue+element+axios 的管理后台 [线上地址](http://panjiachen.github.io/vue-element-admin)
-
-这半年来一直在用vue写管理后台，目前后台已经有七十多个页面，十几种权限，但维护成本依然很低，效率依然很高。这半年来积累了不少的后台开发经验，所以准备开源分享一下。
-
-### 功能
-- [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
-
-
-### 开发
+[线上地址](http://panjiachen.github.io/vue-element-admin)
+
+## 前言
+> 这半年来一直在用vue写管理后台，目前后台已经有七十多个页面，十几种权限，但维护成本依然很低，效率依然很高，所以准备开源分享一下后台开发的经验和成果。目前的技术栈主要的采用vue+element+axios.由于是个人项目，所以数据请求都是用了mockjs代替。会出一系列的教程配套文章，如如何从零构建后台项目框架，如何做完整的用户系统（如权限验证，二次登录等），如何二次开发组件（如富文本），如何整合七牛等等文章，各种后台开发经验等等。莫急~~
+
+## 功能
+- 登录/注销
+- 权限验证
+- 侧边栏
+- 面包屑
+- 富文本编辑器
+- 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

src/assets/iconfont/iconfont.js

@@ -38,6 +38,12 @@
     '' +
     '</symbol>' +
     '' +
+    '<symbol id="icon-xinrenzhinan" viewBox="0 0 1024 1024">' +
+    '' +
+    '<path d="M780.108 761.059c54.451 60.351 87.706 138.983 87.706 225.358 0 12.015-0.659 23.882-1.902 35.581l-71.955 0c1.589-11.675 2.695-23.493 2.695-35.581 0-71.578-29.094-136.386-76.189-185.002C658.778 836.02 587.76 855.95 512 855.95c-75.689 0-146.65-19.888-208.294-54.432-47.129 48.604-76.358 113.305-76.358 184.9 0 12.088 1.105 23.906 2.695 35.581l-71.955 0c-1.243-11.699-1.902-23.567-1.902-35.581 0-86.366 33.19-165.055 87.587-225.446-96.765-78.277-158.75-197.84-158.75-331.998C85.023 193.163 276.188 2.001 512 2.001s426.977 191.162 426.977 426.972C938.977 563.184 876.94 682.785 780.108 761.059zM512 295.787c-196.511 0-355.814-80.302-355.814 122.251 0 202.551 159.303 366.749 355.814 366.749s355.814-164.199 355.814-366.749C867.814 215.485 708.511 295.787 512 295.787zM678.047 500.136c-26.2 0-47.442-21.24-47.442-47.442 0-26.197 21.242-47.442 47.442-47.442 26.202 0 47.442 21.244 47.442 47.442C725.488 478.896 704.249 500.136 678.047 500.136zM654.326 630.601c0 32.754-63.722 59.302-142.326 59.302s-142.326-26.549-142.326-59.302c0-8.445 4.376-16.446 12.017-23.719 21.98 20.927 71.979 35.579 130.309 35.579s108.329-14.652 130.309-35.579C649.949 614.155 654.326 622.156 654.326 630.601zM345.953 500.136c-26.202 0-47.442-21.24-47.442-47.442 0-26.197 21.24-47.442 47.442-47.442 26.2 0 47.442 21.244 47.442 47.442C393.395 478.896 372.153 500.136 345.953 500.136z"  ></path>' +
+    '' +
+    '</symbol>' +
+    '' +
     '<symbol id="icon-theme" viewBox="0 0 1024 1024">' +
     '' +
     '<path d="M788.00002 159.831491C756.00002 128 746 128 724.3801 128L642 128C642 128 576 188.923077 512 188.923077 448 188.923077 384 128 384 128L299.204802 128C276.629934 128 266 140.923077 245.847214 159.831491L81.582979 323.871735C70.243732 335.19552 52 371.692308 81.582979 408.655004 81.582979 408.655004 224.023667 540.29784 238.000003 541.53846L238.000003 835.076924C238.000003 868.452352 286.579 896 320 896L706 896C739.419808 896 788.00002 868.452352 788.00002 835.076924L788.00002 541.53846C802.145492 540.385864 942.448564 408.654992 942.448564 408.654992 974.00002 372 965.851264 334.883878 942.448584 311.513109L788.00002 159.831491Z"  ></path>' +

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,

src/views/introduction/index.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="app-container">
+    <div class="wrapper">
+    <code>
+      这半年来一直在用vue写管理后台，目前后台已经有七十多个页面，十几种权限，但维护成本依然很低，效率依然很高，所以准备开源分享一下后台开发的经验和成果。目前的技术栈主要的采用vue+element+axios.由于是个人项目，所以数据请求都是用了mockjs代替。会出一系列的教程配套文章，如如何从零构建后台项目框架，如何做完整的用户系统（如权限验证，二次登录等），如何二次开发组件（如富文本），如何整合七牛等等文章，各种后台开发经验等等。莫急~~
+    </code>
+    </div>
+  </div>
+</template>
+<style scoped>
+  .wrapper{
+      width: 800px;
+      margin: 30px auto;
+  }
+</style>

src/views/theme/index.vue

@@ -24,7 +24,7 @@
     </div>
 
     <div class="block">
-      <el-tag class='tag-item' v-for="tag in tags" :type="tag.type">
+      <el-tag class='tag-item' v-for="tag in tags" :type="tag.type" :key='tag.type'>
         {{tag.name}}
       </el-tag>
     </div>