vue学习项目之去哪儿网笔记

7-3 主页轮播图实现

我的项目中的样式使用的是less，因为style标签使用了scoped属性，所以导致在父组件中编写的样式没有办法直接修改到子组件。这个时候要使用样式穿透>>>,如果>>>没有办法被编译，则可以写/deep/代替>>>.

.wrapper >>> .swiper-pagination-bullet-active{ background: #fff};
.wrapper /deep/.swiper-pagination-bullet-active{ background: #fff};

经试验，less要使用/deep/;webpack打包之后会把/deep/也打包进css,ios不识别这个/deep/，造成ui显示符合预期；

7-8 项目中使用axios

7-8-1 ajax请求的时候，地址的rewrite；webpack给vue-cli里面提供了机制，在config/index.js里面配置proxyTable；

dev: {
// Paths
assetsSubDirectory: ‘static’,
assetsPublicPath: ‘/’,
proxyTable: {
“/api”:{
target: ‘http://localhost:8080’,
pathRewrite:{
‘^/api’:’/static/mock’
}
}
},
//使用
axios.get(’/api/index.json’).then((response)=>{console.log(response)});
//配置proxyTable的“/api”的意思是当访问api目录下的内容时，如果是以api开头的，替换成“/static/mock”访问；