内容简介:src/main.js 导入import并使用use插件在vue中集成echarts可以通过两种方式集成:
1. Vue.js devtools
用于开发调试Vue.js的一个必备插件。可以在Chrome中的扩展程序中直接安装,也可以本地文件的方式安装。
2. vue-lazyload 图片懒加载
2.1 安装 和 使用插件
cnpm install vue-lazyload --save
src/main.js 导入import并使用use插件
import VueLazyload from 'vue-lazyload' Vue.use(VueLazyload) // 也可以配置一些选项, 建议使用这种配置方式,配置一些参数 Vue.use(VueLazyload, { preLoad: 1.3, error: 'dist/error.png', loading: 'dist/loading.gif', attempt: 1 })
key | description | default | options |
---|---|---|---|
preLoad |
proportion of pre-loading height(预加载高度比例) | 1.3 |
Number |
error |
src of the image upon load fail(图片路径错误时加载图片) | 'data-src' |
String |
loading |
src of the image while loading(预加载图片) | 'data-src' |
String |
attempt |
attempts count(尝试加载图片数量) | 3 |
Number |
listenEvents |
events that you want vue listen for (想要监听的vue事件) 默认['scroll']可以省略, 当插件跟页面中的动画或过渡等事件有冲突是, 可以尝试其他选项 |
|
Desired Listen Events |
adapter |
dynamically modify the attribute of element (动态修改元素属性) |
{ } |
Element Adapter |
filter |
the image's listener filter(动态修改图片地址路径) | { } |
Image listener filter |
lazyComponent |
lazyload component | false |
Lazy Component |
dispatchEvent |
trigger the dom event | false |
Boolean |
throttleWait |
throttle wait | 200 |
Number |
observer |
use IntersectionObserver | false |
Boolean |
observerOptions |
IntersectionObserver options | { rootMargin: '0px', threshold: 0.1 } | IntersectionObserver |
2.2 需要懒加载的图片绑定 v-bind:src 修改为 v-lazy
<template> <div> <!-- <img v-bind:src="img"> --> <img v-lazy="img"> </div> </template> <script> export default { name: 'HelloWorld', data () { return { img: 'https://avatar.csdn.net/0/F/7/3_vbirdbest.jpg' } } } </script>
3. echarts
在vue中集成echarts可以通过两种方式集成:
- echarts
- vue-echarts
注意:echarts和vue-echarts 不要同时使用。
官方示例: https://echarts.baidu.com/examples/
1 安装echarts依赖
cnpm install echarts -S
- HelloWorld.vue
<template> <div ref="chartOne" :style="{width: '300px', height: '300px'}"></div> </template> <script> // 引入Echarts主模块 let echarts = require('echarts/lib/echarts') // 引入柱状图 require('echarts/lib/chart/bar') // 引入圆饼图 require('echarts/lib/chart/pie') // 引入所需组件 require('echarts/lib/component/tooltip') require('echarts/lib/component/legend') export default { name: 'Foo', // 创建图表一 methods: { createChartOne () { let chartOne = echarts.init(this.$refs.chartOne) chartOne.setOption({ title: { text: '在Vue中使用echarts' }, tooltip: {}, xAxis: { data: ['iOS', 'Vue', 'Java', 'GO'] }, yAxis: {}, series: [{ name: '热度', type: 'bar', data: [5, 6, 9, 6] }] }) } }, mounted () { this.createChartOne() } } </script>
4. vue-amap 高德地图
vue-amap是一套基于Vue 2.0和高德地图的地图组件。
官方文档 https://elemefe.github.io/vue-amap ,具体使用方法可以参考node_modules/vue-amap/README.md 文档中有详细使用方法。
相关文章 https://www.jianshu.com/p/bde9526ad756
5. moment.js
moment.js 日期处理类库。中文网站: http://momentjs.cn/
- 安装
cnpm install moment --save
- 在使用的组件中导入
<template> <div> {{ new Date() | dateFrm}} </div> </template> <script> import moment from 'moment' export default { name: 'HelloWorld', filters: { dateFrm: function (value) { return moment(value).format('YYYY-MM-DD HH:mm:ss') } } } </script>
注意:moment.js中的日期格式化与其它语言如(Java)中的格式不太一样。
格式代码 | 说明 | 返回值例子 |
M | 数字表示的月份,没有前导零 | 1到12 |
MM | 数字表示的月份,有前导零 | 01到12 |
MMM | 三个字母缩写表示的月份 | Jan到Dec |
MMMM | 月份,完整的文本格式 | January到December |
Q | 季度 | 1到4 |
D | 月份中的第几天,没有前导零 | 1到31 |
DD | 月份中的第几天,有前导零 | 01到31 |
d | 星期中的第几天,数字表示 | 0到6,0表示周日,6表示周六 |
ddd | 三个字母表示星期中的第几天 | Sun到Sat |
dddd | 星期几,完整的星期文本 | 从Sunday到Saturday |
w | 年份中的第几周 | 如42:表示第42周 |
YYYY | 四位数字完整表示的年份 | 如:2014 或 2000 |
YY | 两位数字表示的年份 | 如:14 或 98 |
A | 大写的AM PM | AM PM |
a | 小写的am pm | am pm |
HH | 小时,24小时制,有前导零 | 00到23 |
H | 小时,24小时制,无前导零 | 0到23 |
hh | 小时,12小时制,有前导零 | 00到12 |
h | 小时,12小时制,无前导零 | 0到12 |
m | 没有前导零的分钟数 | 0到59 |
mm | 有前导零的分钟数 | 00到59 |
s | 没有前导零的秒数 | 1到59 |
ss | 有前导零的描述 | 01到59 |
X | Unix时间戳 | 1411572969 |
6. utility
GitHub地址: https://github.com/node-modules/utility
utility是一套实用 工具 类,使用非常简单直接看GitHub地址或者npm安装之后看该插件下的README.md文件,主要包括以下工具方法:
- 加密
- md5
- sha1
- sha256
- hmac
- 编码解码
- base64encode
- base64decode
- escape : html特殊字符转义
- unescape
- encodeURIComponent
- decodeURIComponent
- Date
- accessLogDate
- logDate
- YYYYMMDDHHmmssSSS
- YYYYMMDDHHmmss
- YYYYMMDD
- timestamp
- Number
- isSafeNumberString
- toSafeNumber
- random
- map
- map
- log
- String
- split
- replace
- JSON
- strictJSONparse
- readJSONSync
7. 工具类 util
一个小工具类。
http://nodejs.org/api/util.html安装
cnpm install util
使用
import util from 'util' util.format('%s:%s', 'foo', 'bar')
对于项目中常用的工具方法最好自己整理出来,统一使用自己写的工具类,要不然工具类有很多会引入很多,而且每个开发者都不一定都知道每个第三方工具类都包含什么方法,如果不知道很可能自己会再写一份实现,容易重复造轮子,如果自己将常用的工具方法都收集好统一使用自己的工具类,编码风格比较统一,没有就往自己工具类中添加,有就使用。
实用工具方法:
// 生产环境下禁止输出日志 debugLog (str) { if (process.env.NODE_ENV !== 'production') { console.log(str) } }
8. nprogress 页面顶部进度条
当路由切换事会在浏览器的顶部出现一个蓝色进度条用于表示路由切换的进度,并在又上角有个蓝色loading的动画。
一般情况下切换到目标路由时,在目标路由中的生命周期中可能会做一些处理(如请求接口等),这些操作会有一定的耗时,所以使用进度条来表示路由切换的进度。
CSDN在切换路由时就有这种效果。只不过CSDN的进度条是红色的,右上角没有loading。
GitHub: https://github.com/rstacruz/nprogress
1. 安装
cnpm install --save nprogress
2. 在main.js中导入
import NProgress from 'nprogress' import 'nprogress/nprogress.css' // 配置NProgress选项 // NProgress.configure({ }) // 在路由页面跳转使用 router.beforeEach((to, from, next) => { // 开始进度条 NProgress.start() // 继续路由 next() }) router.afterEach(transition => { // 结束进度条 NProgress.done() })
3. HelloWorld.vue
<template> <div> <router-link to="/foo">Go to Foo</router-link> </div> </template>
Foo.vue
<template> <div> Foo Vue </div> </template>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。