小小林熬夜学编程

这个屌丝很懒，什么也没留下！

热门标签

vue-manage-system 后台管理系统开发总结_vue-manage-system文档

作者：小小林熬夜学编程 | 2024-04-28 14:49:04

踩

vue-manage-system文档

文章目录

前言

vue-manage-system，一个基于 Vue.js 和 element-ui 的后台管理系统模板，其中也踩了很多坑，在这总结一下。

安装

vue-manage-system作为一套多功能的后台框架模板，适用于绝大部分的后台管理系统（Web Management System）开发。

该项目基于 vue.js开发，使用 vue-cli3 脚手架，引用 Element UI 组件库，方便开发快速简洁好看的组件。

克隆项目到本地并进入目录

git clone https://github.com/lin-xin/vue-manage-system.git      
cd vue-manage-system 
1
2

安装依赖

npm install //或者 yarn install
1

启动开发调试服务器

npm run serve //浏览器访问 http://localhost:8080
1

构建

npm run build
1

配置代理

打开Vue项目的根目录，找到config/index.js文件（如果没有该文件，需要手动创建）。

在index.js文件中找到devServer对象（如果没有该对象，需要手动创建）。

在devServer对象中添加proxy属性，该属性用于配置代理。

根据实际需求，设置代理规则。例如，如果需要将所有以/api开头的请求都代理到http://example.com/api，可以按照以下方式配置：

module.exports = {  
  devServer: {  
    proxy: {  
      '/api': {  
        target: 'http://example.com',  
        changeOrigin: true,  
        pathRewrite: {  
          '^/api': ''  
        }  
      }  
    }  
  }  
}
1
2
3
4
5
6
7
8
9
10
11
12
13

上述配置中，/api表示需要代理的路径前缀，target表示目标地址，changeOrigin表示是否改变请求头中的Origin，pathRewrite表示路径重写。

富文本

基于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: '',                                // 编辑器的内容
                editorOption: {                                // 编辑器的配置
                    // something config
                }
            }
        },
        components: {
            quillEditor                                        // 声明组件quillEditor
        }
    }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

上传 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">                    // 监听图片上传完成事件
        </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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

自定义图标

element-ui 自带的字体图标比较少，而且许多比较常见的都没有，因此需要自己引入自己想要的字体图标。最受欢迎的图标库 Font Awesome，足足有 675 个图标，但也因此导致字体文件比较大，而项目中又不需要用到这么多图标。那么这时候，阿里图标库就是一个非常不错的选择。

首先在阿里图标上创建一个项目，设置图标前缀，比如 el-icon-lx，设置Font Family，比如 lx-iconfont，添加需要用到的图标到项目中，我这边选择 Font class 生成在线链接，因为所有页面都需要用到图标，就直接在 index.html 中引入该css链接就行了

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>vue-manage-system</title>
    <!-- 这里引入阿里图标样式 -->
    <link rel="stylesheet" href="//at.alicdn.com/t/font_830376_qzecyukz0s.css">
</head>
<body>
<div id="app"></div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12

然后需要设置前缀为 el-icon-lx 的图标类名使用 lx-iconfont 字体。

[class*="el-icon-lx"], [class^=el-icon-lx] {
    font-family: lx-iconfont!important;
}
1
2
3

但是这个样式要放在哪里才可以呢？这可不是随便放就行的。在 main.js 中，引入了 element-ui 的样式，而样式中有这样的一段css:

