Skip to content

Commit 96be359

Browse files
lin-xinlin-xin
committed
feature:升级到vue3和element-plus
1 parent 0f641c0 commit 96be359

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

50 files changed

+2507
-2904
lines changed

‎.browserslistrc

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎.gitignore

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
.DS_Store
22
node_modules
33
/dist
4-
example.html
5-
favicon.ico
4+
5+
66
# local env files
77
.env.local
88
.env.*.local
@@ -11,6 +11,7 @@ favicon.ico
1111
npm-debug.log*
1212
yarn-debug.log*
1313
yarn-error.log*
14+
pnpm-debug.log*
1415

1516
# Editor directories and files
1617
.idea
@@ -19,4 +20,4 @@ yarn-error.log*
1920
*.ntvs*
2021
*.njsproj
2122
*.sln
22-
*.sw*
23+
*.sw?

‎.prettierrc

Lines changed: 0 additions & 6 deletions
This file was deleted.

‎README.md

Lines changed: 25 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,8 @@
1616
<img src="https://img.shields.io/badge/%24-donate-ff69b4.svg" alt="donate">
1717
</a>
1818

19-
基于 Vue + Element UI 的后台管理系统解决方案。[线上地址](https://lin-xin.gitee.io/example/work/)
19+
基于 Vue3 + Element Plus 的后台管理系统解决方案。[线上地址](https://lin-xin.gitee.io/example/work/)
20+
Vue2 版本请看 [tag-V4.2.0](https://github.com/lin-xin/vue-manage-system/tree/V4.2.0)
2021

2122
> React + Ant Design 的版本正在开发中，仓库地址：[react-manage-system](https://github.com/lin-xin/react-manage-system)
2223
@@ -28,47 +29,39 @@
2829

2930
![Image text](https://github.com/lin-xin/manage-system/raw/master/screenshots/wms3.png)
3031

31-
### 默认皮肤
32+
### 首页
3233

3334
![Image text](https://github.com/lin-xin/manage-system/raw/master/screenshots/wms1.png)
3435

35-
### 浅绿色皮肤
36-
37-
![Image text](https://github.com/lin-xin/manage-system/raw/master/screenshots/wms2.png)
38-
3936
## 赞赏
4037

4138
请作者喝杯咖啡吧！(微信号：linxin_20)
4239

4340
![微信扫一扫](https://lin-xin.gitee.io/images/weixin.jpg)
4441

45-
## 特别鸣谢
46-
47-
- [实验楼](https://www.shiyanlou.com?source=vue-manage-system)
48-
4942
## 前言
5043

51-
该方案作为一套多功能的后台框架模板，适用于绝大部分的后台管理系统（Web Management System）开发。基于 vue.js，使用 vue-cli3 脚手架，引用 Element UI 组件库，方便开发快速简洁好看的组件。分离颜色样式，支持手动切换主题色，而且很方便使用自定义主题色。
44+
该方案作为一套多功能的后台框架模板，适用于绝大部分的后台管理系统（Web Management System）开发。基于 Vue3，使用 vue-cli3 脚手架，引用 Element Plus 组件库，方便开发快速简洁好看的组件。分离颜色样式，支持手动切换主题色，而且很方便使用自定义主题色。
5245

5346
## 功能
5447

55-
- [x] Element UI
48+
- [x] Element Plus
5649
- [x] 登录/注销
5750
- [x] Dashboard
5851
- [x] 表格
5952
- [x] Tab 选项卡
6053
- [x] 表单
6154
- [x] 图表 :bar_chart:
62-
- [x] 富文本编辑器
63-
- [x] markdown 编辑器
55+
- [ ] 富文本编辑器
56+
- [ ] markdown 编辑器
6457
- [x] 图片拖拽/裁剪上传
65-
- [x] 支持切换主题色 :sparkles:
66-
- [x] 列表拖拽排序
58+
- [ ] 支持切换主题色 :sparkles:
59+
- [ ] 列表拖拽排序
6760
- [x] 权限测试
6861
- [x] 404 / 403
6962
- [x] 三级菜单
7063
- [x] 自定义图标
71-
- [x] 可拖拽弹窗
64+
- [ ] 可拖拽弹窗
7265
- [x] 国际化
7366

7467
## 安装步骤
@@ -101,36 +94,36 @@ vue.js 封装 sChart.js 的图表组件。访问地址：[vue-schart](https://gi
10194
</template>
10295

10396
<script>
104-
import Schart from 'vue-schart'; // 导入Schart组件
97+
import Schart from "vue-schart"; // 导入Schart组件
10598
export default {
10699
data() {
107100
return {
108101
options: {
109-
type: 'bar',
102+
type: "bar",
110103
title: {
111-
text: '最近一周各品类销售图'
104+
text: "最近一周各品类销售图",
112105
},
113-
labels: ['周一', '周二', '周三', '周四', '周五'],
106+
labels: ["周一", "周二", "周三", "周四", "周五"],
114107
datasets: [
115108
{
116-
label: '家电',
117-
data: [234, 278, 270, 190, 230]
109+
label: "家电",
110+
data: [234, 278, 270, 190, 230],
118111
},
119112
{
120-
label: '百货',
121-
data: [164, 178, 190, 135, 160]
113+
label: "百货",
114+
data: [164, 178, 190, 135, 160],
122115
},
123116
{
124-
label: '食品',
125-
data: [144, 198, 150, 235, 120]
126-
}
127-
]
128-
}
117+
label: "食品",
118+
data: [144, 198, 150, 235, 120],
119+
},
120+
],
121+
},
129122
};
130123
},
131124
components: {
132-
Schart
133-
}
125+
Schart,
126+
},
134127
};
135128
</script>
136129
<style>
@@ -141,57 +134,6 @@ vue.js 封装 sChart.js 的图表组件。访问地址：[vue-schart](https://gi
141134
</style>
142135
```
143136

144-
## 其他注意事项
145-
146-
### 一、如果我不想用到上面的某些组件呢，那我怎么在模板中删除掉不影响到其他功能呢？
147-
148-
举个栗子，我不想用 Vue-Quill-Editor 这个组件，那我需要分四步走。
149-
150-
第一步：删除该组件的路由，在目录 src/router/index.js 中，找到引入改组件的路由，删除下面这段代码。
151-
152-
```JavaScript
153-
{
154-
// 富文本编辑器组件
155-
path: '/editor',
156-
component: resolve => require(['../components/page/VueEditor.vue'], resolve)
157-
},
158-
```
159-
160-
第二步：删除引入该组件的文件。在目录 src/components/page/ 删除 VueEditor.vue 文件。
161-
162-
第三步：删除该页面的入口。在目录 src/components/common/Sidebar.vue 中，找到该入口，删除下面这段代码。
163-
164-
```js
165-
{
166-
index: 'editor',
167-
title: '富文本编辑器'
168-
},
169-
```
170-
171-
第四步：卸载该组件。执行以下命令：
172-
npm un vue-quill-editor -S
173-
174-
完成。
175-
176-
### 二、如何切换主题色呢？
177-
178-
第一步：打开 src/main.js 文件，找到引入 element 样式的地方，换成浅绿色主题。
179-
180-
```javascript
181-
import 'element-ui/lib/theme-default/index.css'; // 默认主题
182-
// import './assets/css/theme-green/index.css'; // 浅绿色主题
183-
```
184-
185-
第二步：打开 src/App.vue 文件，找到 style 标签引入样式的地方，切换成浅绿色主题。
186-
187-
```javascript
188-
@import "./assets/css/main.css";
189-
@import "./assets/css/color-dark.css"; /*深色主题*/
190-
/*@import "./assets/css/theme-green/color-green.css"; !*浅绿色主题*!*/
191-
```
192-
193-
第三步：打开 src/components/common/Sidebar.vue 文件，找到 el-menu 标签，把 background-color/text-color/active-text-color 属性去掉即可。
194-
195137
## License
196138

197139
[MIT](https://github.com/lin-xin/vue-manage-system/blob/master/LICENSE)

‎README_EN.md

Lines changed: 24 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -16,15 +16,16 @@
1616
<img src="https://img.shields.io/badge/%24-donate-ff69b4.svg" alt="donate">
1717
</a>
1818

19-
The web management system solution based on Vue2 and Element-UI。[live demo](https://lin-xin.gitee.io/example/work/)
19+
The web management system solution based on Vue3 and ElementPlus。[live demo](https://lin-xin.gitee.io/example/work/)
20+
Please check the version of vue2 in [tag V4.2.0](https://github.com/lin-xin/vue-manage-system/tree/V4.2.0)
2021

2122
## Donation
2223

2324
![WeChat](https://lin-xin.gitee.io/images/weixin.jpg)
2425

2526
## Preface
2627

27-
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.
28+
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.
2829

2930
## Function
3031

@@ -35,11 +36,11 @@ The scheme as a set of multi-function background frame templates, suitable for m
3536
- [x] Tabs
3637
- [x] From
3738
- [x] Chart :bar_chart:
38-
- [x] Editor
39-
- [x] Markdown
39+
- [ ] Editor
40+
- [ ] Markdown
4041
- [x] Upload pictures by clipping or dragging
41-
- [x] Support manual switch themes :sparkles:
42-
- [x] List drag sort
42+
- [ ] Support manual switch themes :sparkles:
43+
- [ ] List drag sort
4344
- [x] Permission
4445
- [x] 404 / 403
4546
- [x] Three level menu
@@ -75,36 +76,36 @@ Vue.js wrapper for sChart.js. Github : [vue-schart](https://github.com/linxin/vu
7576
</template>
7677

7778
<script>
78-
import Schart from 'vue-schart'; // 导入Schart组件
79+
import Schart from "vue-schart"; // 导入Schart组件
7980
export default {
8081
data() {
8182
return {
8283
options: {
83-
type: 'bar',
84+
type: "bar",
8485
title: {
85-
text: '最近一周各品类销售图'
86+
text: "最近一周各品类销售图",
8687
},
87-
labels: ['周一', '周二', '周三', '周四', '周五'],
88+
labels: ["周一", "周二", "周三", "周四", "周五"],
8889
datasets: [
8990
{
90-
label: '家电',
91-
data: [234, 278, 270, 190, 230]
91+
label: "家电",
92+
data: [234, 278, 270, 190, 230],
9293
},
9394
{
94-
label: '百货',
95-
data: [164, 178, 190, 135, 160]
95+
label: "百货",
96+
data: [164, 178, 190, 135, 160],
9697
},
9798
{
98-
label: '食品',
99-
data: [144, 198, 150, 235, 120]
100-
}
101-
]
102-
}
99+
label: "食品",
100+
data: [144, 198, 150, 235, 120],
101+
},
102+
],
103+
},
103104
};
104105
},
105106
components: {
106-
Schart
107-
}
107+
Schart,
108+
},
108109
};
109110
</script>
110111
<style>
@@ -119,77 +120,15 @@ Vue.js wrapper for sChart.js. Github : [vue-schart](https://github.com/linxin/vu
119120

120121
A desktop component library based on vue.js2.0 . Github : [element](http://element.eleme.io/#/zh-CN/component/layout)
121122

122-
### Vue-Quill-Editor
123-
124-
Quill editor component for Vue2. Github : [vue-quill-editor](https://github.com/surmon-china/vue-quill-editor)
125-
126-
### mavonEditor
127-
128-
A markdown editor based on Vue that supports a variety of personalized features. Github: [mavonEditor](https://github.com/hinesboy/mavonEditor)
129-
130-
### vue-cropperjs
131-
132-
A Vue wrapper component for cropperjs. Github: [vue-cropperjs](https://github.com/Agontuk/vue-cropperjs)
133-
134-
## Notice
135-
136-
### 一、If I don't want to use some components, how can I delete it?
137-
138-
For example, I don't want to use the Vue-Quill-Editor component, I need to take four steps.
139-
140-
The first step to remove the component of the routing. Enter 'src/router/index.js' and delete the code below.
141-
142-
```JavaScript
143-
{
144-
path: '/editor',
145-
component: resolve => require(['../components/page/VueEditor.vue'], resolve)
146-
},
147-
```
148-
149-
Second,delete the component files. Enter 'src/components/page/' and delete 'VueEditor.vue' file.
150-
151-
The third step is to delete the entry. Enter 'src/components/common/Sidebar.vue' and delete the code below.
152-
153-
```js
154-
{
155-
index: 'editor',
156-
title: '富文本编辑器'
157-
},
158-
```
159-
160-
Finally, uninstall this component.
161-
npm un vue-quill-editor -S
162-
163-
Complete!
164-
165-
### 二、How to switch themes?
166-
167-
The first step to enter 'src/main.js' and change into green theme.
168-
169-
```javascript
170-
import 'element-ui/lib/theme-default/index.css'; // default theme
171-
// import '../static/css/theme-green/index.css'; // green theme
172-
```
173-
174-
The second step to enter 'src/App.vue' and change into green theme.
175-
176-
```javascript
177-
@import "../static/css/main.css";
178-
@import "../static/css/color-dark.css"; /*深色主题*/
179-
/*@import "../static/css/theme-green/color-green.css"; !*浅绿色主题*!*/
180-
```
181-
182-
Finally,enter 'src/components/common/Sidebar.vue' and find el-menu Tags,delete 'background-color/text-color/active-text-color'。
183-
184123
## Screenshot
185124

186125
### Default theme
187126

188127
![Image text](https://github.com/lin-xin/manage-system/raw/master/screenshots/wms1.png)
189128

190-
### Green theme
129+
### Login
191130

192-
![Image text](https://github.com/lin-xin/manage-system/raw/master/screenshots/wms2.png)
131+
![Image text](https://github.com/lin-xin/manage-system/raw/master/screenshots/wms3.png)
193132

194133
## License
195134

‎babel.config.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
module.exports = {
22
presets: [
3-
'@vue/app'
3+
'@vue/cli-plugin-babel/preset'
44
]
55
}

0 commit comments

Comments
 (0)