1.
自己建一个头条项目
my-vue-toutiao
vue init webpack my-vue-toutiao
cnpm install
安装vue-router
2.
安装Mint UI
cnpm install mint-ui 这是移动端ui库,element是桌面端
3.
全局使用
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
Vue.use(MintUI)
4.
静态资源文件加载
放到static文件夹下,同时mint提供一个lazy load,为图片提供加载出来之前的表现
静态图片较多的情况下可单列json文件,管理图片
5.
类似的导航条,可选择swiper插件,vue项目下vue-awesome-swiper,实现效果较好
遇到的问题:
(1)没有引入css文件,代码始终是竖着排的
(2)这种样式使用swiper下的carousel模式,配置option中的slidesPerView:6,即能同时显示的slide的数量
6.
vh 将视窗分为100vh 移动端可支持
7.
数据管理,我选择的方式,新建一个data文件夹
(1)配置默认数据 default.js
(2)常用方法,如cookie,sessionStorage,localStorage的存取等,写入storage.js
(3)首页的数据存取方法写入index.js
vuex可用于vue项目的数据传递,能简化整个组件传值
遇到的问题:es6的 ()=>{},this.attr不能取到值,原因是this的作用域