Demo

scan the qr code

演示地址

Description(基础架构简介)

本项目是基于vue开发的一个简易app,基础框架采用vue-cli 2.x版本,css预处理器使用的sass(scss)。与此同时,本项目还集成了如下前端类库和框架:

lib-flexible

本web app项目的多终端适配方案,采用的是rem布局方案,具体使用的js类库为手淘团队分享的lib-flexible,具体使用请参照:使用Flexible实现手淘H5页面的终端适配

postcss-px2rem

在webpack打包项目时,将css代码中的px单位转化为rem单位,具体配置详见代码。

mint-ui

mint-ui是饿了么前端团队基于vue开发的移动端框架。在本项目中,按需使用了其Toast组件(注:由于mint-ui不支持rem,所以在项目中移除了其默认的css文件,并根据ui提供的设计稿在外部重写了Toast的样式),如果你也想在采用rem布局的app中使用mint-ui, 也建议你按需引入组件并重写样式,让集成的postcss-px2rem实现px和rem的转化,不建议使用mint-ui-rem-dpr提供的让mint-ui支持rem的方案(原因是:1. 我们在实际开发中,一般都会使用自己的组件样式;2. 本人在使用该依赖时,打包会出错)。

vue-iscroll-view

IScroll为移动端常用的平滑滚动框架,本项目使用其vue封装vue-iscroll-view组件,实现了水平导航栏在水平方向和列表在垂直方向上的流畅滑动、以及列表的touch分页。

isomorphic-fetch

Fetch api是新一代异步获取网络数据的js接口,在易用性和功能丰富度等方面,都远远超过了传统的ajax,未来将会有更多的人从ajax转向Fetch。由于Fetch api在部分老版本浏览器没有得到支持,在此使用了fetch的Polyfill实现isomorphic-fetch

moment

moment是开源社区十分著名的日期处理类库,用于用于解析、检验、操作、以及显示日期。由于vue2.x版本移除了内置的过滤器(关于作者移除的原因可以参考此讨论:Bring back filters please),且本项目中需要使用日期类过滤器,故集成了第三方过滤器vue-moment。与此同时,本项目还配置了自定义过滤器文件src/filter.js,方便你快速增加自定义filter。

本demo的页面虽然仅有6个,但是项目的基础框架已经配置得很完善,文件模块的划分亦较为清晰,所以对未来需要额外配置其它js类库或增加新的业务模块,都具也有很强的参考性;而且项目中涉及的vue知识点有:vue常用指令的使用、vue生命周期以及常用hook的使用、vue组件的实例化和重渲染、vue计算属性的使用、vue父子组件间通信、vue成员变量watch监听处理、自定义全局的过滤器文件等,有助于帮你快速掌握vue2.x的基本使用。总之,本项目不但是很好的vue入门demo,也能帮助你快速构建高可用的中小型app项目。

#注意事项

  1. 华为部分手机的内置浏览器不支持flex布局,如果考虑对华为内置浏览器做兼容,建议舍弃flex布局

Deployment

  • npm install
  • npm run dev

Build

  • npm run build

End

由于本人水平有限,如在使用中如发现有任何问题或更好的建议,欢迎及时与我联系。