课程章节： 项目实战 - 旅游网站首页开发
主讲老师： Dell
课程内容：
今天学习的内容包括：
stylus所需依赖
-
安装 cnpm i stylus --save
-
安装 cnpm i stylus-loader —save
将本身的Home.vue当成一个父组件
创建一个components的文件 在里面定义子组件
使用方法是在 父组件中 引用子组件 import HomeHeader from ‘./components/Header’
并在 exports defalut里面注册子组件
用stylus写样式需要
<style lang="stylus" scoped>
scoped 只对当前组件有用 不会影响其他的组件
课程收获：
7.1 心得：
Vue项目首页 - header区域开发
stylus所需依赖
安装 npm install stylus --save
安装 npm install stylus-loader --save
将本身的Home.vue当成一个父组件
创建一个component的文件 在里面定义子组件
使用方法是 在父组件中 引用子组件
import HomeHeader from ‘./components/Header’
并在exports default 里面注册子组件
export default { name: 'Home', components: { Homeheader } }
在Home的模板中使用该组件
<template> <div> <home-header></home-header> </div> </template>
header由三部分组成：
<template>
<div class = "header">
<div class = "header-left">返回</div>
<div class = "header-input">输入城市/景点/游玩主题</div>
<div class = "header-right">城市</div>
</div>
</template>
加lang=“stylus”用stylus写样式
scoped只对当前组件有效 不会影响其他组件
<style lang="stylus" scoped>
.header display:flex
line-height: .86rem background:#00bcd4
color:#fff .header-left
width:.64rem float:left
.header-input flex:1 //中间内容自动撑开
margin-top: .12rem //设置上边距
margin-left: .2rem height: .64rem
line-height: .64rem background:#fff
border-radius:.1rem color: #ccc
.header-right width: 1.24rem
float:right
text-align:center
</style>
如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
flex:1等同于设置flex: 1 1 0% , flex-basis为每个元素初始宽度, 越接近0% 每个子项目分配宽度越平均
rem 的 r 代表 root，即 root em，表示以根元素的字体大小作为参照。
①.使用 Stylus 辅助开发，终端中运行以下命令：
npm install stylus --save
npm install stylus-loader --save
注意要重新启动编译项目
②.合理拆分组件，提高开发效率。
组件通过 import 方式导入
注意要填写子组件中 export default 中的 name 属性，声明组件名称
③.组件中使用 stylus 编写样式
<style lang="stylus" scoped>
lang 指定 stylus
scoped 声明样式仅在该组件中有效
stylus 使用缩进表示层级
7.2 心得：
要点一：使用iconfont步骤
1.官网：http://www.iconfont.cn/ 选择需要的icon
2.需要引入下载后的这四种字体文件.eot .svg .ttf .woff 及.css样式
3.在.css文件里修改url路径 加入./iconfont/ 注意base64不用加
4.在main.js中加入import 'styles/iconfont.css’
5.在Header.vue里面各个需要的div或者span标签中加入class=“iconfont”，中间写各个图标的复制码即可完成
要点二：代码优化
（一）、添加全局颜色 主题样式增加维护性：
1.在styles中增加varibles.styl文件里面写 $bgColor = #00bcd4，之后将Header.vue中的background: $bgColor。
2.在Header.vue中的style下加入 @import ‘~@/assets/styles/varibles.styl’ 即可
注意：
1.import在CSS中前必须加@ JS中不用加。
2.@import里面的内容 ‘ @’在@=src前加
（二）、因为styles目录路径不仅在Header.vue中和main.js中反复出现，所以得想办法干掉，起一个别名。
1.在build里面的webpack.base.conf.js中找到resolve下的alias加入 ‘styles’: resolve(‘src/assets/styles’) 。
2.在Header.vue中的styles下修改成 @import ‘ ~styles/varibles.styl’
3.同理，在main.js中也修改成 improt ‘styles/reset.css‘。。。。
4.修改完webapck配置项后一定要重启程序
7.4 心得：
创建git分支：
在码云上创建一个分支
通过git pull将线上分支代码拉取下来覆盖本地
使用命令git checkout 分支名 来切换本地git分支
本地开发完成后使用git push提交到线上分支
通过git checkout master切换到主支，然后使用命令git merge orgin/分支名 将线上的分支修改的内容合并到本地的主支代码，然后通过Git push将代码上传到主支仓库保存
工作流程：先在线上建立分支，然后本地下载原始代码并切换到分支进行开发，开发完成后上传到线上分支仓库保存，最后本地切换成主支将线上分支修改的内容合并到本地主支，最后上传到线上的主支仓库。
7.5 心得：
从远程获取代码并合并到本地的版本
git pull
Icons同样做一个padding-bottom：50%，宽高比，这里大概是50%，
相当于width:100%, height: 50%
里面每个小图标：
width：25%, padding-bottom: 25%；另外也要同样使用height: 0
图片处理：
外层包裹一层div.icon-img
.icon-img
position: absolute
top: 0
left: 0
right: 0
bottom: .44rem
box-sizing: border-box
padding: .1rem
图片自身：
display: block
height: 100%
margin: 0 auto
当margin和padding的值设置为百分比时，是指相对于最近的块级父元素width（非总宽度）的相应百分比的值，即使是margin-top、margin-bottom、padding-top、padding-bottom，设置为百分比时也是以最近块级父元素的width（非总宽度）为基准，而非height。
7.6 心得：
借助计算属性computed来完成两页图标的功能
computed:{
pages () {
const pages = [] //定义pages数组
this.iconList.forEach((item,index) => {//对iconList的每一项数据进行循环
const page = Math.floor( index / 8 )//当前下标对应的数据应该展示在轮播图的第几页
if(!pages[page]) {//如果pages下面的page不存在
pages[page] = []
}
pages[page].push(item)//将item添加到对应数组pages[page]中
})
return pages
}
}
计算属性的作用：
把一维的九条数组拆分成二维数组，页码和对应数据项关联
循环轮播页面 有多少页由pages数组决定
<swiper-slide v-for="(page,index) of pages" :key="index">
循环的数据就不是iconList，而是page
<div
class="icon"
v-for="item of page"
:key="item.id">
当图标下介绍文字太多时，采用…省略 借助css样式完成该功能
在mixins.styl中，定义ellipsis（）方法
ellipsis()
overfollow:hidden
white-space:nowrap
text-overflow: ellipsis
想在组件中调用该方法
@import '~styles/mixins.styl'
在css相关.icon-desc中调用该方法
ellipsis()
7.7 心得：
text-indent 属性规定文本块中首行文本的缩进。
注释：允许使用负值。如果使用负值，那么首行会被缩进到左边。
注意：在 CSS 2.1 之前，text-indent 总是继承计算值，而不是声明值。
用于定义块级元素中第一个内容行的缩进。这最常用于建立一个“标签页”效果。允许指定负值，这会产生一种“悬挂缩进”的效果。
设置item-info自动撑开屏幕宽度
flex:1
给li标签设置一像素边框，直接引入class
<li class = "item border-bottom">
设置ellipsis（）但是没有省略
在父级div item.info的css样式中设置
min-width: 0
7.8 心得：
把复杂的首页拆分成一个个小组件
通过<slot>插槽的形式把页面具体数据传递给swiper
应用场景：希望组件的一部分内容可以被父组件定制的时候
7.9 心得：
npm install axios --save 安装axios
git merge index-recommend 让新分支和以前的某个分支合并
性能优化：
首页由至少五个组件组成，每个组件都发一个ajax请求，首页就会发五个ajax请求
网站性能就会很低
优化为整个首页只发一个ajax请求
在Home.vue里发送ajax 获取ajax之后，可以传递给每一个子组件
引入axios
import axios from 'axios'
使用axios
数据挂载完成就请求ajax数据，数据获取成功就把结果打印出来
methods:{
getHomeInfo() {
axios.get('/api/index.json')//请求一个url
.then(this.getHomeInfoSucc)
},
getHomeInfoSucc (res) {
console.log(res)
}
},
mounted() {
this.getHomeInfo() //让页面挂载好之后执行该函数
}
在整个目录下，只有static目录下的内容可以被外部访问到
只有把静态文件放在static目录下才可以直接访问
在.gitignore中添加static/mock 这个文件夹就不会被提交到线上仓库以及本地的git仓库里
转发机制
把对api下面所有json文件的请求转发到本地的mock文件夹下:通过proxy代理
config/index.js中，在开发环境里的proxyTable配置
proxyTable: {
'api' : {//请求api目录时
target: ' ',//把请求转发到8080端口
pathRewrite: {//替换路径
‘ ^/api ': '/static/mock '//一旦请求的地址是以api开头的，把他替换请求到static/mock文件夹下
}
}
}
访问api下面index.ison的时候，在开发环境里Vue的脚手架工具会自动的把api替换成/static/mock
“ret”: true //代表服务器正确响应请求
7.10 心得：
父组件传递数据给子组件
data中初始化数据父组件设置属性
子组件通过props接收
axios接收数据并进行赋值
getHomeInfoSucc(res){
res = res.data
if (res.ret && res.data) {
const data = res.data
this.city = data.city
}
}
确定ret接收正常并且有数据
Swiper显示最后一个图问题
默认按照空数组创建数据拿到之后重新渲染 =>
在中让v-if="list.length"数据拿到之后再渲染
但最好将逻辑层写在computed中:
computed: {
showSwiper () {
return this.list.length
}
}
自动轮播
swiperOption中的autoplay 给上false
随时随地看视频
