vue2.x使用小经验总结

1.跳转路由时显示在网页顶端

使用：
 created(){
          this.upper();
      },

方法
methods:{
        upper() {
          window.scrollTo(0,0);
        }
      }

2.图片404，加载默认图片

<img style="width: 100px;" :src="'http://img.../'+item.IMGNAME" :onerror="errorImg"  alt="" />
data(){
    return:{
        errorImg:'this.src="' + require('../assets/errorImg.png') + '"',
    }
}
3.背景行内路径使用
<template>
    <div class="hhh" :style="{background: 'url(' + img + ')'}"></div>
</template>
<script>
    data(){
    img: require('../assets/banner_images.jpg')
}
</script>
<style>
    .hhh{
    width:100%;
    height: 520px;
  }
</style>
4.Vue的渐进图像加载插件使用方法
01.npm install vue-progressive-image
02.在main.js中配置
import VueProgressiveImage from 'vue-progressive-image'
Vue.use(VueProgressiveImage)
03.实践使用
<progressive-background class="hhh" :src="img" blur="30"/>
04.vue-cli - $ vue init webpack *** 报错
问题：? Project name (project) vue-cli · inquirer.prompt(...).then is not a function
解决方案：用cnpm install -g vue-cli，重新安装
05.vue中网址中小图标添加方法
(1).在index.html的head中加入<link rel="shortcut icon" type="image/x-icon" href="./static/favicon.ico" rel="external nofollow" />
(2).在webpack.dev.conf.js中配置
 plugins: [
    new webpack.DefinePlugin({
      'process.env': config.dev.env
    }),
    // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
    // https://github.com/ampedandwired/html-webpack-plugin
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true,
      favicon: './static/favicon.ico'  //配置
    }),