随心记录

Bug不空,誓不成佛

  menu
70 文章
14633 浏览
2 当前访客
ღゝ◡╹)ノ❤️

Vue 框架学习(五)

学习内容

  • nprogress进度条
  • echarts制作数据图表
  • 项目打包

nprogress 进度条

项目每个路由执行的时候,在顶部显示一个进度条,明确告知用于程序正在执行,提高用户体验,进度条库是前端中常见的库之一,nprogress是轻量级的ajax进度条应用,灵感来自Google, YouTube, and Medium。
纳米级的进度条。 具有逼真的动画涓涓细流来说服你的用户,something is happen!

  • 参考网站:
  • 主要使用方法:
    	NProgress.start() - 显示进度条,稍微增加【显示】
    	NProgress.set(0.4) - 设置百分比【显示】
    	NProgress.inc() - 显示进度条,稍微增加【显示】
    	NProgress.done() - 完成进度(进度条消失)【关闭】
    
  • 步骤:
    • yarn add nprogress
    • 引入 在router路由文件中对 js和css文件做引入
      	// 引入nprogress相关的js和css文件
      	import NProgress from 'nprogress'
      	import 'nprogress/nprogress.css'
      
    • 使用 在router路由中做具体配置
      前置路由守卫 处开启进度条 beforeEach()
      	 // 开启进度条
      	  NProgress.inc()
      

      后置路由守卫 处关闭进度条 afterEach()

      	  // 完成进度条显示了
      	  NProgress.done()
      

      路由除了有前置路由守卫,还有后置路由守卫,就是路由执行完毕(页面加载好了)要做一些事情

  • 注意:
    • 如果对进度条的样式有修改的需要,可以操作如下文件达成:node_modules\nprogress\nprogress.css

echarts 数据图表

商业级数据图表,它是一个纯JavaScript的图表库,兼容绝大部分的浏览器,底层依赖轻量级的canvas类库ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验,赋予了用户对数据进行挖掘、整合的能力。
支持的图表:折线图(区域图)、柱状图(条状图)、散点图(气泡图)、K线图、饼图(环形图)、雷达图(填充雷达图)、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等各种图表

绘制简单图表

  • yarn add echarts
  • 引入echartsimport echarts from 'echarts'
  • 制作methods方法paintPic,内部实例化echarts对象并进行图像制作
  • mounted中调用 paintPic 方法执行
    因为mounted中 关于页面元素都已经渲染好了
  • 示例代码如下:
    	<template>
    	  <!--卡片区-->
    	  <el-card class="box-card">
    	    <!--命名插槽,头部内容设置-->
    	    <div slot="header" class="clearfix">
    	      <span>粉丝统计</span>
    	    </div>
    	    <!--匿名插槽,卡片主体内容-->
    	    <div class="text item">
    	      <div id="main" style="width:600px;height:400px"></div>
    	    </div>
    	  </el-card>
    	</template>
    
    	<script>
    	// 引入echarts
    	import echarts from 'echarts'
    
    	export default {
    	  name: 'Fans',
    	  mounted () {
    	    this.paintPic()
    	  },
    	  methods: {
    	    paintPic () {
    	      // 基于准备好的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]
    	        }]
    	      })
    	    }
    	  }
    	}
    	</script>
    
    	<style lang="less" scoped>
    	</style>
    

绘制其他效果图表

  • 绘制饼图的示例代码:
    只需改 paintPic() 即可
    	paintPic () {
    	  // 基于准备好的dom,初始化echarts实例
    	  var myChart = echarts.init(document.getElementById('main'))
    	  // 绘制图表
    	  myChart.setOption({
    	    title: {
    	      text: '某站点用户访问来源',
    	      subtext: '纯属虚构',
    	      x: 'center'
    	    },
    	    tooltip: {
    	      trigger: 'item',
    	      formatter: '{a} <br/>{b} : {c} ({d}%)'
    	    },
    	    legend: {
    	      orient: 'vertical',
    	      left: 'left',
    	      data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
    	    },
    	    series: [
    	      {
    	        name: '访问来源',
    	        type: 'pie',
    	        radius: '55%',
    	        center: ['50%', '60%'],
    	        data: [
    	          { value: 335, name: '直接访问' },
    	          { value: 310, name: '邮件营销' },
    	          { value: 234, name: '联盟广告' },
    	          { value: 135, name: '视频广告' },
    	          { value: 1548, name: '搜索引擎' }
    	        ],
    	        itemStyle: {
    	          emphasis: {
    	            shadowBlur: 10,
    	            shadowOffsetX: 0,
    	            shadowColor: 'rgba(0, 0, 0, 0.5)'
    	          }
    	        }
    	      }
    	    ]
    	  })
    	}
    

