cordova 是hybrid开发app的一个框架，通过js桥接原生api实现了js调用原生的一些功能；本打算学习下阿里的weex；可是一直打包不了，加上之前也用过cordova,打算使用cordova尝试一下；整合上vue这种开发界面的利器是不是更加爽呢？

1.环境搭建

 > cordova环境搭建

        由于我们使用cordova作为app开发框架，我们得先搭建cordova;cordova的安装可以使用npm yarn等安装；全局安装: npm install -g cordova

由于需要打包app自然需要android sdk 或者 ios sdk (土豪们的mac下xcode是要安装的)

可以参考官网: http://cordova.apache.org/#getstarted

> vue环境搭建

        vue的环境搭建没什么难度吧，直接按照官网做就行

vue-cli的安装: npm install -g vue-cli

2.构建项目

       创建项目由于是将cordova和vue整合,而vue使用webpack调试，发布；因此必须按照先 cordova 后 vue的方式进行；不过你可以尝试下先创建vue项目文件再创建cordova项目，看会报什么错。

> 搭建cordova项目

        按照官网示例cordova create appName com.app.appName appName方式创建一个项目，生成如下结构项目文件：

添加android平台sdk：cordova platform add android

这是一个标准的cordova项目目录，接下来我们将在该目录下通过vue-cli添加vue项目文件到该目录

> 搭建vue项目

      同样安装vue官网示例创建vue项目： vue init webpack appName ； 注意此时会提示已存在该文件夹，是否覆盖，如下图：

我们选择Y继续

好了，我们搭建好了vue的项目，进行appName项目目录，安装包 npm install

测试vue：npm run dev 正常打开http://localhost:8080/即为正常

此时项目结构如下：

3. 整合vue到cordova

如果熟悉cordova的人知道，cordova的html页面目录是存放在上图的www目录下的，而现在我们的vue源码目录再src下，打包后存放在dist目录下，cordova的入口文件www/index.html主要是引入了cordova.js作为桥接，如下代码:

<head>

        <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">

        <meta name="format-detection" content="telephone=no">

        <meta name="msapplication-tap-highlight" content="no">

        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">

        <link rel="stylesheet" type="text/css" href="css/index.css">

        <title>Hello World</title>

    </head>

    <body>

        <div class="app">

            <h1>Apache Cordova</h1>

            <div id="deviceready" class="blink">

                <p class="event listening">Connecting to Device</p>

                <p class="event received">Device is Ready</p>

            </div>

        </div>

        <script type="text/javascript" src="cordova.js"></script>

        <script type="text/javascript" src="js/index.js"></script>

    </body>

对比上面的代码和vue打包后的index.html文件代码，我们可以发现，cordova引入了Content-Security-Policy来设置比较宽松的资源加载策略和防止xss攻击；我们将其加入到根目录vue的index.html的头部，同时我们将cordova.js也加入到页面底部，最终我们根目录下的页面代码如下：

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">

    <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">

    <meta name="format-detection" content="telephone=no">

    <meta name="msapplication-tap-highlight" content="no">

    <title>vue-cordova-app</title>

  </head>

  <body>

    <div id="app"></div>

    <script type="text/javascript" src="cordova.js"></script>

    <!-- built files will be auto injected -->

  </body>

</html>

此时，我们只要能将vue打包的目标路径定向到www目录即可完成整合。

接下来就是修改vue的webpack打包，（webpack高手请忽略）

  • 修改 config/index.js 修改 ../dist 为 ../www
  • 修改 assetsSubDirectory 为 './'
  • 修改 assetsPublicPath 为 ''

上述修改就将webpack打包目标路径改为www，将资源路径由dist/static/js改为了www/js目录、dist/static/css 改为了 www/css目录。

执行命令npm run build 打包试试。

最后再cordova run android试试

好了，总算敲完了...

