Vue.js 2.0和Cordova开发webApp环境搭建方法


Posted in Javascript onFebruary 26, 2018

HTML5开发APP技术文档

一、环境参数

1、技术语言:HTML、CSS、ES6、Node.js等;

2、框架:Vue.js 2.x、Cordova;

3、开发系统:mac、windows等;

4、环境配置: node 6+ npm 3+ (最好下载Node.js官方最新版本) 、jdk1.8、SDK(请直接下载Androidstudio软件官方最新版本,已集成AndroidSDk,建议以默认路径安装) 。

二、系统环境变量配置(以window7为例)

1、AndroidSDK配置

A)添加用户变量配置,如下图所示:

变量名:ANDROID_HOME

变量值:以安装的路径为主,默认路径为C:\Users\用户名\AppData\Local\Android\sdk

Vue.js 2.0和Cordova开发webApp环境搭建方法

B)在用户变量PATH添加,如下图所示:

;%ANDROID_HOME%\platform-tools;

Vue.js 2.0和Cordova开发webApp环境搭建方法

C)在系统变量PATH添加,如下图所示

默认路径为C:\Users\用户名\AppData\Local\Android\sdk\tools

Vue.js 2.0和Cordova开发webApp环境搭建方法

D)说明:在cmd环境运行‘android'命令,如下图所示,即表示环境变量配置成功。

Vue.js 2.0和Cordova开发webApp环境搭建方法

2、JDK配置

A)添加系统变量,如下图所示

变量名:JAVA_HOME

变量值:安装JDK目录

Vue.js 2.0和Cordova开发webApp环境搭建方法

B)在系统变量PATH添加,如下图所示:

;% JAVA_HOME%\ bin;

Vue.js 2.0和Cordova开发webApp环境搭建方法

C )添加系统变量,如下图所示:
变量名:CLASSPATH

变量值:;.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar;

Vue.js 2.0和Cordova开发webApp环境搭建方法

D)说明:在cmd环境运行‘javac'命令,如下图所示,即表示环境变量配置成功。

Vue.js 2.0和Cordova开发webApp环境搭建方法

三、Cordova +VUE 项目环境搭建

1、Cordova

A)安装:npm install ?g cordova

B)常用命令:

l 创建项目:cordova create 项目名;如下图所示,即成功创建。

Vue.js 2.0和Cordova开发webApp环境搭建方法

l 添加平台:首先cmd进入创建的项目,然后执行cordova platform add android ?save或cordovaplatform add ios ?save,如下图所示,即成功创建。

Vue.js 2.0和Cordova开发webApp环境搭建方法

l 检查平台设置状况:cordovaplatform ls ,如下图所示,即成功创建。

Vue.js 2.0和Cordova开发webApp环境搭建方法

l 创建APP:cordova build android或 cordova build ios,如下图所示,即成功创建。

Vue.js 2.0和Cordova开发webApp环境搭建方法

Vue.js 2.0和Cordova开发webApp环境搭建方法

l 测试APP: cordova emulate android,如下图所示,即成功创建。

Vue.js 2.0和Cordova开发webApp环境搭建方法

Vue.js 2.0和Cordova开发webApp环境搭建方法

2、集成VUE

A)安装vue工具:npm install --g vue-cli

B)创建项目:首先cmd进入cordova创建的项目,然后执行vue init webpack,如下图所示,即成功

Vue.js 2.0和Cordova开发webApp环境搭建方法

C)npm install 安装vue项目开发依赖包,如下图所示,即成功。

Vue.js 2.0和Cordova开发webApp环境搭建方法

Vue.js 2.0和Cordova开发webApp环境搭建方法

3、项目相关说明

A)最终项目目录:

Vue.js 2.0和Cordova开发webApp环境搭建方法

B)修改项:

l 清空www文件夹里面的文件

l 找到config文件夹,修改index。Js

默认:

Vue.js 2.0和Cordova开发webApp环境搭建方法

修改后:

Vue.js 2.0和Cordova开发webApp环境搭建方法

l 开发好项目后,运行命令npm run build,接着运行cordova build android,最后cordovaemulate android,就可以预览项目。

