File tree Expand file tree Collapse file tree 1 file changed +22
-3
lines changed Expand file tree Collapse file tree 1 file changed +22
-3
lines changed Original file line number Diff line number Diff line change 55## 前言 ##
66之前在公司用了Vue + Element组件库做了个后台管理系统,基本很多组件可以直接引用组件库的,但是也有一些需求无法满足。像图片裁剪上传、富文本编辑器、图表等这些在后台管理系统中很常见的功能,就需要引用其他的组件才能完成。所以我就把开发这个后台管理系统的经验,总结了这个后台管理系统解决方案。
77
8- 该方案作为一套多功能的后台框架模板,适用于绝大部分的后台管理系统(Web Management System)开发。基于vue.js,使用vue-cli脚手架快速生成项目目录,引用Element UI组件库,方便开发快速简洁好看的组件。
8+ 该方案作为一套多功能的后台框架模板,适用于绝大部分的后台管理系统(Web Management System)开发。基于vue.js,使用vue-cli脚手架快速生成项目目录,引用Element UI组件库,方便开发快速简洁好看的组件。分离颜色,支持手动切换主题色,而且很方便使用自定义主题色。
99
1010## 功能 ##
1111- [x] Element UI
1616- [x] 富文本编辑器
1717- [x] markdown编辑器
1818- [x] 图片拖拽/裁剪上传
19+ - [x] 支持切换主题色
1920
2021
2122## 目录结构介绍 ##
@@ -250,7 +251,7 @@ Vue.js的Markdown Editor组件。访问地址:[Vue-SimpleMDE](https://github.c
250251```
251252
252253## 其他注意事项 ##
253- 如果我不想用到上面的某些组件呢,那我怎么在模板中删除掉不影响到其他功能呢?
254+ ### 一、 如果我不想用到上面的某些组件呢,那我怎么在模板中删除掉不影响到其他功能呢? ###
254255
255256举个栗子,我不想用 vue-datasource 这个组件,那我需要分四步走。
256257
@@ -275,4 +276,22 @@ Vue.js的Markdown Editor组件。访问地址:[Vue-SimpleMDE](https://github.c
275276
276277 npm un vue-datasource -S
277278
278- 完成。
279+ 完成。
280+
281+ ### 如何切换主题色呢? ###
282+
283+ 很简单,首先打开 src/main.js 文件,找到引入 element 样式的地方,换成浅绿色主题。
284+
285+ ``` javascript
286+ import ' element-ui/lib/theme-default/index.css' ; // 默认主题
287+ // import '../static/css/theme-green/index.css'; // 浅绿色主题
288+ ```
289+
290+ 然后打开 src/App.vue 文件,找到 <style > 标签引入样式的地方,切换成浅绿色主题。
291+
292+ ``` javascript
293+ @import " ../static/css/main.css" ;
294+ @import " ../static/css/color-dark.css" ; /* 深色主题*/
295+ /* @import "../static/css/theme-green/color-green.css"; !*浅绿色主题*!*/
296+ ```
297+ 最后,打开 src/components/common/Sidebar.vue 文件,找到 <el-menu > 标签,把 theme="dark" 去掉即可。
You can’t perform that action at this time.
0 commit comments