写在开头

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

												

Vue学习记录-初探Vue的更多相关文章

  1. vue学习记录:vue引入,validator验证,数据信息,vuex数据共享

    最近在学习vue,关于学习过程中所遇到的问题进行记录,包含vue引入,validator验证,数据信息,vuex数据共享,传值问题记录 1.vue 引入vue vue的大致形式如下: <temp ...

  2. day 82 Vue学习二之vue结合项目简单使用、this指向问题

    Vue学习二之vue结合项目简单使用.this指向问题   本节目录 一 阶段性项目流程梳理 二 vue切换图片 三 vue中使用ajax 四 vue实现音乐播放器 五 vue的计算属性和监听器 六 ...

  3. day 81 Vue学习一之vue初识

      Vue学习一之vue初识   本节目录 一 Vue初识 二 ES6的基本语法 三 Vue的基本用法 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 vue初识 vue称为渐进式js ...

  4. day 82 Vue学习三之vue组件

      Vue学习三之vue组件   本节目录 一 什么是组件 二 v-model双向数据绑定 三 组件基础 四 父子组件传值 五 平行组件传值 六 xxx 七 xxx 八 xxx 一 什么是组件 首先给 ...

  5. day 81 Vue学习二之vue结合项目简单使用、this指向问题

    Vue学习二之vue结合项目简单使用.this指向问题   本节目录 一 阶段性项目流程梳理 二 vue切换图片 三 vue中使用ajax 四 vue实现音乐播放器 五 vue的计算属性和监听器 六 ...

  6. day 80 Vue学习一之vue初识

    Vue学习一之vue初识   本节目录 一 Vue初识 二 ES6的基本语法 三 Vue的基本用法 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 vue初识 vue称为渐进式js框架 ...

  7. Vue学习记录第一篇——Vue入门基础

    前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...

  8. Js 框架之Vue .JS学习记录 ① 与Vue 初识

    目录 与 Vue.js 认识 VUE.JS是个啥?有啥好处? Vue 的目标 战前准备  VUE.JS环境 VUE.JS 尝试一下,你就明白 第一步 实例化VUE 对象 第二步VueAPP 调用数据 ...

  9. Vue学习记录(一)

    一.引入js文件(直接采用CDN): http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js 二.简单实例: (1)HTML代码: &l ...

随机推荐

  1. 利用pycharm运行scrapy以及scrapy的配置

    1.安装两个whl文件 https://pypi.python.org/pypi/Twisted 下载Twisted的whl文件 https://pypi.python.org/pypi/Scrapy ...

  2. Oracle中的dual

    简介,摘自百度百科: Oracle提供的最小的表,不论进行何种操作(不要删除记录),它都只有一条记录——'X'. 例如:执行select * from dual,里面只有一条记录:执行insert i ...

  3. 7.Python3标准库--文件系统

    ''' Python的标准库中包含大量工具,可以处理文件系统中的文件,构造和解析文件名,还可以检查文件内容. 处理文件的第一步是要确定处理的文件的名字.Python将文件名表示为简单的字符串,另外还提 ...

  4. 安装mysql驱动之 mysqlclient 出现的报错处理(ubuntu16.04)

    首先 更新软件! sudo apt-get update 然后尝试安装mysqlclient,报错 后执行下面的步骤 安装mysql驱动之 mysqlclient 出现的报错信息处理 报错1: OSE ...

  5. Dell服务器iDrac口默认账号密码和IP

    https://blog.csdn.net/artdao1987/article/details/79875528

  6. Python2中input()、raw_input()和Python3中input()

    听了ALEX的某节课,说input()和raw_input()函数在Python2中没有区别,现在来探讨一下Python2中的input().raw_input()函数和Pyhont3中的input( ...

  7. [实战]MVC5+EF6+MySql企业网盘实战(13)——编辑文件夹

    写在前面 上篇文章实现了,新建文件夹以及与之前的上传文件的逻辑做了集成,本篇文章将实现编辑文件夹名称,其实这个也有难点,就是编辑文件夹名称时,要考虑文件夹中存在文件或者子文件夹的情况,因为他们的路径已 ...

  8. LR11中自定义函数web_custom_request请求

    Action() { char * ip,temp; int state; double time_elapsed, duration, waste; merc_timer_handle_t time ...

  9. python的types模块

    python的types模块 1.types是什么: types模块中包含python中各种常见的数据类型,如IntType(整型),FloatType(浮点型)等等. >>> im ...

  10. MySQL表设计:每一种商品有不确定个数的属性

    I personally would use a model similar to the following: The product table would be pretty basic, yo ...