第一个项目 主页改造 总结

需要总结的东西 ：
1.vue
2.css
3.less
来源 ：
0.模范代码（old w）
1.网页问题
2.收藏夹
3.内容博客

1.需求：登录页面不显示公共导航

1. 在router.js里分开写layout
2. 

参考：

1. vue导航栏/公共组件在部分页面显示，部分页面不显示的方法及其原理.
2. 【Vue】设置导航栏、侧边栏为公共页面
   .

1.banner

0）实现轮播

方法一：
参考：vue+swiper实现轮播.

1. 引入swiper失败
   版本问题，查看官网
   参考： 执行 npm install --save swiper/css/swiper.css 失败解决方案.

总结 vue中如何引入第三方JS库

待补充
3种引入方式
@import
import
@~
参考： vue中如何引入第三方JS库.

1)没有撑满
background-size: cover;
width:100%;
2)高度没有自适应
swiper组件的话，在.wxss文件添加如下。
swiper{
width: 100%;
height: calc(100vw*9/16);
}
参考 ： 解决轮播图图片显示不全问题.

2.图片没有居中
行内元素居中
text-align: center
line-height :行高

3.图文对半
图
display : flex ;
flex: 1；
文
display : flex ;
flex: 1；

4.2个图
display: flex;
justify-content : space-between;