cordova 整合 webpack vue的更多相关文章

  1. 做一个gulp+webpack+vue的单页应用开发架子

    1.目标 最近项目上的事情不多,根据我自己的开发习惯,决定开发一些简单的开发架子,方便以后事情多的时候直接套用.本文讲的一个gulp+webpack+vue的单页应用架子,想要达到的目的: 可以通过命 ...

  2. gulp+webpack+vue

    gulp+webpack+vue 章节目录 1.目标 2.实现 2.1合并库文件 2.2组织业务代码 2.3打包开发代码 2.4使用webpack-dev-server和热替换插件HotModuleR ...

  3. webpack + vue最佳实践

    webpack + vue最佳实践 我的原文地址:http://www.xiaoniuzai.cn/2016/10/04/webpack%20+%20vue%E6%9C%80%E4%BD%B3%E5% ...

  4. webpack+vue起步

    本文基于vue1.x 基于vue2.x&webpack2.x请移步至 Vue2.x踩坑与总结Webpack2.x踩坑与总结 记得第一次知道Vue.js是在勾三股四大大的微博,那时候他开始翻译v ...

  5. Wabpack系列：在webpack+vue开发环境中使用echarts导致编译文件过大怎么办？

    现象,在一个webpack+vue的开发环境中,npm install echarts --save了echarts,然后在vue文件中直接使用 import echarts from 'echart ...

  6. 基于 Webpack & Vue & Vue-Router 的 SPA 初体验

    基于 Webpack & Vue & Vue-Router 的 SPA 初体验 本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com ...

  7. 基于 Laravel 开发 ThinkSNS+ 中前端的抉择（webpack/Vue）踩坑日记【ThinkSNS+研发日记系列】

    在上一篇文章< ThinkSNS+基于Laravel master分支,从1到 0,再到0.1>,简单的介绍了 社群系统ThinkSNS+ ,这里分享在开发过程中,前端选择的心理活动. L ...

  8. Webpack+Vue+ES6 前端组件化开发mobile-multi-page应用实战总结

    本文版权归博客园和作者吴双本人共同所有 转载和爬虫请注明原文地址 www.cnblogs.com/tdws 一.写在前面 项目上线有一段时间了,一个基于webpack+vue+ES6的手机端多页面应用 ...

  9. webpack+vue项目实战（四，前端与后端的数据交互和前端展示数据）

    地址:https://segmentfault.com/a/1190000010063757 1.前言 今天要做的,就是在上一篇文章的基础上,进行功能页面的开发.简单点说呢,就是与后端的数据交互和怎么 ...

随机推荐

  1. Nginx -- proxy_pass配置

    一.proxy_pass 作用域: location 不影响浏览器地址栏的url 设置被代理server的协议和地址 协议可以为http或https 地址可以为域名或IP 二.配置规则 2.1 测试环 ...

  2. java 关于值引用、地址引用的问题

    8种基本引用类型 四种整数类型(byte.short.int.long) 两种浮点数类型(float.double) 一种字符类型(char) 一种布尔类型(boolean) 以及如String, f ...

  3. JavaScript中callee与caller，apply与call解析

    1. arguments.callee 1.1 解释 返回正被执行的 Function 对象,也就是所指定的 Function 对象的正文. 1,.2 说明 callee 属性的初始值就是正被执行的 ...

  4. 原生JS实现点击一个按钮显示一个div，再点击按钮div隐藏，或点击除div外其它空白处div隐藏

    <!DOCTYPE html> <html style="font-size: 24px"> <head> <title>js点击按 ...

  5. 边双连通缩点+树dp 2015 ACM Arabella Collegiate Programming Contest的Gym - 100676H

    http://codeforces.com/gym/100676/attachments 题目大意: 有n个城市,有m条路,每条路都有边长,如果某几个城市的路能组成一个环,那么在环中的这些城市就有传送 ...

  6. Mahout源码目录说明&&算法集

    Mahout源码目录说明 mahout项目是由多个子项目组成的,各子项目分别位于源码的不同目录下,下面对mahout的组成进行介绍: 1.mahout-core:核心程序模块,位于/core目录下: ...

  7. 一张图搞懂Spring bean的完整生命周期

    一张图搞懂Spring bean的生命周期,从Spring容器启动到容器销毁bean的全过程,包括下面一系列的流程,了解这些流程对我们想在其中任何一个环节怎么操作bean的生成及修饰是非常有帮助的. ...

  8. 微信小程序开发（三）项目目录及文件结构

    第二章我们已经创建了一个Hello WXapplet示例小程序.我们从文件目录结构来了解Hello WXapplet项目的构成. 目录结构显示,在小程序项目的根目录下面包含3个app开头的文件(app ...

  9. CodeForces - 999C

    You are given a string ss consisting of nn lowercase Latin letters. Polycarp wants to remove exactly ...

  10. c语言学习笔记.指针.

    指针: 一个变量,其值为另一个变量的地址,即,内存位置的直接地址. 声明: int *ptr; /* 一个整型的指针,指针指向的类型是整型 */ double *ptr; /* 一个 double 型 ...