vue-manage-system:后臺管理系統(tǒng)解決方案

時間：2023-04-29 21:09:02 | 來源：網(wǎng)站運營

時間：2023-04-29 21:09:02 來源：網(wǎng)站運營

vue-manage-system:后臺管理系統(tǒng)解決方案：基于Vue.js 2.x系列 + Element UI 的后臺管理系統(tǒng)解決方案。

github地址：lin-xin/manage-system
demo地址：lin-xin.gitee.io/example/work/

前言

之前在公司用了Vue + Element組件庫做了個后臺管理系統(tǒng)，基本很多組件可以直接引用組件庫的，但是也有一些需求無法滿足。像圖片裁剪上傳、富文本編輯器、圖表等這些在后臺管理系統(tǒng)中很常見的功能，就需要引用其他的組件才能完成。從尋找組件，到使用組件的過程中，遇到了很多問題，也積累了寶貴的經(jīng)驗。所以我就把開發(fā)這個后臺管理系統(tǒng)的經(jīng)驗，總結(jié)成這個后臺管理系統(tǒng)解決方案。

該方案作為一套多功能的后臺框架模板，適用于絕大部分的后臺管理系統(tǒng)（Web Management System）開發(fā)?；趘ue.js,使用vue-cli腳手架快速生成項目目錄，引用Element UI組件庫，方便開發(fā)快速簡潔好看的組件。分離顏色樣式，支持手動切換主題色，而且很方便使用自定義主題色。

功能

• [x] Element UI
• [x] 登錄/注銷
• [x] 表格
• [x] 表單
• [x] 圖表
• [x] 富文本編輯器
• [x] markdown編輯器
• [x] 圖片拖拽/裁剪上傳
• [x] 支持切換主題色

模板安裝步驟

git clone https://github.com/lin-xin/manage-system.git // 把模板下載到本地cd manage-system // 進入模板目錄npm install // 安裝項目依賴，等待安裝完成之后

本地開發(fā)

// 開啟服務(wù)器，瀏覽器訪問 http://localhost:8080npm run dev

構(gòu)建生產(chǎn)

// 執(zhí)行構(gòu)建命令，生成的dist文件夾放在服務(wù)器下即可訪問npm run build

組件使用說明與演示

element-ui

一套基于vue.js2.0的桌面組件庫。訪問地址：element

vue-datasource

一個用于動態(tài)創(chuàng)建表格的vue.js服務(wù)端組件。訪問地址：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'; // 導入quillEditor組件 export default { data: function(){ return { information: { pagination: {...}, // 頁碼配置 data: [...] }, columns: [...], // 列名配置 actions: [...] // 功能配置 } }, components: { Datasource // 聲明組件Datasource }, methods: { changePage(values) {...}, onSearch(searchQuery) {...} } }</script>

Vue-Quill-Editor

基于Quill、適用于Vue2的富文本編輯器。訪問地址：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'; // 導入quillEditor組件 export default { data: function(){ return { content: '', // 編輯器的內(nèi)容 editorOption: { // 編輯器的配置 // something config } } }, components: { quillEditor // 聲明組件quillEditor } }</script>

Vue-SimpleMDE

Vue.js的Markdown Editor組件。訪問地址：Vue-SimpleMDE

<template> <div> <markdown-editor v-model="content" :configs="configs" ref="markdownEditor"></markdown-editor> </div></template><script> import { markdownEditor } from 'vue-simplemde'; // 導入markdownEditor組件 export default { data: function(){ return { content:'', // markdown編輯器內(nèi)容 configs: { // markdown編輯器配置參數(shù) status: false, // 禁用底部狀態(tài)欄 initialValue: 'Hello BBK', // 設(shè)置初始值 renderingConfig: { codeSyntaxHighlighting: true, // 開啟代碼高亮 highlightingTheme: 'atom-one-light' // 自定義代碼高亮主題 } } } }, components: { markdownEditor // 聲明組件markdownEditor } }</script>

Vue-Core-Image-Upload

一款輕量級的vue上傳插件，支持裁剪。訪問地址：Vue-Core-Image-Upload

<template> <div> <img :src="src"> // 用于顯示上傳的圖片 <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)聽圖片上傳完成事件 </vue-core-image-upload> </div></template><script> import VueCoreImageUpload from 'vue-core-image-upload'; // 導入VueCoreImageUpload組件 export default { data: function(){ return { src:'../img/1.jpg' // 默認顯示圖片地址 } }, components: { VueCoreImageUpload // 聲明組件VueCoreImageUpload }, methods:{ imageuploaded(res) { // 定義上傳完成執(zhí)行的方法 console.log(res) } } }</script>

vue-schart

vue.js封裝sChart.js的圖表組件。訪問地址：vue-schart







<template> <div> <schart :canvasId="canvasId" :type="type" :width="width" :height="height" :data="data" :options="options" ></schart> </div></template> <script> import Schart from 'vue-schart'; // 導入Schart組件 export default { data: function(){ return { canvasId: 'myCanvas', // canvas的id type: 'bar', // 圖表類型 width: 500, height: 400, data: [ {name: '2014', value: 1342}, {name: '2015', value: 2123}, {name: '2016', value: 1654}, {name: '2017', value: 1795}, ], options: { // 圖表可選參數(shù) title: 'Total sales of stores in recent years' } } }, components: { Schart } }</script>

其他注意事項

一、如果我不想用到上面的某些組件呢，那我怎么在模板中刪除掉不影響到其他功能呢？

舉個栗子，我不想用 vue-datasource 這個組件，那我需要分四步走。

第一步：刪除該組件的路由，在目錄 src/router/index.js 中，找到引入改組件的路由，刪除下面這段代碼。

{ path: '/vuetable', component: resolve => require(['../components/page/VueTable.vue'], resolve) // vue-datasource組件},第二步：刪除引入該組件的文件。在目錄 src/components/page/ 刪除 VueTable.vue 文件。

第三步：刪除該頁面的入口。在目錄 src/components/common/Sidebar.vue 中，找到該入口，刪除下面這段代碼。

<el-menu-item index="vuetable">Vue表格組件</el-menu-item>第四步：卸載該組件。執(zhí)行以下命令：

npm un vue-datasource -S完成。

二、如何切換主題色呢？

第一步：打開 src/main.js 文件，找到引入 element 樣式的地方，換成淺綠色主題。

import 'element-ui/lib/theme-default/index.css'; // 默認主題// import '../static/css/theme-green/index.css'; // 淺綠色主題第二步：打開 src/App.vue 文件，找到 style 標簽引入樣式的地方，切換成淺綠色主題。

@import "../static/css/main.css";@import "../static/css/color-dark.css"; /*深色主題*//*@import "../static/css/theme-green/color-green.css"; !*淺綠色主題*!*/第三步：打開 src/components/common/Sidebar.vue 文件，找到 el-menu 標簽，把 theme="dark" 去掉即可。

項目截圖

默認皮膚

淺綠色皮膚