文档章节

vue2.0+cordova 开发移动app

lindeyi
 lindeyi
发布于 2017/07/07 10:47
字数 517
阅读 151
收藏 5

首先开发环境需要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
粉丝 5
博文 16
码字总数 14150
作品 0
海淀
原生App vs 移动Web App

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

junwong
2012/07/19
23.5K
17
带你解析:原生APP与web APP的区别

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

jonh_felix
2015/11/16
18.3K
3
web?混合?原生?移动开发的三种模式选择

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

数通畅联
2015/02/12
0
0
20分钟轻松制作移动网站

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

woiwoi
2016/02/03
209
0
针对移动APP开发的6个JavaScript框架

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

英趣科技
2016/12/26
23
0

没有更多内容

加载失败,请刷新页面

加载更多

TypeScript基础入门之高级类型的字符串字面量类型

转发TypeScript基础入门之高级类型的字符串字面量类型 高级类型 字符串字面量类型 字符串字面量类型允许你指定字符串必须的固定值。 在实际应用中,字符串字面量类型可以与联合类型,类型保护...

durban
17分钟前
2
0
iOS权限授权添加

<!-- 相册 --> <key>NSPhotoLibraryUsageDescription</key> <string>App需要您的同意,才能访问相册</string> <!-- 相册写入 --> <key>NSPhotoLibraryAddUsageDescription</key> <string>App......

RainOrz
21分钟前
1
0
支配树(Dominator Tree)

MAT中的支配树 在使用MAT分析项目的内存泄漏问题时,其中有一个支配树(Dominator)视图。如果我们把Java对象之间的引用关系看做一张有向图(可以存在环)的话,对象的支配树体现了对象之间的...

akane_oimo
23分钟前
1
0
xshell官网下载及安装(免费版本)

百度搜索xshell,点击xshell官网下载链接,如图 然后点击下图的按钮 点击Latest Products,可以下载最新版本,选择要下载的版本,点击下载 选择上面红框里面的,并填写内容,submit之后会有邮...

曾大大胖
27分钟前
2
0
Android 调用系统分享文字、图片、文件,可直达微信、朋友圈、QQ、QQ空间、微博

兼容SDK 18以上的系统,直接调用系统分享功能,分享文本、图片、文件到第三方APP,如:微信、QQ、微博等 因为偷懒,可直达微信、朋友圈、QQ、QQ空间、微博的分享仅写了图片分享的,其他的文本...

她叫我小渝
29分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部