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撸代码了,预知下回如何,待我下节娓娓道来。
Vue学习记录-初探Vue的更多相关文章
- vue学习记录:vue引入,validator验证,数据信息,vuex数据共享
最近在学习vue,关于学习过程中所遇到的问题进行记录,包含vue引入,validator验证,数据信息,vuex数据共享,传值问题记录 1.vue 引入vue vue的大致形式如下: <temp ...
- day 82 Vue学习二之vue结合项目简单使用、this指向问题
Vue学习二之vue结合项目简单使用.this指向问题 本节目录 一 阶段性项目流程梳理 二 vue切换图片 三 vue中使用ajax 四 vue实现音乐播放器 五 vue的计算属性和监听器 六 ...
- day 81 Vue学习一之vue初识
Vue学习一之vue初识 本节目录 一 Vue初识 二 ES6的基本语法 三 Vue的基本用法 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 vue初识 vue称为渐进式js ...
- day 82 Vue学习三之vue组件
Vue学习三之vue组件 本节目录 一 什么是组件 二 v-model双向数据绑定 三 组件基础 四 父子组件传值 五 平行组件传值 六 xxx 七 xxx 八 xxx 一 什么是组件 首先给 ...
- day 81 Vue学习二之vue结合项目简单使用、this指向问题
Vue学习二之vue结合项目简单使用.this指向问题 本节目录 一 阶段性项目流程梳理 二 vue切换图片 三 vue中使用ajax 四 vue实现音乐播放器 五 vue的计算属性和监听器 六 ...
- day 80 Vue学习一之vue初识
Vue学习一之vue初识 本节目录 一 Vue初识 二 ES6的基本语法 三 Vue的基本用法 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 vue初识 vue称为渐进式js框架 ...
- Vue学习记录第一篇——Vue入门基础
前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...
- Js 框架之Vue .JS学习记录 ① 与Vue 初识
目录 与 Vue.js 认识 VUE.JS是个啥?有啥好处? Vue 的目标 战前准备 VUE.JS环境 VUE.JS 尝试一下,你就明白 第一步 实例化VUE 对象 第二步VueAPP 调用数据 ...
- Vue学习记录(一)
一.引入js文件(直接采用CDN): http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js 二.简单实例: (1)HTML代码: &l ...
随机推荐
- sqlite3在Linux下的安装和使用
自我补充:ubuntu在线安装sqlite3数据库的方法: 系统平台:ubuntu12.04 在ubuntu里面直接使用命令:sudo apt-get install sqlite3 ,出现: ...
- centos上git搭建
1 git的安装需要一些包: yum install curl-devel expat-devel gettext-devel openssl-devel zlib-devel gcc perl-Ex ...
- Nginx常见错误及处理方法
转载:https://www.cnblogs.com/liyongsan/p/6795851.html 404 bad request 一般原因:请求的Header过大 解决方法:配置nginx.co ...
- 发布PHP项目(nginx+PHP7+mysql 5.6)
一.环境检查 1.检查nginx ps -ef | grep "nginx" 显示如下内容则代表nginx启动正常 root 3285 1 0 12:57 ? 00:00:00 n ...
- BeanUtils封装对象时一直提示ClassNotFoundException:org.apache.commons.beanutils.BeanUtils
导包明明正确了,依赖包也全都导对了,还是出错. 困扰了3天. 后来看到这篇博文,https://blog.csdn.net/yanshaoshuai/article/details/81624890 ...
- DNS区域传送漏洞的安全案例
DNS区域传送(DNS zone transfer)指的是一台备用服务器使用来自主服务器的数据刷新自己的域(zone)数据库.这为运行中的DNS服务提供了一定的冗余度,其目的是为了防止主的域名服务 ...
- 洛谷 P2241统计方形(数据加强版) 题解
题目传送门 说是加强版,其实可以把棋盘那道题的代码粘过来(注意要开long long): #include<bits/stdc++.h> using namespace std; ,c; ...
- a:hover伪类在ios移动端浏览器内无效的解决方法
a:hover 设置的样式在ios系统的浏览器内显示不出来,看来在iOS系统的移动设备中,需要在按钮元素或body/html上绑定一个touchstart事件才能激活:active状态. 方法 一: ...
- 小甲鱼Python笔记(类)
类和对象 类的构造方法 def __init__(): 1 class People: 2 def __init__(self,name): 3 self.name = name 注意:在构造方法中的 ...
- Java学习笔记之:Java Servlet环境配置
一.介绍 Java Servlet 是运行在 Web 服务器或应用服务器上的程序,它是作为来自 Web 浏览器或其他 HTTP 客户端的请求和 HTTP 服务器上的数据库或应用程序之间的中间层. 使用 ...