Merge pull request lin-xin#199 from lin-xin/dev

更新旧代码和依赖

Author: lin-xin

README.md

@@ -1,4 +1,5 @@
-# vue-manage-system #
+# vue-manage-system
+
 <a href="https://github.com/vuejs/vue">
     <img src="https://img.shields.io/badge/vue-2.6.10-brightgreen.svg" alt="vue">
   </a>
@@ -15,56 +16,61 @@
     <img src="https://img.shields.io/badge/%24-donate-ff69b4.svg" alt="donate">
   </a>
 
-基于Vue.js + Element UI 的后台管理系统解决方案。[线上地址](http://blog.gdfengshuo.com/example/work/)
+基于 Vue.js + Element UI 的后台管理系统解决方案。[线上地址](http://blog.gdfengshuo.com/example/work/)
 
-本项目基于vue-cli3构建，如果是vue-cli2的请下载[旧版本V3.2.0](https://github.com/lin-xin/vue-manage-system/releases/tag/V3.2.0)
+本项目基于 vue-cli3 构建，如果是 vue-cli2 的请下载[旧版本 V3.2.0](https://github.com/lin-xin/vue-manage-system/releases/tag/V3.2.0)
 
 > React + Ant Design 的版本正在开发中，仓库地址：[react-manage-system](https://github.com/lin-xin/react-manage-system)
 
 [English document](https://github.com/lin-xin/manage-system/blob/master/README_EN.md)
 
-## 项目截图 ##
+## 项目截图
+
 ### 登录
+
 ![Image text](https://github.com/lin-xin/manage-system/raw/master/screenshots/wms3.png)
 
-### 默认皮肤 ###
+### 默认皮肤
+
 ![Image text](https://github.com/lin-xin/manage-system/raw/master/screenshots/wms1.png)
 
-### 浅绿色皮肤 ###
+### 浅绿色皮肤
+
 ![Image text](https://github.com/lin-xin/manage-system/raw/master/screenshots/wms2.png)
 
 ## 赞赏
+
 请作者喝杯咖啡吧！(微信号：linxin_20)
 
 ![微信扫一扫](http://blog.gdfengshuo.com/images/weixin.jpg)
 
-## 前言 ##
-之前在公司用了Vue + Element组件库做了个后台管理系统，基本很多组件可以直接引用组件库的，但是也有一些需求无法满足。像图片裁剪上传、富文本编辑器、图表等这些在后台管理系统中很常见的功能，就需要引用其他的组件才能完成。从寻找组件，到使用组件的过程中，遇到了很多问题，也积累了宝贵的经验。所以我就把开发这个后台管理系统的经验，总结成这个后台管理系统解决方案。
-
-该方案作为一套多功能的后台框架模板，适用于绝大部分的后台管理系统（Web Management System）开发。基于vue.js,使用[email protected]脚手架快速生成项目目录，引用Element UI组件库，方便开发快速简洁好看的组件。分离颜色样式，支持手动切换主题色，而且很方便使用自定义主题色。
-（已经升级到 [email protected]，请更新依赖）
-
-## 功能 ##
-- [x] Element UI
-- [x] 登录/注销
-- [x] Dashboard
-- [x] 表格
-- [x] Tab选项卡
-- [x] 表单
-- [x] 图表 :bar_chart:
-- [x] 富文本编辑器
-- [x] markdown编辑器
-- [x] 图片拖拽/裁剪上传
-- [x] 支持切换主题色 :sparkles:
-- [x] 列表拖拽排序
-- [x] 权限测试
-- [x] 404 / 403
-- [x] 三级菜单
-- [x] 自定义图标
-- [x] 可拖拽弹窗
-- [x] 国际化
-
-## 安装步骤 ##
+## 前言
+
+该方案作为一套多功能的后台框架模板，适用于绝大部分的后台管理系统（Web Management System）开发。基于 vue.js，使用 vue-cli3 脚手架，引用 Element UI 组件库，方便开发快速简洁好看的组件。分离颜色样式，支持手动切换主题色，而且很方便使用自定义主题色。
+
+## 功能
+
+-   [x] Element UI
+-   [x] 登录/注销
+-   [x] Dashboard
+-   [x] 表格
+-   [x] Tab 选项卡
+-   [x] 表单
+-   [x] 图表 :bar_chart:
+-   [x] 富文本编辑器
+-   [x] markdown 编辑器
+-   [x] 图片拖拽/裁剪上传
+-   [x] 支持切换主题色 :sparkles:
+-   [x] 列表拖拽排序
+-   [x] 权限测试
+-   [x] 404 / 403
+-   [x] 三级菜单
+-   [x] 自定义图标
+-   [x] 可拖拽弹窗
+-   [x] 国际化
+
+## 安装步骤
+
 ```
 git clone https://github.com/lin-xin/vue-manage-system.git      // 把模板下载到本地
 cd vue-manage-system    // 进入模板目录
@@ -76,57 +82,57 @@ npm run serve
 // 执行构建命令，生成的dist文件夹放在服务器下即可访问
 npm run build
 ```
-## 组件使用说明与演示 ##
 
-### vue-schart ###
-vue.js封装sChart.js的图表组件。访问地址：[vue-schart](https://github.com/linxin/vue-schart)
+## 组件使用说明与演示
+
+### vue-schart
+
+vue.js 封装 sChart.js 的图表组件。访问地址：[vue-schart](https://github.com/linxin/vue-schart)
+
 <p><a href="https://www.npmjs.com/package/vue-schart"><img src="https://img.shields.io/npm/dm/vue-schart.svg" alt="Downloads"></a></p>
 
 ```html
 <template>
     <div>
-        <schart  class="wrapper"
-				:canvasId="canvasId"
-				:type="type"
-				:data="data"
-				:options="options"
-		></schart>
+        <schart class="wrapper" :canvasId="canvasId" :type="type" :data="data" :options="options"></schart>
     </div>
 </template>
-	
+
 <script>
-    import Schart from 'vue-schart';        // 导入Schart组件
+    import Schart from 'vue-schart'; // 导入Schart组件
     export default {
-        data: function(){
+        data: function() {
             return {
-                canvasId: 'myCanvas',       // canvas的id
-                type: 'bar',                // 图表类型
+                canvasId: 'myCanvas', // canvas的id
+                type: 'bar', // 图表类型
                 data: [
-                    {name: '2014', value: 1342},
-                    {name: '2015', value: 2123},
-                    {name: '2016', value: 1654},
-                    {name: '2017', value: 1795},
+                    { name: '2014', value: 1342 },
+                    { name: '2015', value: 2123 },
+                    { name: '2016', value: 1654 },
+                    { name: '2017', value: 1795 }
                 ],
-                options: {                  // 图表可选参数
+                options: {
+                    // 图表可选参数
                     title: 'Total sales of stores in recent years'
                 }
-            }
+            };
         },
         components: {
             Schart
         }
-    }
+    };
 </script>
 <style>
-.wrapper{
-	width: 7rem;
-	height: 5rem;
-}
+    .wrapper {
+        width: 7rem;
+        height: 5rem;
+    }
 </style>
 ```
 
-## 其他注意事项 ##
-### 一、如果我不想用到上面的某些组件呢，那我怎么在模板中删除掉不影响到其他功能呢？ ###
+## 其他注意事项
+
+### 一、如果我不想用到上面的某些组件呢，那我怎么在模板中删除掉不影响到其他功能呢？
 
 举个栗子，我不想用 Vue-Quill-Editor 这个组件，那我需要分四步走。
 
@@ -136,14 +142,14 @@ vue.js封装sChart.js的图表组件。访问地址：[vue-schart](https://githu
 {
     // 富文本编辑器组件
     path: '/editor',
-    component: resolve => require(['../components/page/VueEditor.vue'], resolve) 
+    component: resolve => require(['../components/page/VueEditor.vue'], resolve)
 },
 ```
 
 第二步：删除引入该组件的文件。在目录 src/components/page/ 删除 VueEditor.vue 文件。
 
 第三步：删除该页面的入口。在目录 src/components/common/Sidebar.vue 中，找到该入口，删除下面这段代码。
-	
+
 ```js
 {
 	index: 'editor',
@@ -152,30 +158,29 @@ vue.js封装sChart.js的图表组件。访问地址：[vue-schart](https://githu
 ```
 
 第四步：卸载该组件。执行以下命令：
-	
-	npm un vue-quill-editor -S
+npm un vue-quill-editor -S
 
 完成。
 
-### 二、如何切换主题色呢？ ###
+### 二、如何切换主题色呢？
 
 第一步：打开 src/main.js 文件，找到引入 element 样式的地方，换成浅绿色主题。
 
 ```javascript
-import 'element-ui/lib/theme-default/index.css';    // 默认主题
-// import '../static/css/theme-green/index.css';       // 浅绿色主题
+import 'element-ui/lib/theme-default/index.css'; // 默认主题
+// import './assets/css/theme-green/index.css';       // 浅绿色主题
 ```
 
 第二步：打开 src/App.vue 文件，找到 style 标签引入样式的地方，切换成浅绿色主题。
 
 ```javascript
-@import "../static/css/main.css";
-@import "../static/css/color-dark.css";     /*深色主题*/
-/*@import "../static/css/theme-green/color-green.css";   !*浅绿色主题*!*/
+@import "./assets/css/main.css";
+@import "./assets/css/color-dark.css";     /*深色主题*/
+/*@import "./assets/css/theme-green/color-green.css";   !*浅绿色主题*!*/
 ```
 
 第三步：打开 src/components/common/Sidebar.vue 文件，找到 el-menu 标签，把 background-color/text-color/active-text-color 属性去掉即可。
 
 ## License
 
-[MIT](https://github.com/lin-xin/vue-manage-system/blob/master/LICENSE)
+[MIT](https://github.com/lin-xin/vue-manage-system/blob/master/LICENSE)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-manage-system",
-  "version": "4.0.1",
+  "version": "4.1.0",
   "private": true,
   "scripts": {
     "dev": "npm run serve",
@@ -16,13 +16,13 @@
     "vue-cropperjs": "^3.0.0",
     "vue-i18n": "^8.10.0",
     "vue-quill-editor": "^3.0.6",
-    "vue-router": "^3.0.1",
+    "vue-router": "^3.0.3",
     "vue-schart": "^1.0.0",
     "vuedraggable": "^2.17.0"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^3.2.0",
-    "@vue/cli-service": "^3.2.0",
-    "vue-template-compiler": "^2.5.21"
+    "@vue/cli-plugin-babel": "^3.9.0",
+    "@vue/cli-service": "^3.9.0",
+    "vue-template-compiler": "^2.6.10"
   }
 }