vue2.0开发常见问题-原创手记-慕课网

1、scoped能让样式只作用在当前组件内

<style lang="scss" scoped>

</style>

2、wepack对img src的编译问题
webpack对各种类型的文件支持的很完美，但是对于img src引入的图片资源却是无法解析。对于img v-bind:src引入的图片资源，webpack只能解析为字符串并不能够很好的编译。对此搜罗了一些解决方法
1）就是直接避免使用img ，有img的地方改为用div，或者其他标签写成background的方式
2）采用require模块的方式引入，比如如下：

<div class="goodsItem" v-for="x in goodsList" :key="x.goodsId">
                <img :src="x.img"  alt="">
                <p class="goodsName">{{x.goodsName}}</p>
                <p class="goodsPrice">￥{{x.goodsPrice}}</p>
                <div class="addCartBtn">加入购物车</div>
            </div>

这边原本是想要循环goodsList里面的数据，将里面的商品图片goodsImg循环出来判断到img src属性上，但是这样做webpack不识别，只能够对原始数据处理，采用require的方式重新定义了，如下：

for(var i=0;i<res.data.goodsList.length;i++){
                        _this.goodsList[i].img = require('../../public/images/'+res.data.goodsList[i].goodsImg)
                     }

3、axios的引入
axios使用不能像vue-rosurce一样，直接使用vue.use()这种方式，但是我们可以将axios绑定在Vue.prototype原型链上，然后调用的使用this.method类型的方式来调用

Vue.prototype.$ajax = axios