vue实战相关知识点总结(二)（vue实战技巧）

vue动态绑定背景图片

// tempalte
<div :style="{'backgroundImage': 'url(' + imgList[randomIndex] + ')'}"></div>
// script 
data () {
 return {
 imgList: [
 require('../assets/images/bg1.jpg'),
 require('../assets/images/bg2.jpg'),
 require('../assets/images/bg3.jpg')
 ],
 randomIndex: 0
 }
},

vue开发和生产构建时的配置修改

// config/index.js(静态资源引入问题)
build: {
 assetsPublicPath: './', // (修改后)
}
// build/utils.js(解决图标问题)
return ExtractTextPlugin.extract({
 use: loaders,
 publicPath: '../../', // 这里是修改后的
 fallback: 'vue-style-loader'
})

手机移动端使用适配问题，修改配置项

// 第一种做法(这种做法可以使用适配elementui，做的时候直接使用px为单位)
`npm install --save lib-flexible px2rem-loader`安装
// build/utils.js 中配置
const px2remLoader = {
 loader: 'px2rem-loader',
 options: {
 remUnit: 75(设置为75能够解决引入element-ui的适配问题，所以设计稿尽量为750的)
 }
}
找到generateLoaders函数修改启动的loaders
const loaders = options.usePostCSS ? [cssLoader, postcssLoader,px2remLoader] : [cssLoader,px2remLoader]
// 另一种做法(不能适配elementui，需要以先计算rem但是可以是任意的设计稿)
// assets/js/remConfig.js
export default function() {
 // var devicePixelRatio = 1;
 // var scale = 1 / devicePixelRatio;
 // document.querySelector('meta[name="viewport"]').setAttribute('content','initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
 // 7.5根据设计稿的横向分辨率/100得来
 // alert(document.documentElement.clientWidth)
 var deviceWidth = document.documentElement.clientWidth;
 // var deviceWidth = window.screen.availWidth
 // alert(navigator.userAgent)
 // alert(deviceWidth)
 // console.log(navigator.userAgent)
 if(deviceWidth > 750) {
 // deviceWidth = 750;
 deviceWidth = 7.5 * 50;
 }
 document.documentElement.style.fontSize = deviceWidth / 7.5 + 'px';
 // 禁止双击放大
 document.documentElement.addEventListener('touchstart', function (event) {
 if (event.touches.length > 1) {
 event.preventDefault();
 }
 }, false);
 var lastTouchEnd = 0;
 document.documentElement.addEventListener('touchend', function (event) {
 var now = Date.now();
 if (now - lastTouchEnd <= 300) {
 event.preventDefault();
 }
 lastTouchEnd = now;
 }, false);
}
// main.js 中调用
import remConfig from './assets/js/remConfig';
import 'lib-flexible/flexible.js'
remConfig()

vue中的页面一些监听js会被别的页面调用

// window,document的监听事件可以在destroy中清除
destory(){
 document.body.removeEventListener('onscroll', this.scroll) // 记得移除监听
}
// 使用keep-alive缓存的可以在钩子deactivated 中清除
deactivated (){
 window.removeEventListener('scroll',this.scrollPage)
},
destroyed (){
 window.removeEventListener('scroll',this.scrollPage)
}

sass 安装

cnpm install --save-dev node-sass sass-loader vue-style-loader

修改webpack.base.config.js中的module

{
 test: /\.scss$/,
 loaders: ['style','css','sass']
 }

vue 打包多行省略号失效

// 解决办法是加上特定注释
{
 overflow : hidden;
 text-overflow: ellipsis;
 display: -webkit-box;
 -webkit-line-clamp: 3;
 /*! autoprefixer: off */
 -webkit-box-orient: vertical;
 /* autoprefixer: on */
}

vue 监听路由的变化

watch: {
 $route(){
 this.initPage()
 }
}

vue的滑动插件

vue-scroller插件

参照：https://www.jianshu.com/p/a39f5276ff0b