Vue2 後臺管理系統解決方案

時間 2019-11-06

標籤 vue2 vue 後臺管理系統解決方案简体版

原文原文鏈接

基於Vue.js 2.x系列 + Element UI 的後臺管理系統解決方案。javascript

github地址： https://github.com/lin-xin/vue-manage-system
demo地址：https://lin-xin.gitee.io/example/work/css

前言

以前在公司用了Vue + Element組件庫作了個後臺管理系統，基本不少組件能夠直接引用組件庫的，可是也有一些需求沒法知足。像圖片裁剪上傳、富文本編輯器、圖表等這些在後臺管理系統中很常見的功能，就須要引用其餘的組件才能完成。從尋找組件，到使用組件的過程當中，遇到了不少問題，也積累了寶貴的經驗。因此我就把開發這個後臺管理系統的經驗，總結成這個後臺管理系統解決方案。vue

該方案做爲一套多功能的後臺框架模板，適用於絕大部分的後臺管理系統（Web Management System）開發。基於vue.js,使用vue-cli腳手架快速生成項目目錄，引用Element UI組件庫，方便開發快速簡潔好看的組件。分離顏色樣式，支持手動切換主題色，並且很方便使用自定義主題色。java

功能

[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                                                    // 安裝項目依賴，等待安裝完成以後

本地開發

// 開啓服務器，瀏覽器訪問 http://localhost:8080
npm run dev

構建生產

// 執行構建命令，生成的dist文件夾放在服務器下便可訪問
npm run build

組件使用說明與演示

element-ui

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

vue-datasource

一個用於動態建立表格的vue.js服務端組件。訪問地址：vue-datasourcegithub

<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-editorvue-cli

<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: '',                                // 編輯器的內容
                editorOption: {                                // 編輯器的配置
                    // something config
                }
            }
        },
        components: {
            quillEditor                                        // 聲明組件quillEditor
        }
    }
</script>

Vue-SimpleMDE

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

<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編輯器內容
                configs: {                                    // markdown編輯器配置參數
                    status: false,                            // 禁用底部狀態欄
                    initialValue: 'Hello BBK',                // 設置初始值
                    renderingConfig: {
                        codeSyntaxHighlighting: true,        // 開啓代碼高亮
                        highlightingTheme: 'atom-one-light' // 自定義代碼高亮主題
                    }
                }
            }
        },
        components: {
            markdownEditor                                    // 聲明組件markdownEditor
        }
    }
</script>

Vue-Core-Image-Upload

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

<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">                    // 監聽圖片上傳完成事件
        </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) {                            // 定義上傳完成執行的方法
                console.log(res)
            }
        }
    }
</script>

vue-schart

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

<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: {                  // 圖表可選參數
                    title: 'Total sales of stores in recent years'
                }
            }
        },
        components: {
            Schart
        }
    }
</script>

其餘注意事項

1、若是我不想用到上面的某些組件呢，那我怎麼在模板中刪除掉不影響到其餘功能呢？

舉個栗子，我不想用 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>

第四步：卸載該組件。執行如下命令：

npm un vue-datasource -S

完成。

2、如何切換主題色呢？

第一步：打開 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" 去掉便可。