文档章节

vue2.0+cordova 开发移动app

lindeyi
 lindeyi
发布于 2017/07/07 10:47
字数 517
阅读 260
收藏 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 vs 移动Web App

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

tsl0922
2012/11/27
1K
0
带你解析:原生APP与web APP的区别

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

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

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

数通畅联
2015/02/12
0
0
app开发

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

linxia111
2015/12/15
2
0

没有更多内容

加载失败,请刷新页面

加载更多

巨杉Tech | 微服务趋势下的数据库设计与应用简析

上周五(7月12日)巨杉数据库参与了由得到App主办八里庄技术沙龙活动,分享主题是关于分布式数据库架构与实战。 以下就是根据巨杉数据库现场分享的内容进行的分享实录整理。 巨杉数据库简介 ...

巨杉数据库
16分钟前
9
0
借助URLOS快速安装AliSQL

环境需求 最低硬件配置:1核CPU,1G内存(1+1)提示:如果你的应用较多,而主机节点的硬件配置较低,建议在部署节点时开通虚拟虚拟内存; 生产环境建议使用2G或以上内存; 推荐安装系统:Ubu...

躲猫猫_007
17分钟前
0
0
DM 源码阅读系列文章(九)shard DDL 与 checkpoint 机制的实现

作者:张学程 本文为 DM 源码阅读系列文章的第九篇,在 上篇文章 中我们详细介绍了 DM 对 online schema change 方案的同步支持,对 online schema change 同步方案以及实现细节等逻辑进行了...

TiDB
20分钟前
0
0
mysql指令

mysql指令 连接数据库 mysql -h 127.0.0.1 -u root -p -h : 数据库地址 -u : 用户名 -p : 密码 显示所有数据库 show databases; //显示所有数据库use XXX; //使用指定数据库show t...

xiaobai1315
23分钟前
0
0
C++STL常见面试题

1.C++ STL 之所以得到广泛的赞誉,也被很多人使用,不只是提供了像vector, string, list等方便的容器,更重要的是STL封装了许多复杂的数据结构算法和大量常用数据结构操作。vector封装数组,...

shzwork
33分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部