Vue学习记录-初探Vue
写在开头
2017年,部门项目太多,而且出现了一个现象,即:希望既要有APP,也能够直接扫码使用,也能放到微信公众号里面。
从技术角度来说,APP我们可以选择原生开发,也可以选择ReactNative进行开发。无论是普通扫一扫APP,还是微信里面的扫一扫,直接使用的话,那就需要考虑H5页面。微信公众号,实质上也是一个H5,当然需要调用微信服务的自然离不开微信的jssdk。
那么问题来了,如何提高复用率?答案,可能各位心里也有,那就是H5做页面开发。APP通过webview包皮打包、手机浏览器直接访问、微信直接访问。
说完了这一些,接下来的重点,就是选型了。经过一天的搜索,最终定位到了Vue(https://cn.Vuejs.org/)
TODO
- Vue环境搭建,新建工程office-Vue(公司的一个OA产品,原生开发的[iOS、Android])
- UI框架
- 画页面(登录、主菜单、列表、详情)
- 页面跳转,也可以叫路由
- 权限控制(是否登录)
- APP原生工程改造,添加title显示(毕竟是希望一个H5页面能够复用到多个场景下,NavigationBar是个必须要解决的问题,微信里面两个Bar毕竟不好看)
- 打包发布
初探Vue
根据Vue官网的引导,搭建的过程其实很简单
1. 安装 Vue
npm install Vue
2. 命令行工具
npm install --global Vue-cli
3. 初始化项目
Vue init webpack office-Vue
4. 安装依赖,启动
cd office-Vue
npm install
npm run dev
5. 打开浏览器就能看到初始化的页面了,满屏的Vue元素
选择UI框架
UI框架的话,毕竟不是专业做H5的,所以之前了解的不是很多,知道的比如bootstrap、antd、weui,在学习Vue过程中,去搜索意外发现了饿了么也维护了一个UI版本,而且特别说明是与Vue配合使用的,在查看了介绍以后,决定表单部分试用一下(稍后的篇章进行说明)
登录页面
2011年的时候,学过JSP,时过近7年,原来用的那些东西,什么div、css,早就不知道跑哪去了。所以,还是凭借那一丁点的记忆,一点一点的摸索前行吧。
原生效果图如下
通过Vue画出这个页面,然后再去考虑接口通讯方案。
接下来就是用Vue撸代码了,预知下回如何,待我下节娓娓道来。