Vue Element-UI-Plus学习感

因为前段时间，提前将工作搞完，开始了对Vue新框架的学习，然后也根据学到的内容写了一个移动端的项目，就想着怎么能同时适配移动端也能在浏览器中正常显示和运行呢？带着这个疑问，就研究了下，看看能不能有个什么三方插件能适配下，然而并没有。但是发现了一个很好开发PC端浏览器web的框架：就叫Element-UI.

花费了大概半个多月的时间吧，B站上找了个免费的教学视频学的Vue的ElementUI学习地址。

很全面，并且相当细节。关键还是免费的！

下面是一个用vue-element-ui完成的一个图表界面的代码和对应效果图：

<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator-class='el-icon-arrow-right'>
            <el-breadcrumb-item :to="{path:'/home'}">首页</el-breadcrumb-item>
            <el-breadcrumb-item>数据统计</el-breadcrumb-item>
            <el-breadcrumb-item>数据报表</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 卡片 -->
        <el-card>
            <!-- 图表 -->
            <div id="main" style="width:800px;height:400px;"></div>
        </el-card>
    </div>
</template>

<script>
    // 三方图表库
    import echarts from 'echarts'
    // 请求
    import {
        getReports
    } from '../../network/report.js'
    // 导入
    import _ from 'lodash' // 合并两个对象
    export default {
        name: 'Report',
        data() {
            return {
                options: {
                    title: {
                        text: '用户来源'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#E9EEF3'
                            }
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [{
                        boundaryGap: false
                    }],
                    yAxis: [{
                        type: 'value'
                    }]
                }
            }
        },
        mounted() {
            // 请求数据
            getReports().then(res => {
                console.log(res)

                let echarts = require('echarts')
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('main'));

                // 指定图表的配置项和数据，将两个对象合并
                const newData = _.merge(this.options, res.data)

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(newData);
            })
        },
    }
</script>

<style scoped>
    .el-card {
        margin-top: 15px;
    }
</style>

Vue+Element-UI开发的网页-统计图

个人感觉还是很香的，老师讲的通俗易懂，任何细节基本都考虑到了。

关键是，还有同学提供了免费的公网接口，这就更香了，本来以为还要自己搞假数据（本人目前不懂后端，正考虑学）。程序猿就是这样，大多的都很纯粹，很直接，乐于开源奉献。也希望更多的人如此吧，这样世界就会更加美好