babel 工具

官网

babel => JS转译，高版本代码优雅降级,浏览器兼容

自动化构建工具 gulp || webpack

webpack工具

官网

webpack是一个模块打包器，将有依赖关系的模块，打包构建生成独立静态资源

概念

entry（入口）

入口起点(entry point) 指示 webpack 应该使用哪个模块，来作为构建其内部 依赖图(dependency graph) 的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。

默认值是 ./src/index.js 但你可以通过在 webpack configuration 中配置 entry 属性，来指定一个（或多个）不同的入口起点。

output （输出）

output 属性告诉 webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件。

主要输出文件的默认值是 ./dist/main.js，其他生成文件默认放置在 ./dist 文件夹中。

loader (装载器) 【面试知道那些loader?】

webpack 只能理解 JavaScript 和 JSON 文件，这是 webpack 开箱可用的自带能力。loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效 模块，以供应用程序使用，以及被添加到依赖图中。

plugin （插件） 【面试：用过哪些？】

loader 用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量。

mode （模式）

其默认值为 production 你可以启用 webpack 内置在相应环境下的优化

  • development - 开发模式
  • production - 生产模式

默认为 production

使用

  1. 创建目录webpack-demo
$ npm init -y #初始化a
npm install webpack webpack-cli --save-dev #（此工具用于在命令行中运行 webpack）
  1. 创建目录结构/文件/内容
  2. 打包构建
  3. 创建配置文件
  4. loader使用
  • style-loader / css-loader 生成style,识别css
  • sass-loader / less-loader 生成css
  • file-loader / url-loader 文件图像=>base64进制
  • vue-loader
  • babel-loader
  • Vue loader

? 图片转成base64 => 用编码实现图片

6.plugin 使用

用hash值来判断文件是否修改，每次修改后引入文件十分困难，使用插件

  • html-webpack-plugin

7.webpack-dev-server

echarts图表库

安装

npm install echarts --save

引入Echarts

import * as echarts from 'echarts';

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 绘制图表
myChart.setOption({
  title: {
    text: 'ECharts 入门示例'
  },
  tooltip: {},
  xAxis: {
    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
  },
  yAxis: {},
  series: [
    {
      name: '销量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20]
    }
  ]
});

Echarts配置项

tooltip:{ // 配置会有提示框
	/*触发类型 默认值item:图形触发 axis:坐标轴触发*/
    trigger:'axis' ，
    /* 坐标轴指示器 默认值line:显示一个实线 shadow:阴影效果 cross 十字准星*/
    axisPoniter:{
        type:'cross'
    }，
    /* 悬浮弹框 默认true：显示 false:不显示*/
    showContent:false,
    /* 悬浮层样式 */
    backgroundColor:"",
    borderColor:"",
    borderWidth:5,
    textStyle:{
       color:'yellow'
    }
    /* 悬浮层内容自定义formatter函数 */
   formatter(params){
       consolr.log(params) // params数组对象
        for (let i = 0; i < params.length; i++) {
            return '日期：' + params[i].data.data + '\n' + '阅读量：' + params[i].data.value
        }// 遍历数组对象，return 的值就是提示框内容
   }
   ----所以series中的data 我们也可以改成数组对象 ----------------------
   series:[
        { value: '560', data: '2022-05-20' },
        { value: '250', data: '2022-05-24' },
   ]
    
}

formatter :

formatter:'{a}:{b}{c}件'

a:系列名称 series:name

series ：[]

data:[对应销量多少]