vue的一些注意点

1、在vue 2.0中用 computed 替代 limitby ( limitbyvue1.0 中配合数组使用，限制数组元素的个数)

<div id="app">
    <ul>
        <li v-for="item in filterFruit">{{item}}</li>
    </ul>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            fruit: ['苹果', '橘子', '香蕉', '橙子', '菠萝', '葡萄']
        },
        computed: {
            filterFruit(){
                return this.fruit.slice( 0, 3 );
            }
        }
    })
</script>

---

2、vue中引入mui.js报错

'caller', 'callee', and 'arguments' properties may not be accessed on strict mode...

解决方法，在.babelrc中配置一项：

"ignore": [
    "./src/lib/mui/dist/js.js"
 ]

---

3、移动端滑动事件一直报错

Unable to preventDefault inside passive event listener due to...

解决方法，添加一句样式：

*{touch-action: none;}

---

4 v-for引入本地图片

<template>
    <mt-swipe :auto="4000">
        <mt-swipe-item v-for="item in swipeList">
        <img :src="item.img" alt="">
      </mt-swipe-item>
    </mt-swipe>
</template>

<script>
  export default {
    data(){
      return {
        swipeList: [
          { img: require( '../img/swipe-1.jpg' ) },
          { img: require( '../img/swipe-2.jpg' ) },
          { img: require( '../img/swipe-3.jpg' ) },
          { img: require( '../img/swipe-4.jpg' ) }
        ]
      }
    }
  }
</script>

---

5、CSS 多行省略失效 (-webkit-box-orient 失效)

网上的方法：

/* autoprefixer: off */
  -webkit-box-orient: vertical; 
  /* autoprefixer: on */

打包时必须使用这种方法打包，否则打包后 -webkit-box-orient: vertical 便会消失,网上解决方案是这样的，但是我在我的项目中发现不起作用，

解决方案:
optimize-css-assets-webpack-plugin这个插件的问题
注释掉webpack.prod.conf.js中下面的代码

new OptimizeCSSPlugin({
  cssProcessorOptions: config.build.productionSourceMap
    ? { safe: true, map: { inline: false } }
    : { safe: true }
}),

6、去掉提示

<script>
    // 配置是否允许vue-devtools检查代码，方便调试，生产环境中需要设置为false。
    Vue.config.devtools = false;
    // 阻止vue启动时生成生产消息。
    Vue.config.productionTip = false;
    new Vue({
        el: '#app',
        data: {
            msg: 'hello world'
        }
    })
</script>