根据妙味课堂上的一个教程练习总结，供自己复习用
一、功能介绍
一个网易新闻客户端的浏览页面，通过网易新闻的api接口实时获取新闻数据，用vux搭建样式框架，以轮播图，文字滚动，图文列表等形式把内容展示出来，可实现下拉刷新，上滑加载，文本提示更新，导航跳转到其他页面等功能。
二、涉及技术
基础：Html，css，Javascript，响应式，es6，vue-router，vue-jsonp
其他：nodejs，npm，vue，webpack，git，vux
三、模块划分
a,轮播图，图片+标题的形式无缝轮播滚动新闻，点击可跳转至网易的新闻界面
b.文字条切换，文字以上下滑动形式切换
c.新闻列表展示，左图右标题形式，点击可跳转至网易新闻详情页界面
d.底部导航，可导航至其他组件（音乐，电影，阅读）页面，在每个界面始终显示
e.其他：回到顶部，回到首页等
四、搭建过程
1.新建项目（已安装好node,vue-cli等）
执行vue init webpack 1633，新建一个名叫1633的项目，新建好后进入项目，执行npm i安装相关依赖，然后执行 npm run dev，默认8080端口，如果端口被占用，在config/index.js里改下端口，重启服务器，在浏览器中输入localhost:端口号，能弹出vue的欢迎界面，及安装成功。
2.安装vux组件库
执行npm i -s vux ,安装好后可以在package.json 中看到响应的版本信息，由于之后会用到vux 的viewBox,xHeader等组件，这里我们提前安装好相关的依赖
- 执行npm i -D less less-loader
- 引入样式重置 @import '~vux/src/styles/reset.less'，这个放在App.vue的style中，同时设置style的属性 lang=less
- 执行npm install vux-loader --save-dev，然后在webpack.dev.conf.js中配置
const vuxLoader=require('vux-loader')
baseWebpackConfig=vuxLoader.merge(baseWebpackConfig,{plugins:['vux-ui']})
（要设置语言包 vuex-i18n，如果不引入，会提示_vm.$t is not a function报错，另，引入了发布到服务器依然会报这个错误。。）
到此，前期的设置基本完成。
3.搭建界面
组件的引入 ，在import { 组件名 } from 'vux'，然后再conponents中注册该组件名，就可以使用了，组件使用的时候以小写加连接符的形式，如viewBox,使用时为 <view-box> </view-box>
我们分别引入以下组件：
- viewBox：整体的布局组件，以后其他的组件也是放到这个组件中的，需要设置body,html以及父组件的高度
- XHeader：头部组件，最上方显示名称的地方
- Tabbar,TabbarItem:底部导航组件
- Swiper：轮播图组件
- Marquee:文字滑动组件，跑马灯效果
- Panel:图文列表组件
组件引入完毕，先根据官方文档查看相应的设置，数据先填充案例里的，整体界面能正常运行即可。
4.数据加载
a) 数据来源准备：
- 首屏推荐新闻：http://3g.163.com/touch/jsonp/sy/recommend/0-9.html
- 下拉或上滑加载更多的切换新闻：'http://3g.163.com/touch/jsonp/sy/recommend/'+start+'-'+end+'.html'
- 刷新需要传入的参数：miss:'00',refresh:['A','B01','B02'.....'B10']，共11个
- 首页所需数据格式：
- 轮播图数据：SwiperList: url, img, title
- 文字滑动数据：MarqueeList: title
- 新闻列表数据：PanelList:src, title, desc, url
b) vue jsonp 解决跨域处理：
- 执行npm i -S vue-jsonp 来安装vue jsonp；
- 在main.js中导入vue-jsonp,执行import VueJsonp from 'vue-jsonp'；
- 通过use方法，挂载到vue中，vue.use(VueJsonp)
c) 数据处理
首页一进入就获取数据，这个需要把加载数据的函数设置在vue的created生命周期函数中
created () {
this.$jsonp('http://3g.163.com/touch/jsonp/sy/recommend/0-9.html').then(data => {
/* 这里是获取的数据 */
console.log(data)
// 处理轮播的数据
this.swiperList = data.live.filter(item => {
return item.addata === null && item.picInfo[0]; //这里item.picInfo[0]必须保证有图片，否则显示不出来}).map(item => {
return {
url: item.link,
img: item.picInfo[0].url,
title: item.title
}
})
// 处理跑马灯数据
this.marqueeList = data.focus.filter(item => {
return item.addata === null
}).map(item => {
return {
title: item.title
}
})
// 处理文章列表数据
this.panelList = data.list.filter(item => {
return item.addata === null && item.picInfo[0] && item.digest
}).map(item => {
return {
src: item.picInfo[0].url,
title: item.title,
desc: item.digest,
url: '/detailPage'
}
})
})
}第一个参数是我们的请求地址它返回给我们的是一个promise对象，可以通过then方法进行调用并return出想要的结果数据，then的参数data即我们拿到的原始数据，通过数组的filter方法筛选出想要的数据，map循环遍历每一项数据，按照需要的类型统一返回出去，再赋值给swiperList和其他的项，swiperList，MarqueeList，PanelList要提前在data()里面定义好，内容为空数组。
d) 渲染数据到界面中
把之前的测试数据删除，绑定上新的数据
<swiper :list="swiperList" :loop="true"></swiper>
<marquee class="my-marquee">
<marquee-item v-for="i in marqueeList" :key='i'>{{i.title}}</marquee-item>
</marquee>
<panel :list="panelList" class="panel-list" :type="type"></panel>
到此，数据填充完毕
e）下拉上滑刷新处理
引入下拉刷新及无限加载组件，执行npm i vue-scroller -S ,安装好后把要刷新的内容包裹进来即可。
<scroller class="my-scroller" :on-refresh="refresh" refreshText="等我一下~" :on-infinite="infinite" ref="myRef">
<swiper :list="swiperList" :loop="true"></swiper>
<marquee class="my-marquee">
<marquee-item v-for="i in marqueeList" :key='i'>{{i.title}}</marquee-item>
</marquee>
<panel :list="panelList" class="panel-list" :type="type"></panel>
</scroller>下拉刷新:on-refresh="refresh"refresh () {
getFreshKey()
this.$jsonp(`http://3g.163.com/touch/jsonp/sy/recommend/${start}-${end}.html`, {
miss: '00',
refresh: keyValue
}).then(data => {
/* console.log(this.$refs.myRef) 这个方法就像是jq里通过dom获取元素一样，只不过我们要减少dom的操作 */
/* 这里是获取的数据 */
// console.log(data)
// 处理文章列表数据
（省略同上）
this.$refs.myRef.finishPullToRefresh()//停止下拉刷新
this.$vux.toast.text(`本次共刷新了${this.panelList.length}条数据`)//文本提示刷新了多少条数据
}
这里声明了一个getFreshKey函数，每次刷新的时候执行，初始值为0，每刷新一次加1，动态拿到refreshKey中的每一项，赋值给refresh,保证每次刷新
拿到的数据都不一样。
let start = 0;
let end = start + 9;
let refreshKey = ['A', 'B01', 'B02', 'B03', 'B04', 'B05', 'B06', 'B07', 'B08', 'B09', 'B10'];
let key = 0;
let keyValue = 'A';
function getFreshKey () {
key++
if (key === 10) {
key = 0
}
keyValue = refreshKey[key]
}上滑加载 :on-infinite="infinite"infinite () {
this.$jsonp(`http://3g.163.com/touch/jsonp/sy/recommend/${start}-${end}.html`, {
miss: '00',
refresh: keyValue
}).then(data => {
/* 这里是获取的数据 */
console.log(data)// 处理文章列表数据
（省略同上）start += 10;
end = start + 9;
this.$refs.myRef.finishInfinite() ;//停止上滑刷新
//this.$refs.myRef这个是我们在scroller上绑定的ref属性，就像dom操作中选中某一个元素一样})
注意：这样操作的上滑加载出来的数据，是追加上来的，这样的话列表的数据就会越来越多，如果希望每次上滑的时候，就把原来的内容替换掉的话，
可以这么写：infinite () {
this.$jsonp(`http://3g.163.com/touch/jsonp/sy/recommend/${start}-${end}.html`, {
miss: '00',
refresh: keyValue
}).then(data => {
/* 这里是获取的数据 */
console.log(data)// 处理文章列表数据
（省略同上）this.panelList=this.pannelList.concat(panelList);//数据拼接start += 10;
end = start + 9;
this.$refs.myRef.finishInfinite() ;//停止上滑刷新
//this.$refs.myRef这个是我们在scroller上绑定的ref属性，就像dom操作中选中某一个元素一样})f）文本提示更新引入toast 提示组件 import { ToastPlugin } from 'vux'，Vue.use(ToastPlugin)
然后把这句代码写在refresh 函数中即可
this.$vux.toast.text(`本次共刷新了${this.panelList.length}条数据`)
5.导航栏的设置
在conponents中分别注册news,movei，music等组件，并把他们引入到router文件夹下的index.js文件中，配置好路由的名称路径等信息，然后就可以把路由
绑定到导航上了，默认第一个进入的就是新闻的界面，其他界面暂未完成，设置为空白页
<tabbar-item selected link="/">
<img slot="icon" src="./assets/icon-1.png">
<span slot="label">新闻</span>
</tabbar-item>
五、打包与发布
打包：执行npm run build ,完成后会生成一个dist的文件
发布：把文件发送到github上面，具体步骤见资料参考
六、问题与改进
1.上滑刷新时速度过快，可把刷新的数据写到一个定时器中
2.在发布到git之后，控制台依然提示有错误，暂时未找到解决方法
