文档章节

vue2.0+cordova 开发移动app

lindeyi
 lindeyi
发布于 2017/07/07 10:47
字数 517
阅读 178
收藏 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
24.3K
17
带你解析:原生APP与web APP的区别

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

jonh_felix
2015/11/16
20.5K
3
app开发

在北京创业的人不少,特别是互联网创业公司更是多如牛毛,就像大家所熟知的中关村商圈。基于现在移动互联网的飞速发展,4G带来的高速网络,让不少企业瞄准了移动互联网这个大蛋糕,其中开发出...

linxia111
2015/12/15
2
0
原生App vs 移动Web App

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

tsl0922
2012/11/27
1K
0
web?混合?原生?移动开发的三种模式选择

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

数通畅联
2015/02/12
0
0

没有更多内容

加载失败,请刷新页面

加载更多

linux脚本中父shell与子shell 执行的几种方式

本文主要介绍以下几个命令的区别: shell subshell source $ (commond) `commond` Linux执行Scripts有两种方式,主要区别在于是否建立subshell 1. source filename or . filename 不创建sub...

问题终结者
16分钟前
1
0
安装jdk和Tomcat

12月12日任务 16.1 Tomcat介绍 16.2 安装jdk 16.3 安装Tomcat Tomcat介绍 Tomcat是apache软件基金会(Apache Software Foundation)的Jakarta项目中的一个核心项目,由apache、Sun和其他一些...

robertt15
17分钟前
3
0
Beetl 免费视频

来自 https://my.oschina.net/gking?q=Beetl ,Beetl终于有人录制视频了 项目git地址:https://gitee.com/gavink/beetl-blog 视频地址:下载下来会更清晰,视频比较长,可使用倍速看 百度网盘...

闲大赋
29分钟前
0
0
isEmpty和null的区别

isEmpty和null的区别: 1.一个是对象为空(IsNull),一个是值为空(IsEmpty) 2.IsNull指任务类型变量是否为空包括对象类型的变量。 IsNull函数: 功能:返回Boolean的值,指明表达是否不包...

DemonsI
56分钟前
3
0
Centos7 安装mysql与php

https://blog.csdn.net/qq_36431213/article/details/79576025 官网下载安装mysql-server 依次使用下面三个命令安装 wget http://dev.mysql.com/get/mysql-community-release-el7-5.noarch.r......

Yao--靠自己
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部