vue--echarts 图标库、excel导出、面包屑组件、富文本框、地图、前端使用代理访问、监控生产环境or开发环境

本文链接：https://blog.csdn.net/weixin_51040108/article/details/127577463

本文介绍了Vue项目中如何使用echarts图表库，包括基础概念和实际应用；实现了Excel导出功能；讲解了面包屑组件的封装与使用；讨论了富文本框的应用场景及TinyMCE的集成；详细阐述了地图的集成，如百度地图的配置；探讨了vite构建配置，包括打包部署和压缩；分享了在后端未开启跨域时，前端如何通过代理访问；最后提到了如何通过process.env.NODE_ENV判断生产或开发环境。

摘要由CSDN通过智能技术生成

七、后端未开跨域资源共享，前端使用代理访问

一、echarts 图标库

1.echarts的基础

概念：将数据转换成图标的形式，更主观的看数据

在 echarts CDN by jsDelivr - A CDN for npm and GitHub 选择 dist/echarts.js，点击并保存为 echarts.js 文件。在项目中引入

在刚才保存 echarts.js 的目录新建一个 index.html 文件，内容如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <!--1. 引入 ECharts 图标库 -->
    <script src="echarts.js"></script>
  </head>
<body>
  <!-- 2.为 ECharts 准备一个定义了宽高的 DOM -->
  <div id="main" style="width: 600px;height:400px;"></div>
</body>
</html>

<html>
  <head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="echarts.js"></script>
  </head>
  <body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));

      // 指定图表的配置项和数据
      var option = {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {//x轴坐标上的数据
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},//y轴
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    </script>
  </body>
</html>
这样你的第一个图表

重点：数据集

2.项目中的使用

（1）安装echarts

npm install echarts --save

（2）在主界面index.html中引入echarts

（3）在platform中新建index.vue

//在项目中集成echarts的图
<div>
        <!-- 三栏布局定义四个容器 -->
        <el-row>
            <el-col :span="12">
                <div ref="mybar" class="bar-wrap"></div>
            </el-col>
            <el