Skip to content

momopig/vue-flexible-app

Folders and files

NameName
Last commit message
Last commit date

Latest commit

5b8339d · Jan 20, 2018

History

34 Commits
Jun 5, 2017
Jun 5, 2017
Jan 20, 2018
Jan 19, 2018
Jun 5, 2017
Jun 5, 2017
Jun 5, 2017
Jun 5, 2017
Jun 5, 2017
Jun 5, 2017
Jun 5, 2017
Jan 20, 2018
Jun 5, 2017
Jun 21, 2017
Jul 10, 2017
Jan 20, 2018

Repository files navigation

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

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

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published