feature:升级到vue3和element-plus

lin-xin · Mar 15, 2021 · 96be359 · 96be359
1 parent 0f641c0
commit 96be359
Show file tree

Hide file tree

Showing 50 changed files with 2,507 additions and 2,904 deletions.
diff --git a/.browserslistrc b/.browserslistrc
diff --git a/.gitignore b/.gitignore
@@ -1,8 +1,8 @@
 .DS_Store
 node_modules
 /dist
-example.html
-favicon.ico
+
+
 # local env files
 .env.local
 .env.*.local
@@ -11,6 +11,7 @@ favicon.ico
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+pnpm-debug.log*
 
 # Editor directories and files
 .idea
@@ -19,4 +20,4 @@ yarn-error.log*
 *.ntvs*
 *.njsproj
 *.sln
-*.sw*
+*.sw?
diff --git a/.prettierrc b/.prettierrc
diff --git a/README.md b/README.md
@@ -16,7 +16,8 @@
     <img src="https://img.shields.io/badge/%24-donate-ff69b4.svg" alt="donate">
   </a>
 
-基于 Vue + Element UI 的后台管理系统解决方案。[线上地址](https://lin-xin.gitee.io/example/work/)
+基于 Vue3 + Element Plus 的后台管理系统解决方案。[线上地址](https://lin-xin.gitee.io/example/work/)
+Vue2 版本请看 [tag-V4.2.0](https://github.com/lin-xin/vue-manage-system/tree/V4.2.0)
 
 > React + Ant Design 的版本正在开发中，仓库地址：[react-manage-system](https://github.com/lin-xin/react-manage-system)
 
@@ -28,47 +29,39 @@
 
 ![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)
 
 ![微信扫一扫](https://lin-xin.gitee.io/images/weixin.jpg)
 
-## 特别鸣谢
-
-- [实验楼](https://www.shiyanlou.com?source=vue-manage-system)
-
 ## 前言
 
-该方案作为一套多功能的后台框架模板，适用于绝大部分的后台管理系统（Web Management System）开发。基于 vue.js，使用 vue-cli3 脚手架，引用 Element UI 组件库，方便开发快速简洁好看的组件。分离颜色样式，支持手动切换主题色，而且很方便使用自定义主题色。
+该方案作为一套多功能的后台框架模板，适用于绝大部分的后台管理系统（Web Management System）开发。基于 Vue3，使用 vue-cli3 脚手架，引用 Element Plus 组件库，方便开发快速简洁好看的组件。分离颜色样式，支持手动切换主题色，而且很方便使用自定义主题色。
 
 ## 功能
 
--   [x] Element UI
+-   [x] Element Plus
 -   [x] 登录/注销
 -   [x] Dashboard
 -   [x] 表格
 -   [x] Tab 选项卡
 -   [x] 表单
 -   [x] 图表 :bar_chart:
--   [x] 富文本编辑器
--   [x] markdown 编辑器
+-   [ ] 富文本编辑器
+-   [ ] markdown 编辑器
 -   [x] 图片拖拽/裁剪上传
--   [x] 支持切换主题色 :sparkles:
--   [x] 列表拖拽排序
+-   [ ] 支持切换主题色 :sparkles:
+-   [ ] 列表拖拽排序
 -   [x] 权限测试
 -   [x] 404 / 403
 -   [x] 三级菜单
 -   [x] 自定义图标
--   [x] 可拖拽弹窗
+-   [ ] 可拖拽弹窗
 -   [x] 国际化
 
 ## 安装步骤
@@ -101,36 +94,36 @@ vue.js 封装 sChart.js 的图表组件。访问地址：[vue-schart](https://gi
 </template>
 
 <script>
-    import Schart from 'vue-schart'; // 导入Schart组件
+    import Schart from "vue-schart"; // 导入Schart组件
     export default {
         data() {
             return {
                 options: {
-                    type: 'bar',
+                    type: "bar",
                     title: {
-                        text: '最近一周各品类销售图'
+                        text: "最近一周各品类销售图",
                     },
-                    labels: ['周一', '周二', '周三', '周四', '周五'],
+                    labels: ["周一", "周二", "周三", "周四", "周五"],
                     datasets: [
                         {
-                            label: '家电',
-                            data: [234, 278, 270, 190, 230]
+                            label: "家电",
+                            data: [234, 278, 270, 190, 230],
                         },
                         {
-                            label: '百货',
-                            data: [164, 178, 190, 135, 160]
+                            label: "百货",
+                            data: [164, 178, 190, 135, 160],
                         },
                         {
-                            label: '食品',
-                            data: [144, 198, 150, 235, 120]
-                        }
-                    ]
-                }
+                            label: "食品",
+                            data: [144, 198, 150, 235, 120],
+                        },
+                    ],
+                },
             };
         },
         components: {
-            Schart
-        }
+            Schart,
+        },
     };
 </script>
 <style>
@@ -141,57 +134,6 @@ vue.js 封装 sChart.js 的图表组件。访问地址：[vue-schart](https://gi
 </style>
 ```
 
-## 其他注意事项
-
-### 一、如果我不想用到上面的某些组件呢，那我怎么在模板中删除掉不影响到其他功能呢？
-
-举个栗子，我不想用 Vue-Quill-Editor 这个组件，那我需要分四步走。
-
-第一步：删除该组件的路由，在目录 src/router/index.js 中，找到引入改组件的路由，删除下面这段代码。
-
-```JavaScript
-{
-    // 富文本编辑器组件
-    path: '/editor',
-    component: resolve => require(['../components/page/VueEditor.vue'], resolve)
-},
-```
-
-第二步：删除引入该组件的文件。在目录 src/components/page/ 删除 VueEditor.vue 文件。
-
-第三步：删除该页面的入口。在目录 src/components/common/Sidebar.vue 中，找到该入口，删除下面这段代码。
-
-```js
-{
-	index: 'editor',
-	title: '富文本编辑器'
-},
-```
-
-第四步：卸载该组件。执行以下命令：
-npm un vue-quill-editor -S
-
-完成。
-
-### 二、如何切换主题色呢？
-
-第一步：打开 src/main.js 文件，找到引入 element 样式的地方，换成浅绿色主题。
-
-```javascript
-import 'element-ui/lib/theme-default/index.css'; // 默认主题
-// import './assets/css/theme-green/index.css';       // 浅绿色主题
-```
-
-第二步：打开 src/App.vue 文件，找到 style 标签引入样式的地方，切换成浅绿色主题。
-
-```javascript
-@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)
diff --git a/README_EN.md b/README_EN.md
@@ -16,15 +16,16 @@
     <img src="https://img.shields.io/badge/%24-donate-ff69b4.svg" alt="donate">
   </a>
 
-The web management system solution based on Vue2 and Element-UI。[live demo](https://lin-xin.gitee.io/example/work/)
+The web management system solution based on Vue3 and ElementPlus。[live demo](https://lin-xin.gitee.io/example/work/)
+Please check the version of vue2 in [tag V4.2.0](https://github.com/lin-xin/vue-manage-system/tree/V4.2.0)
 
 ## Donation
 
 ![WeChat](https://lin-xin.gitee.io/images/weixin.jpg)
 
 ## Preface
 
-The scheme as a set of multi-function background frame templates, suitable for most of the WEB management system development. Convenient development fast simple good components based on Vue2 and Element-UI. Color separation of color style, support manual switch themes, and it is convenient to use a custom theme color.
+The scheme as a set of multi-function background frame templates, suitable for most of the WEB management system development. Convenient development fast simple good components based on Vue3 and ElementPlus. Color separation of color style, support manual switch themes, and it is convenient to use a custom theme color.
 
 ## Function
 
@@ -35,11 +36,11 @@ The scheme as a set of multi-function background frame templates, suitable for m
 -   [x] Tabs
 -   [x] From
 -   [x] Chart :bar_chart:
--   [x] Editor
--   [x] Markdown
+-   [ ] Editor
+-   [ ] Markdown
 -   [x] Upload pictures by clipping or dragging
--   [x] Support manual switch themes :sparkles:
--   [x] List drag sort
+-   [ ] Support manual switch themes :sparkles:
+-   [ ] List drag sort
 -   [x] Permission
 -   [x] 404 / 403
 -   [x] Three level menu
@@ -75,36 +76,36 @@ Vue.js wrapper for sChart.js. Github : [vue-schart](https://github.com/linxin/vu
 </template>
 
 <script>
-    import Schart from 'vue-schart'; // 导入Schart组件
+    import Schart from "vue-schart"; // 导入Schart组件
     export default {
         data() {
             return {
                 options: {
-                    type: 'bar',
+                    type: "bar",
                     title: {
-                        text: '最近一周各品类销售图'
+                        text: "最近一周各品类销售图",
                     },
-                    labels: ['周一', '周二', '周三', '周四', '周五'],
+                    labels: ["周一", "周二", "周三", "周四", "周五"],
                     datasets: [
                         {
-                            label: '家电',
-                            data: [234, 278, 270, 190, 230]
+                            label: "家电",
+                            data: [234, 278, 270, 190, 230],
                         },
                         {
-                            label: '百货',
-                            data: [164, 178, 190, 135, 160]
+                            label: "百货",
+                            data: [164, 178, 190, 135, 160],
                         },
                         {
-                            label: '食品',
-                            data: [144, 198, 150, 235, 120]
-                        }
-                    ]
-                }
+                            label: "食品",
+                            data: [144, 198, 150, 235, 120],
+                        },
+                    ],
+                },
             };
         },
         components: {
-            Schart
-        }
+            Schart,
+        },
     };
 </script>
 <style>
@@ -119,77 +120,15 @@ Vue.js wrapper for sChart.js. Github : [vue-schart](https://github.com/linxin/vu
 
 A desktop component library based on vue.js2.0 . Github : [element](http://element.eleme.io/#/zh-CN/component/layout)
 
-### Vue-Quill-Editor
-
-Quill editor component for Vue2. Github : [vue-quill-editor](https://github.com/surmon-china/vue-quill-editor)
-
-### mavonEditor
-
-A markdown editor based on Vue that supports a variety of personalized features. Github: [mavonEditor](https://github.com/hinesboy/mavonEditor)
-
-### vue-cropperjs
-
-A Vue wrapper component for cropperjs. Github: [vue-cropperjs](https://github.com/Agontuk/vue-cropperjs)
-
-## Notice
-
-### 一、If I don't want to use some components, how can I delete it?
-
-For example, I don't want to use the Vue-Quill-Editor component, I need to take four steps.
-
-The first step to remove the component of the routing. Enter 'src/router/index.js' and delete the code below.
-
-```JavaScript
-{
-    path: '/editor',
-    component: resolve => require(['../components/page/VueEditor.vue'], resolve)
-},
-```
-
-Second,delete the component files. Enter 'src/components/page/' and delete 'VueEditor.vue' file.
-
-The third step is to delete the entry. Enter 'src/components/common/Sidebar.vue' and delete the code below.
-
-```js
-{
-	index: 'editor',
-	title: '富文本编辑器'
-},
-```
-
-Finally, uninstall this component.
-npm un vue-quill-editor -S
-
-Complete!
-
-### 二、How to switch themes?
-
-The first step to enter 'src/main.js' and change into green theme.
-
-```javascript
-import 'element-ui/lib/theme-default/index.css'; // default theme
-// import '../static/css/theme-green/index.css';       // green theme
-```
-
-The second step to enter 'src/App.vue' and change into green theme.
-
-```javascript
-@import "../static/css/main.css";
-@import "../static/css/color-dark.css";     /*深色主题*/
-/*@import "../static/css/theme-green/color-green.css";   !*浅绿色主题*!*/
-```
-
-Finally,enter 'src/components/common/Sidebar.vue' and find el-menu Tags,delete 'background-color/text-color/active-text-color'。
-
 ## Screenshot
 
 ### Default theme
 
 ![Image text](https://github.com/lin-xin/manage-system/raw/master/screenshots/wms1.png)
 
-### Green theme
+### Login
 
-![Image text](https://github.com/lin-xin/manage-system/raw/master/screenshots/wms2.png)
+![Image text](https://github.com/lin-xin/manage-system/raw/master/screenshots/wms3.png)
 
 ## License
 

diff --git a/babel.config.js b/babel.config.js
@@ -1,5 +1,5 @@
 module.exports = {
   presets: [
-    '@vue/app'
+    '@vue/cli-plugin-babel/preset'
   ]
 }