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撸代码了，预知下回如何，待我下节娓娓道来。