[class*=" el-icon-"], [class^=el-icon-]{
    font-family: element-icons!important;
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    vertical-align: baseline;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
1
2
3
4
5
6
7
8
9
10
11
12
13

很明显，如果这段 css 在我们自定义样式后面才执行，就会覆盖了我们的样式，那自定义的图标就显示不了。而在 build 项目的时候，会把 APP.vue 中的的样式打包进 app.css 中，然后再把 main.js 中引用到的样式追加到后面。那么我们可以把自定义样式放到一个css文件中，然后在 main.js 引入 element-ui css 的后面引入，那就可以覆盖掉默认字体了，然后便可以在项目中通过使用图标了。

那机智的人就发现了，我自定义图标的前缀不要含 el-icon- 就不会有这样的问题了。是的，那么为了和原有字体保持一样的样式，需要复制它的整段css

/* 假设前缀为 el-lx */
[class*="el-lx-"], [class^=el-lx-]{
    font-family: lx-iconfont!important;
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    vertical-align: baseline;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

导航菜单

首先定好菜单数据的格式如下，即使服务器端返回的格式不是这样，也需要前端处理成下面的格式：

export default {
    data() {
        return {
            items: [{
                icon: 'el-icon-lx-home',
                index: 'dashboard',
                title: '系统首页'
            },{
                icon: 'el-icon-lx-calendar',
                index: '1',
                title: '表单相关',
                subs: [{
                    index: '1-1',
                    title: '三级菜单',
                    subs: [{
                        index: 'editor',
                        title: '富文本编辑器'
                    }]
                }]
            },{
                icon: 'el-icon-lx-warn',
                index: '2',
                title: '错误处理',
                subs: [{
                    index: '404',
                    title: '404页面'
                }]
            }]
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

icon 就是菜单图标，就可以用到我们上面自定义的图标了；index 就是路由地址；title 就是菜单名称；subs 就是子菜单了。而模板则通过判断菜单中是否包含 subs 从而显示二级菜单和三级菜单。

<el-menu :default-active="onRoutes" :collapse="collapse" router>
    <template v-for="item in items">
        <template v-if="item.subs">
            <el-submenu :index="item.index" :key="item.index">
                <template slot="title">
                    <i :class="item.icon"></i><span slot="title">{{ item.title }}</span>
                </template>
                <template v-for="subItem in item.subs">
                    <el-submenu v-if="subItem.subs" :index="subItem.index" :key="subItem.index">
                        <template slot="title">{{ subItem.title }}</template>
                        <!-- 三级菜单 -->
                        <el-menu-item v-for="(threeItem,i) in subItem.subs" :key="i" :index="threeItem.index">
                            {{ threeItem.title }}
                        </el-menu-item>
                    </el-submenu>
                    <el-menu-item v-else :index="subItem.index" :key="subItem.index">
                        {{ subItem.title }}
                    </el-menu-item>
                </template>
            </el-submenu>
        </template>
        <!-- 没有二级菜单 -->
        <template v-else>
            <el-menu-item :index="item.index" :key="item.index">
                <i :class="item.icon"></i><span slot="title">{{ item.title }}</span>
            </el-menu-item>
        </template>
    </template>
</el-menu>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

这样就完成了一个动态的导航菜单。

通过 Header 组件中的一个按钮来触发 Sidebar 组件展开或收起，涉及到了组件之间传递数据，这里通过 Vue.js 单独的事件中心（Event Bus）管理组件间的通信。

const bus = new Vue();
1

在 Header 组件中点击按钮时触发 collapse 事件：

bus.$emit('collapse', true);
1

在 Sidebar 组件中监听 collapse 事件：

bus.$on('collapse', msg => {
    this.collapse = msg;
}
1
2
3

)

图表自适应

vue-manage-system 中用到的图表插件是 vue-schart，是把一个基于 canvas 的图表插件 schart.js 进行了封装。要做到图表能够自适应宽度，随着 window 或者父元素的大小改变而重新渲染，如果图表插件里没实现该功能，就需要自己手动实现。

vue-schart 中提供了 renderChart() 的方法可以重新渲染图表，Vue.js 中父组件调用子组件的方法，可以通过 $refs 进行调用。

<schart ref="bar" canvasId="bar" :data="data" type="bar" :options="options"></schart>
1

然后监听 window 的 resize 事件，调用 renderChart() 方法重新渲染图表。

import Schart from 'vue-schart';
export default {
    components: {
        Schart
    },
    mounted(){
        window.addEventListener('resize', ()=>{
            this.$refs.bar.renderChart();
        })
    }
}
1
2
3
4
5
6
7
8
9
10
11

不过也要记得组件销毁时移除监听哦！监听窗口大小改变完成了，那父元素大小改变呢？因为父元素宽度设为百分比，当侧边栏折叠的时候，父元素的宽度发生了变化。但是 div 并没有 resize 事件，无法监听到它的宽度改变，但是触发折叠的时候，我们是知道的。那么是否可以通过监听到折叠变化的时候，再调用渲染函数重新渲染图表呢？那么还是通过 Event Bus 监听侧边栏的改变，并在 300ms 后重新渲染，因为折叠时候有 300ms 的动画过程

bus.$on('collapse', msg => {
    setTimeout(() => {
        this.$refs.bar.renderChart();
    }, 300);
});
1
2
3
4
5

多标签页

多标签页，也是提 issue 最多的一个功能。

当在 A 标签页输入一些内容之后，打开 B 标签再返回到 A，要保留离开前的状态，因此需要使用 keep-alive 进行缓存，而且关闭之后的标签页就不再缓存，避免关闭后再打开还是之前的状态。keep-alive 的属性 include 的作用就是只有匹配的组件会被缓存。include 匹配的不是路由名，而是组件名，那么每个组件都需要添加 name 属性。

在 Tags 组件中，监听路由变化，将打开的路由添加到标签页中：

export default {
    data() {
        return {
            tagsList: []
        }
    },
    methods: {
        setTags(route){
            const isExist = this.tagsList.some(item => {
                return item.path === route.fullPath;
            })
            if(!isExist){
                this.tagsList.push({
                    title: route.meta.title,
                    path: route.fullPath,
                    name: route.matched[1].components.default.name
                })
            }
        }
    },
    watch:{
        $route(newValue, oldValue){
            this.setTags(newValue);
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

在 setTags 方法中，将一个标签对象存到标签数组中，包括title（标签显示的title），path（标签的路由地址），name（组件名，用于include匹配的）。路由地址需要用 fullPath 字段，如果使用 path 字段，那如果地址后面带有参数，就都没保存起来了。

在 Home 组件中，监听到标签的变化，缓存需要的组件。

<keep-alive :include="tagsList">
    <router-view></router-view>
</keep-alive>
1
2
3
export default {
    data(){
        return {
            tagsList: []
        }
    },
    created(){
        // 只有在标签页列表里的页面才使用keep-alive，即关闭标签之后就不保存到内存中了。
        bus.$on('tags', msg => {
            let arr = [];
            for(let i = 0, len = msg.length; i < len; i ++){
                // 提取组件名存到tagsList中，通过include匹配
                msg[i].name && arr.push(msg[i].name);
            }
            this.tagsList = arr;
        })
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/502823