项目打包

  1. 项目开发是通过import这样的模块化技术完成的,而import代码在浏览器中不能直接运行
  1. 项目开发是通过vue单文件组件方式开发完成的,浏览器也不能直接运行vue这样的文件
  2. 项目开发是通过less进行css样式控制的
  3. 项目开发是通过elementui组件库开发
  4. 项目开发是通过es6/es7等高级js技术完成的
    ...
    基于以上若干,项目发布之前需要做打包处理,就是把import代码变为浏览器可以识别的代码,把vue单文件组件代码也解析称为浏览器可以识别的,less变为css、elementui变为具体的html标签、es6/es7变为es5兼容性更强的代码,这个过程是“打包

打包完毕,生成的应用程序文件只有一个,名称为index.html,网站所有请求都需要执行该文件,就称为单页面应用程序项目(spa),当然这个index.html文件会引入许多js、css等文件

打包

  • 在项目根目录执行如下指令:
npm run build   // 物理打包
或
.\node_modules\.bin\vue-cli-service build --report  // 打包 同时 要生成详情报告

以上两个指令打包完毕,会在根目录生成dist目录,内部都是打包好的文件
执行第二种打包指令,会在dist里边生成report.html文件,并且支持直接访问,就可以看到各个打包内容部分的占比情况

  • 给项目做打包操作,生成许多js、css、img、字体库文件
  • 其中的css文件:
    • 每个vue组件文件内部的css都要独立打包到具体的文件中
    • global.css要打包到指定文件
    • 富文本编辑器的css样式打包到指定文件
    • elementui组件库的css样式打包值指定文件
  • 其中的 js 文件:
    • 每个vue组件文件内部的js都要独立打包到具体的文件中
    • node_modules内部核心的项目级的js被独立打包(vue)
    • 富文本编辑器的js内容单独打包
    • vue内容也给单独打包

打包优化

  • 查看各个项目打包后的内容占比:
    • 执行指令:.\node_modules\.bin\vue-cli-service build --report
    • 之后浏览器执行运行打包好的report.html文件
    • 主要文件内容在打包文件中占比如下图所示:1564475284060.png
  • 对项目的打包文件做体积减少操作,用到东西就打包,不用的就舍弃,再者有些模块能通过第3方提供就直接使用,总之 要把打包文件的体积做到最小
  • 好处:
    • 节省网络带宽,节省money
    • 首屏数据加载快、增强用户体验

优化处理(externals)

互联网有许多公司已经对公共的模块文件(axios、vue、echarts、nprogress、vue-router)做了提供,我们要直接拿过来使用,这样自己不用准备了,项目打包时也不用引入了,就使得打包文件体积减少

  • 配置使用第三方公司网络资源步骤
    • 做vue.config.js文件配置
      	module.exports = {
      	  lintOnSave: true, // 文件保存时就做eslint规范检测
      	  devServer: {// 实时保存、编译的配置段
      	    open: true, // 自动开启浏览器
      	    port: 12306, // 服务运行端口
      	    host: '127.0.0.1' // 运行服务的主机名
      	  },
      	  configureWebpack: config => {
      	    // 配置 externals
      	    // 防止将某些 import 的包(package)打包到 bundle 中,
      	    // 而是在运行时(runtime)再去从外部获取这些扩展依赖
      	    config.externals = {
      	      // 模块名(from后边的名字): 构造函数名称(文件内部提供的全局变量名字)
      	      vue: 'Vue',
      	      axios: 'axios',
      	      'vue-router': 'VueRouter',
      	      echarts: 'echarts',
      	      nprogress: 'NProgress',
      	    }
      	  }
      	}
      

      上述配置:
      devServer说明: https://cli.vuejs.org/zh/config/#devserver
      configureWebpack说明: https://cli.vuejs.org/zh/config/#configurewebpack

    • 打开public/index.html文件(项目主模板文件),做第三方资源的引入配置
      第三方资源提供网址:https://www.bootcdn.cn/ (其他的也有,这个比较稳定)
      	<!DOCTYPE html>
      	<html lang="en">
      	  <head>
      	    <meta charset="utf-8" />
      	    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      	    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
      	    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
      	    <title>topline</title>
      	    <!-- -引入第3方网站提供的静态资源- -->
      	    <script src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script>
      	    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.runtime.min.js"></script>
      	    <script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js"></script>
      	    <script src="https://cdn.bootcss.com/echarts/4.3.0/echarts.min.js"></script>
      	    <script src="https://cdn.bootcss.com/nprogress/0.2.0/nprogress.min.js"></script>
      	  </head>
      	  <body>
      	    <div id="app"></div>
      	  </body>
      	</html>
      
  • 以上两个步骤配置完毕
    • (物理打包时)项目中再import引入相关的资源,就不会走本身的,转而执行第三方的
    • import等语句不要删除了,因为开发时候npm run serve还需要呢
  • 注意:
    • 项目内部的import引入各个资源的代码不用变动
    • 第三方网站并不会提供全部的公共资源(提供哪个就用哪个)
希望所有的 Bug 都会报错~