Vue实战笔记

配置环境， 使用stylus语法
下载stylus包

npm install stylus --save

npm install stylus-loader --save

建立HomeHeader主页头部组件，

iconfont的使用，~~~

建立一个iconfont文件夹放入上面的4个文件,在上一级目录放入iconfont.css, 把css的路径修改

在main.js中引入

使用styl创建全局变量css， 使通用的css引用

css的导入要加入@

把代码提交到git上的命令 git add .
git commit -m ‘项目描述’

轮播图 使用github的 vue-awesome-swiper

git checkout master 切换到master分支
git merge origin/index-swiper 合并swiper分支
git push 提交

图标导航布局和翻页

产品栏和周末栏


在主组件请求数据再分配到各个子组件

在静态资源目录下存放数据文件

在gitignore文件添加数据文件路径使文件不更新到git本地和线上仓库

在配置文件下将请求的接口路径接到静态文件目录下的数据文件，在写
axios.get(/api/index.json)函数时改变请求的默认路径为api开头,而不是static


添加city路由,创建city页面,再增加页面的各个组件

页面滚动插件下载使用

右侧字母组件

垂直居中

使用watch监听按得字母是哪个，定一个参数ref=key来接收dom到element上，获取的是数组，所以在后面加个[0]，再scrollToElement跳转到该元素位置

把对象要取的A B C的值push到数组letters中，以便计算距离和拖动

添加touchstart开始移动结束方法，
计算字母A到头部的距离和鼠标所在位置到头部距离，再鼠标位置距离减去字母的距离获得当前所在字母的所在dom元素index，

性能优化 获取到数据后，cityies值才发生变化，Alphabet才被渲染时，
当往ulphabet传送数据时，重新渲染，那么updated会被执行，页面已展示字母列表内容，获取A字母所在的dom的top的值就没有问题

节流限制一下函数的频率，如果正在做这件事情，让他延迟16毫秒或自己设定的秒数再去执行，假设16毫秒之间又执行了滑动，那么把上一次的操作清楚掉，重新执行这一次的事情

搜索栏逻辑，节流限制， 定义一个数组result，循环cities，再对cities[i]进行循环，当数据里的spall或者name的值与keyword输入的值匹配时，把值添加到数组result中，再把result返回到list数组，循环数组显示搜索数据

如果搜索栏为空，则把list置为空返回，边隐藏搜索区内容v-show，当不等于数据的长度或0时v-show=！this.list.length，显示没找到匹配

把this.list.length添加到计算函数中，返回一个函数

使用vuex实现home与city组件的数据共享,vuex的dispatch

改变state没有异步操作，操作也简单，组件没必要dispatch调用action进行转发，直接用commit调用mutations，vuex的action可以删除

state公用数据，使用localStorage实现页面数据缓存， z使用dispatch
try catch 在隐私模式时防止本地缓存报错

可以对defaultCity和mutations进行拆分

使用vuex高级API {{mapxxxx}} 把city数据映射到计算属性xxxx如：currentCity中，就可以直接调用this.currentCity

keep-alive优化网页性能，使同样的数据ajax来回请求只请求一次，


选择特定城市是要跳到特定的城市页面， 在api接口后加上city

使用keep-alive时会多出activated生命周期，在里面j也会执行的生命周期activated 函数 ，每次重新加载页面会加载，
监听最后请求与当前城市是否相同，如果相同，则不加载，不相同，则把选择的页面重新加载

第三屏，创建一个详情页的路由

创建全局组件gallary对banner图片进行轮播

paginationType,轮播数目显示的类型，fraciton是数字，
observeParents，当父级页面改变时，重新渲染页面，
observe，当页面改变时，同上

bannner的样式

对头部组件使用全局监听事件来改变头部的渐变

详情页列表， 使用递归组件，自己调用自己


把接口指向本地的php服务器

本地服务器文件地址
sudo apachectl restart 重启
sudo apachectl start启动
sudo apachectl stop 停止

在package.json 的dev里加上–host 0.0.0.0就可以使用本机IP地址访问该网页

任何组件的异步使用，

至少当主的父组件达到1Mb的时候才需要组件的异步加载