基于Vue.js 2.x系列 + Element UI 的后臺(tái)管理系統(tǒng)解決方案誊垢。
前言
之前在公司用了Vue + Element組件庫(kù)做了個(gè)后臺(tái)管理系統(tǒng)掉弛，基本很多組件可以直接引用組件庫(kù)的，但是也有一些需求無(wú)法滿足喂走。像圖片裁剪上傳殃饿、富文本編輯器、圖表等這些在后臺(tái)管理系統(tǒng)中很常見(jiàn)的功能芋肠，就需要引用其他的組件才能完成乎芳。從尋找組件，到使用組件的過(guò)程中帖池，遇到了很多問(wèn)題奈惑，也積累了寶貴的經(jīng)驗(yàn)。所以我就把開(kāi)發(fā)這個(gè)后臺(tái)管理系統(tǒng)的經(jīng)驗(yàn)睡汹，總結(jié)成這個(gè)后臺(tái)管理系統(tǒng)解決方案肴甸。
該方案作為一套多功能的后臺(tái)框架模板，適用于絕大部分的后臺(tái)管理系統(tǒng)（Web Management System）開(kāi)發(fā)囚巴≡冢基于vue.js,使用vue-cli腳手架快速生成項(xiàng)目目錄，引用Element UI組件庫(kù)文兢，方便開(kāi)發(fā)快速簡(jiǎn)潔好看的組件晤斩。分離顏色樣式，支持手動(dòng)切換主題色姆坚，而且很方便使用自定義主題色澳泵。
功能
- Element UI
- 登錄/注銷
- 表格
- 表單
- 圖表
- 富文本編輯器
- markdown編輯器
- 圖片拖拽/裁剪上傳
- 支持切換主題色
模板安裝步驟
git clone https://github.com/lin-xin/manage-system.git // 把模板下載到本地
cd manage-system // 進(jìn)入模板目錄
npm install // 安裝項(xiàng)目依賴，等待安裝完成之后
本地開(kāi)發(fā)
// 開(kāi)啟服務(wù)器兼呵，瀏覽器訪問(wèn) http://localhost:8080
npm run dev
構(gòu)建生產(chǎn)
// 執(zhí)行構(gòu)建命令兔辅，生成的dist文件夾放在服務(wù)器下即可訪問(wèn)
npm run build
組件使用說(shuō)明與演示
element-ui
一套基于vue.js2.0的桌面組件庫(kù)。訪問(wèn)地址：element
vue-datasource
一個(gè)用于動(dòng)態(tài)創(chuàng)建表格的vue.js服務(wù)端組件击喂。訪問(wèn)地址：vue-datasource
<template>
<div>
<datasource language="en" :table-data="information.data"
:columns="columns"
:pagination="information.pagination"
:actions="actions"
v-on:change="changePage"
v-on:searching="onSearch"></datasource>
</div>
</template>
<script>
import Datasource from 'vue-datasource'; // 導(dǎo)入quillEditor組件
export default {
data: function(){
return {
information: {
pagination: {...}, // 頁(yè)碼配置
data: [...]
},
columns: [...], // 列名配置
actions: [...] // 功能配置
}
},
components: {
Datasource // 聲明組件Datasource
},
methods: {
changePage(values) {...},
onSearch(searchQuery) {...}
}
}
</script>
Vue-Quill-Editor
基于Quill维苔、適用于Vue2的富文本編輯器。訪問(wèn)地址：vue-quill-editor
<template>
<div>
<quill-editor ref="myTextEditor" v-model="content" :config="editorOption"></quill-editor>
</div>
</template>
<script>
import { quillEditor } from 'vue-quill-editor'; // 導(dǎo)入quillEditor組件
export default {
data: function(){
return {
content: '', // 編輯器的內(nèi)容
editorOption: { // 編輯器的配置
// something config
}
}
},
components: {
quillEditor // 聲明組件quillEditor
}
}
</script>
Vue-SimpleMDE
Vue.js的Markdown Editor組件懂昂。訪問(wèn)地址：Vue-SimpleMDE
<template>
<div>
<markdown-editor v-model="content" :configs="configs" ref="markdownEditor"></markdown-editor>
</div>
</template>
<script>
import { markdownEditor } from 'vue-simplemde'; // 導(dǎo)入markdownEditor組件
export default {
data: function(){
return {
content:'', // markdown編輯器內(nèi)容
configs: { // markdown編輯器配置參數(shù)
status: false, // 禁用底部狀態(tài)欄
initialValue: 'Hello BBK', // 設(shè)置初始值
renderingConfig: {
codeSyntaxHighlighting: true, // 開(kāi)啟代碼高亮
highlightingTheme: 'atom-one-light' // 自定義代碼高亮主題
}
}
}
},
components: {
markdownEditor // 聲明組件markdownEditor
}
}
</script>
Vue-Core-Image-Upload
一款輕量級(jí)的vue上傳插件介时，支持裁剪。訪問(wèn)地址：Vue-Core-Image-Upload
<template>
<div>
 // 用于顯示上傳的圖片
