文档章节

vue2.0+cordova 开发移动app

lindeyi
 lindeyi
发布于 2017/07/07 10:47
字数 517
阅读 127
收藏 4
点赞 0
评论 0

首先开发环境需要node.js支持。到官网下载安装即可。

接着直接开始搭建项目。

1、使用npm安装cordova。

 npm i -g corvate

2、安装vue-cli,vue创建项目脚手架

 npm i -g vue-cli

3、使用Cordova创建一个cordova项目

cordova create 目录名称 com.xxx 项目名

使用create命令创建

生成目录结构如下:

hooks
platforms   #平台目录;放android、ios等项目
plugins     #插件目录
res         #资源文件
www         #web文件目录
.gitignore
.npmignore
config.xml  #配置文件
package.json

4、下载项目依赖;下载的依赖会放在根目录下node_modules文件夹下

npm install

5、在cordova根目录下使用vue-cli创建一个vue项目。

vue init webpack vue

这里我创建了一个目录叫vue的vue项目;

目录结构如下:

├── build              // 构建服务和webpack配置
├── config             // 项目不同环境的配置
├── dist               // 项目build目录
├── index.html         // 项目入口文件
├── package.json       // 项目配置文件
├── src                // 生产目录
│   ├── assets         // 图片资源
│   ├── common          // 公共的css js 资源
│   ├── components     // 各种组件
│   ├── views          // 各种视图
│   ├── App.vue         // 主页面 
│   ├── vuex           // vuex状态管理器
│   ├── router.js     // 路由配置器
│   └── main.js        // Webpack 预编译入口

6、进入vue目录中下载依赖

cd vue
npm install

7、修改vue项目打包输出目录。需要把结果输出到cordova根目录下www文件夹下。

修改vue根目录下config/index.js文件;index、assetsRoot、assetsPublicPath修改如下。

