一、mixin与extend
mixin
let mixin = { // 定义一个mixin
data() { // 混入mixin,也可以混入methods、components等等
return {
name: ''
}
},
created: function () { console.log(1) }
}
let vm = new Vue({
created: function () { console.log(2) },
mixins: [mixin] //在Vue实例上面挂载mixin
})
// => 1
// => 2
mixin的作用:为了减少不同的组件里面的重复代码
执行顺序:mixin里面的钩子函数会比原Vue实例对象里面的钩子函数先执行
extend
extend目的:允许声明扩展另一个组件,而无需使用 Vue.extend,这主要是为了便于扩展单文件组件
var CompA = { ... }
// 无需调用 `Vue.extend` 来继承 CompA,使用Vue里面的extends即可
var CompB = {
extends: CompA,
...
}
可以参考官网的mixin
或者另一个官网的mixin
二、fastclick
fastclick可以解决移动端300ms的点击延迟
/*fastclick安装*/
npm install fastclick --save
/*以下的操作是在main.js里面完成的*/
/*导入*/
import FastClick from 'fastclick'
/*调用attach方法*/
FastClick.attach(document.body);
参考ntt小小图
来自:https://blog.csdn.net/ningtt/article/details/74625629
也可以查看github上面的fastclick
三、图片懒加载
图片懒加载:图片需要显示在屏幕上时,再加载
插件:vue-lazyload
安装
npm i vue-lazyload -S
main.js:
import Vue from 'vue'
import App from './App.vue'
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload)
// or with options
Vue.use(VueLazyload, {
preLoad: 1.3,
error: 'dist/error.png',
loading: require('dist/loading.gif'), // 注意这里是require,因为require可以加载图片,而import是不行的
attempt: 1
})
new Vue({
el: 'body',
components: {
App
}
})
template:
<ul>
<li v-for="img in list">
<img v-lazy="img.src" > // 需要把img标签的src属性改为v-lazy
</li>
</ul>
一些其他的选项:
以上参考github上面的hilongjw/vue-lazyload
来源:https://github.com/hilongjw/vue-lazyload
四、单位转换插件
postcss-px-to-viewport:
/*安装*/
npm install postcss-px-to-viewport --save
/*根目录下创建一个 postcss.config.js 文件*/
module.exports = {
plugins:{
autoprefixer:{},
"postcss-px-to-viewport":{
unitToConvert: 'px', // 需要转换的单位,默认为"px"
viewportWidth: 375, // 视窗的宽度,对应的是我们设计稿的,iPhone6的宽度
viewportHeight: 1334, // 视窗的高度,根据375设备的宽度来指定,一般指定667,也可以不配置
unitPrecision: 13, // 指定`px`转换为视窗单位值的小数位数(很多时候无法整除)
propList: ['*'], // 能转化为vw的属性列表
viewportUnit: 'vw', // 指定需要转换成的视窗单位,建议使用vw
fontViewportUnit: 'vw', // 字体使用的视口单位
selectorBlackList: ['.ignore', '.hairlines'], // 指定不转换为视窗单位的类,可以自定义,可以无限添加,建议定义一至两个通用的类名
minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位,你也可以设置为你想要的值
mediaQuery: false, // 允许在媒体查询中转换`px`
replace: true, // 是否直接更换属性值,而不添加备用属性
exclude: [
/RightBar/,
/gotop.vue/,
], // 忽略某些文件夹下的文件或特定文件,例如 'node_modules' 下的文件
landscape: false, // 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
landscapeUnit: 'vw', // 横屏时使用的单位
landscapeWidth: 1134 // 横屏时使用的视口宽度
},
}
}
来自Komorebi_
原文链接:https://juejin.im/post/5d415603e51d4561d044cc51
px2rem-loader:
可查看链接丑小喵喵
来源:https://blog.csdn.net/qq_39851888/article/details/100049651
题外话:Vue里面的created是创建完Vue对象时触发,mounted是挂载完DOM对象(此时的img不一定会加载完)时触发,updated是数据更新后是触发
本文只用于个人学习与记录