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

7-3 主页轮播图实现

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

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

经试验，less要使用/deep/;

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”访问；