module.exports = {
  build: {
    env: require('./prod.env'),

    // index: path.resolve(__dirname, '../dist/index.html'),
    // assetsRoot: path.resolve(__dirname, '../dist'),
    // assetsPublicPath: '/',

    index: path.resolve(__dirname, '../../www/index.html'),
    assetsRoot: path.resolve(__dirname, '../../www'),
    assetsPublicPath: '',

    assetsSubDirectory: 'static',
    productionSourceMap: true,

8、使用vue-cordova插件完成vue项目与cordova整合。

# 下载vue-cordova
npm i vue-cordova

9、在src/main.js中引入vue-cordova。

import VueCordova from 'vue-cordova';
Vue.use(VueCordova, {
  optionTestKey: 'optionTestValue'
});

10、打包vue项目

npm run build

11、回到cordova根目录,之前还没创建android项目相关;创建android平台代码;

cd ../

cordova platform add android

12、打包cordova项目;打完包会在 platforms\android\build\outputs\apk目录下生成包

cordova build android
# cordova还可以直接调试;
cordova run android

现在就可以使用手机安装app,看看效果了。

© 著作权归作者所有

共有 人打赏支持
lindeyi
粉丝 3
博文 14
码字总数 13536
作品 0
海淀
原生App vs 移动Web App

每当你打算开发移动应用程序时,都要考虑你的应用如何创建以及如何部署。如今已有两个主要的方向:原生App 以及 移动Web App。那么在今天这篇文章中就来比较一下两者的区别来供大家参考。 原...

junwong ⋅ 2012/07/19 ⋅ 17

带你解析:原生APP与web APP的区别

对于原生跨平台APP与WEB APP的区别,很多人还不是很清楚,下面就让小编来简单介绍原生APP的功能以及与WEB APP的区别。 定义,什么是原生APP和web APP?   Web App   Web App即是一种框架型...

jonh_felix ⋅ 2015/11/16 ⋅ 3

20分钟轻松制作移动网站

最近关于移动网站开发或APP轻应用的内容越来越多了,,有一些好的方法可以快速开发,但不系统,这里推荐一本书吧。  PhoneGap的目的是用来快速开发移动跨平台 APP,它基于 HTML 5,支持市面...

woiwoi ⋅ 2016/02/03 ⋅ 0

web?混合?原生?移动开发的三种模式选择

原文网址链接:http://www.ctocio.com/mobile/10169.html 今天,消费者在移动app应用(包括原生和混合)上花费的时间(94分钟/天)超过移动web(72分钟/天),于是“移动优先”成为移动开发战...

数通畅联 ⋅ 2015/02/12 ⋅ 0

针对移动APP开发的6个JavaScript框架

选择合适的JavaScript框架用于移动APP开发,从来不在于特定框架可以提供的功能数量。而是在于框架的真正功能,以及该功能如何在移动APP开发项目中被合理应用。因此,根据项目需要选择JavaScr...

英趣科技 ⋅ 2016/12/26 ⋅ 0

移动App开发工具和移动应用漏洞检测工具

  移动应用开发工具和移动应用漏洞检测工具,另外,HTML5提供了很多易于移动web开发的特性。例如,所有的网站都是开发放式的,不需要授权;开发者所创造的利润全部归自己所有。无疑,HTML5...

科技创造 ⋅ 2014/09/13 ⋅ 1

移动版的三种开发模式(web app,hybrid app,native app)大型公司是如何安排的?

首先,祝大家新年快乐,猴年心想事成,万事如意! 如果开发一个类似去哪儿这样的旅游电商平台,包括PC版和移动版,数据分析的结果为:只用电脑和只用手机的几乎是各占一半。如果安排先开发...

女码农 ⋅ 2016/02/10 ⋅ 2

AppCan:Hybrid App技术已经成熟

在移动开发技术里,Native App和Web App之争一直没有停息,而介于Native和Web之间的Hybrid混合App异军突起,以其接近Web App开发简单、跨平台能力,以及接近Native App功能和性能表现逐渐为开...

appcan123 ⋅ 2014/05/26 ⋅ 0

html5框架ionic+phonegap开发的招聘app分享给大家 一倍半-跳槽专用APP

ionic是一款优秀的html5移动app开发框架。会html就可以开发app 通俗的讲: Ionic就是一个基于angualrjs的html5 移动app开发框架,可以开发 app、可以开发wap 、 可以开发微信网站。开发这些东...

htzhanglong ⋅ 2016/03/01 ⋅ 3

2017 年 11 个移动 App 开发趋势

智能手机已经成为我们日常生活不可分割的一部分。早上用闹钟起床,使用Whatsapp,听音乐,阅读新闻,观看YouTube视频,检查邮件,更新项目状态等等——一切都可以在我们的移动设备上无缝执行...

凝小紫 ⋅ 2017/01/31 ⋅ 2

没有更多内容

加载失败,请刷新页面

加载更多

下一页

熊掌号收录比例对于网站原创数据排名的影响[图]

从去年下半年开始,我在写博客了,因为我觉得业余写写博客也还是很不错的,但是从2017年下半年开始,百度已经推出了原创保护功能和熊掌号平台,为此,我也提交了不少以前的老数据,而这些历史...

原创小博客 ⋅ 28分钟前 ⋅ 0

LVM讲解、磁盘故障小案例

LVM LVM就是动态卷管理,可以将多个硬盘和硬盘分区做成一个逻辑卷,并把这个逻辑卷作为一个整体来统一管理,动态对分区进行扩缩空间大小,安全快捷方便管理。 1.新建分区,更改类型为8e 即L...

蛋黄Yolks ⋅ 46分钟前 ⋅ 0

Hadoop Yarn调度器的选择和使用

一、引言 Yarn在Hadoop的生态系统中担任了资源管理和任务调度的角色。在讨论其构造器之前先简单了解一下Yarn的架构。 上图是Yarn的基本架构,其中ResourceManager是整个架构的核心组件,它负...

p柯西 ⋅ 57分钟前 ⋅ 0

uWSGI + Django @ Ubuntu

创建 Django App Project 创建后, 可以看到路径下有一个wsgi.py的问题 uWSGI运行 直接命令行运行 利用如下命令, 可直接访问 uwsgi --http :8080 --wsgi-file dj/wsgi.py 配置文件 & 运行 [u...

袁祾 ⋅ 今天 ⋅ 0

JVM堆的理解

在JVM中,我们经常提到的就是堆了,堆确实很重要,其实,除了堆之外,还有几个重要的模块,看下图: 大 多数情况下,我们并不需要关心JVM的底层,但是如果了解它的话,对于我们系统调优是非常...

不羁之后 ⋅ 昨天 ⋅ 0

推荐:并发情况下:Java HashMap 形成死循环的原因

在淘宝内网里看到同事发了贴说了一个CPU被100%的线上故障,并且这个事发生了很多次,原因是在Java语言在并发情况下使用HashMap造成Race Condition,从而导致死循环。这个事情我4、5年前也经历...

码代码的小司机 ⋅ 昨天 ⋅ 1

聊聊spring cloud gateway的RetryGatewayFilter

序 本文主要研究一下spring cloud gateway的RetryGatewayFilter GatewayAutoConfiguration spring-cloud-gateway-core-2.0.0.RC2-sources.jar!/org/springframework/cloud/gateway/config/G......

go4it ⋅ 昨天 ⋅ 0

创建新用户和授予MySQL中的权限教程

导读 MySQL是一个开源数据库管理软件,可帮助用户存储,组织和以后检索数据。 它有多种选项来授予特定用户在表和数据库中的细微的权限 - 本教程将简要介绍一些选项。 如何创建新用户 在MySQL...

问题终结者 ⋅ 昨天 ⋅ 0

android -------- 颜色的半透明效果配置

最近有朋友问我 Android 背景颜色的半透明效果配置,我网上看资料,总结了一下, 开发中也是常常遇到的,所以来写篇博客 常用的颜色值格式有: RGB ARGB RRGGBB AARRGGBB 这4种 透明度 透明度...

切切歆语 ⋅ 昨天 ⋅ 0

CentOS开机启动subversion

建立自启动脚本: vim /etc/init.d/subversion 输入如下内容: #!/bin/bash## subversion startup script for the server## chkconfig: 2345 90 10# description: start the subve......

随风而飘 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部