Javascript 相关文章推荐
基本jquery的控制tabs打开的数量的代码
Oct 17 Javascript
原生js拖拽(第一课 未兼容)拖拽思路
Mar 29 Javascript
Angular.js与Bootstrap相结合实现手风琴菜单代码
Apr 13 Javascript
jQuery 选择同时包含两个class的元素的实现方法
Jun 01 Javascript
JS实现鼠标框选效果完整实例
Jun 20 Javascript
基于BootStrap的Metronic框架实现页面链接收藏夹功能按钮移动收藏记录(使用Sortable进行拖动排序)
Aug 29 Javascript
Bootstrap对话框使用实例讲解
Sep 24 Javascript
JavaScript DOM节点操作实例小结(新建,删除HTML元素)
Jan 19 Javascript
vue2.0学习之axios的封装与vuex介绍
May 28 Javascript
微信小程序点击view动态添加样式过程解析
Jan 21 Javascript
js中Object.create实例用法详解
Oct 05 Javascript
微信小程序APP的事件绑定以及传递参数时的冒泡和捕获
Apr 19 Javascript
浅谈ajax请求不同页面的微信JSSDK问题
Feb 26 #Javascript
详解Node 定时器
Feb 26 #Javascript
node.js基础知识小结
Feb 26 #Javascript
Es6 Generator函数详细解析
Feb 24 #Javascript
JavaScript中利用Array filter() 方法压缩稀疏数组
Feb 24 #Javascript
解决VUE框架 导致绑定事件的阻止冒泡失效问题
Feb 24 #Javascript
JS抛物线动画实例制作
Feb 24 #Javascript
You might like
MayFish PHP的MVC架构的开发框架
2009/08/13 PHP
php简单获取目录列表的方法
2015/03/24 PHP
phalcon框架使用指南
2016/02/23 PHP
Yii数据读取与跳转参数传递用法实例分析
2016/07/12 PHP
js设置组合快捷键/tabindex功能的方法
2013/11/21 Javascript
js 中将多个逗号替换为一个逗号的代码
2014/06/07 Javascript
jQuery的deferred对象详解
2014/11/12 Javascript
jQuery操作JSON的CRUD用法实例
2015/02/25 Javascript
vue分类筛选filter方法简单实例
2017/03/30 Javascript
详解angular中的作用域及继承
2017/05/31 Javascript
关于Vue背景图打包之后访问路径错误问题的解决
2017/11/03 Javascript
D3.js实现拓扑图的示例代码
2018/06/30 Javascript
微信小程序点击图片实现长按预览、保存、识别带参数二维码、转发等功能
2019/07/20 Javascript
Javascript ParentNode和ChildNode接口原理解析
2020/03/16 Javascript
vue接口请求加密实例
2020/08/11 Javascript
[41:54]2018DOTA2亚洲邀请赛 4.1 小组赛A组加赛 TNC vs Liquid
2018/04/03 DOTA
Python中多线程thread与threading的实现方法
2014/08/18 Python
Python类的继承和多态代码详解
2017/12/27 Python
使用python模拟命令行终端的示例
2019/08/13 Python
pytorch:model.train和model.eval用法及区别详解
2020/02/20 Python
python GUI库图形界面开发之PyQt5信号与槽多窗口数据传递详细使用方法与实例
2020/03/08 Python
pip 20.3 新版本发布!即将抛弃 Python 2.x(推荐)
2020/12/16 Python
使用Python webdriver图书馆抢座自动预约的正确方法
2021/03/04 Python
HTML5实现的图片无限加载的瀑布流效果另带边框圆角阴影
2014/03/07 HTML / CSS
新奇的小玩意:IWOOT
2016/07/21 全球购物
美国男装连锁零售商:Men’s Wearhouse
2016/10/14 全球购物
法国亚马逊官方网站:Amazon.fr
2020/12/19 全球购物
艺术应用与设计个人的自我评价
2013/11/23 职场文书
节能环保家庭事迹材料
2014/08/27 职场文书
2014卖家双十一活动策划书
2014/09/29 职场文书
2014年宣传部工作总结
2014/11/12 职场文书
2014年加油站工作总结
2014/12/04 职场文书
2014年医院后勤工作总结
2014/12/06 职场文书
学习师德师风的心得体会(2篇)
2019/10/08 职场文书
MySQL修炼之联结与集合浅析
2021/10/05 MySQL
python中对列表的删除和添加方法详解
2022/02/24 Python