<vue-core-image-upload :class="['pure-button','pure-button-primary','js-btn-crop']"
:crop="true" // 是否裁剪
text="上傳圖片"
url="" // 上傳路徑
extensions="png,gif,jpeg,jpg" // 限制文件類型
@:imageuploaded="imageuploaded"> // 監(jiān)聽(tīng)圖片上傳完成事件
</vue-core-image-upload>
</div>
</template>
<script>
import VueCoreImageUpload from 'vue-core-image-upload'; // 導(dǎo)入VueCoreImageUpload組件
export default {
data: function(){
return {
src:'../img/1.jpg' // 默認(rèn)顯示圖片地址
}
},
components: {
VueCoreImageUpload // 聲明組件VueCoreImageUpload
},
methods:{
imageuploaded(res) { // 定義上傳完成執(zhí)行的方法
console.log(res)
}
}
}
</script>
vue-echarts-v3
基于vue2和eCharts.js3的圖表組件。訪問(wèn)地址：vue-echarts-v3
<template>
<div>
<IEcharts :option="bar"></IEcharts>
</div>
</template>
<script>
import IEcharts from 'vue-echarts-v3'; // 導(dǎo)入IEcharts組件
export default {
data: function(){
return {
bar: {
title: {
text: '柱狀圖' // 圖標(biāo)標(biāo)題文本
},
tooltip: {},
xAxis: { // 橫坐標(biāo)
data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子']
},
yAxis: {}, // 縱坐標(biāo)
series: [{
name: '銷量',
type: 'bar', // 圖標(biāo)類型
data: [5, 20, 36, 10, 10, 20]
}]
}
}
},
components: {
IEcharts // 聲明組件VueCoreImageUpload
}
}
</script>
其他注意事項(xiàng)
一沸柔、如果我不想用到上面的某些組件呢循衰，那我怎么在模板中刪除掉不影響到其他功能呢？
舉個(gè)栗子褐澎，我不想用 vue-datasource 這個(gè)組件会钝，那我需要分四步走。
第一步：刪除該組件的路由工三，在目錄 src/router/index.js 中迁酸，找到引入改組件的路由，刪除下面這段代碼俭正。
{
path: '/vuetable',
component: resolve => require(['../components/page/VueTable.vue'], resolve) // vue-datasource組件
},
第二步：刪除引入該組件的文件奸鬓。在目錄 src/components/page/ 刪除 VueTable.vue 文件。
第三步：刪除該頁(yè)面的入口段审。在目錄 src/components/common/Sidebar.vue 中全蝶，找到該入口，刪除下面這段代碼寺枉。
<el-menu-item index="vuetable">Vue表格組件</el-menu-item>
第四步：卸載該組件抑淫。執(zhí)行以下命令：
npm un vue-datasource -S
完成。
二姥闪、如何切換主題色呢始苇？
第一步：打開(kāi) src/main.js 文件，找到引入 element 樣式的地方筐喳，換成淺綠色主題催式。
import 'element-ui/lib/theme-default/index.css'; // 默認(rèn)主題
// import '../static/css/theme-green/index.css'; // 淺綠色主題
第二步：打開(kāi) src/App.vue 文件，找到 style 標(biāo)簽引入樣式的地方避归，切換成淺綠色主題荣月。
@import "../static/css/main.css";
@import "../static/css/color-dark.css"; /*深色主題*/
/*@import "../static/css/theme-green/color-green.css"; !*淺綠色主題*!*/
第三步：打開(kāi) src/components/common/Sidebar.vue 文件，找到 el-menu 標(biāo)簽梳毙，把 theme="dark" 去掉即可哺窄。
項(xiàng)目截圖
默認(rèn)皮膚
淺綠色皮膚
