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试试
好了,总算敲完了...
最近;完整的vue和cordova的整合模板项目代码我提交到git了 https://github.com/lysuse/vue-cordova-app
欢迎star; 可以使用 vue init lysuse/vue-cordova-app appName 直接初始化哦!
相关推荐
Framework7-Vue-Webpack Cordova模板 您可以使用此模板完美地启动新的cordova项目。 该模板使用: 最低要求 科尔多瓦: 6.0.0 Node.js: 6.5.0 (支持ES6) 警告(对于Linux和Mac OS用户): 对于实时重载,我...
基于vue2.0构建的在线电影网【film】,webpack vue vuex vue-loader keepAlive muse-ui cordova 全家桶,cordova 打包成APP
Vuetify-Cordova VuetifyJs App模板可用于Cordova App。 Web演示 Android演示 最初设定 # install dependencies npm install # add respective platforms cordova platform add android cordova platform add ios ...
Framework7 Vue + Webpack应用程序模板 具有Webpack设置且具有热重载和CSS提取功能的全功能Framework7 Vue。 基于 用法 1.下载此存储库 git clone https://github.com/framework7io/framework7-template-vue-webpack...
Vue-Webpack-样板 功能齐全的Webpack设置,包括热重载,保存时不掉毛,单元测试和CSS提取。 该模板与Vue 2.0兼容。 这是官方webpack模板的分支,带来了更多选项,例如TypeScript,Library,Class-Style组件... ...
CordoVue 一个使用Vue,Vuex,Vue-router,ESLint和Webpack的简单apache cordova示例项目。入门先决条件要使用此功能,您将需要Node.js v6或更高版本。安装通过Github $ git clone ...
恩伯·科尔多瓦(Ember Cordova)科伯我们已经将ember-cordova迁移到corber项目,该项目增加了对Vue / React / Webpack应用程序的支持。 迁移后,Ember用户将看不到任何功能损失。 大多数新功能将出现在corber中,...
具有Babel,Webpack和热重载的Vue.js,Framework7和Cordova / PhoneGap模板 入门 先决条件 要使用此模板,您将需要Node.js v5或更高版本。 安装 要将其用作模板,请使用Cordova 6.0.0+并创建一个新项目: cordova ...
日记应用日记app 带有Framework7的Cordova项目-Vue-Webpack构建设置# install dependenciesnpm install# add platformcordova platform add browser# start servercordova run browser -- --lr# build for ...
响应式设计,SPA /电子/移动/ Cordova兼容良好 包含tagView快捷导航,面包屑导航等SPA应用常用功能 内置Material Design图标集 简单的代码逻辑,多种自定义组件,高度可定制性(只有1600行代码) 完全开源及免费 ...
Corber是一个CLI,可改善使用Cordova的Vue,Ember,Glimmer和React应用程序的混合应用程序构建体验。 Corber使用一个命令处理框架和应用程序的构建以及验证: corber build不影响现有Web流的情况下。 CLI还包括...
是一款基于vue.js开发的开源的前端框架, 它能帮助web开发者快速创建以下网站:响应式网站,渐进式应用,手机应用(通过Cordova),跨平台应用(通过Electron)。 Quasar允许开发者在只写一次代码的情况下发布到...
f7-vue-webpack起源/主服务器f7-webpack在 fis3在要求科尔多瓦^9.0.0 框架7 ^4.5.0 framework7-vue ^4.5.0 要构建和运行应用,您需要为要定位的每个平台安装SDK。 要检查您是否满足构建平台的要求: $ cordova ...
Framework7 Vue + Webpack应用程序模板 具有Webpack设置且具有热重载和CSS提取功能的全功能Framework7 Vue。 基于 用法 1.下载此存储库 git clone https://github.com/framework7io/framework7-template-vue-webpack...
Webpack Phaser.js Vue.js Netlify Heroku Node.js 建立 在拥有项目的工作副本之前,您需要安装一些东西。 1.安装node.js和npm: 2.安装依赖项(可选地,您可以安装 ): 导航到克隆的存储库目录。 跑: ...
OneRemoteFramework7 CLI选项使用以下选项创建的Framework7应用程序: { "cwd": "/Users/Iman/Desktop/OneRemote", "type": [ "web", "cordova" ], "name": "OneRemote", "framework": "vue", "template": "single-...
"cordova" ], "name": "Framework7 SQLite Sample", "framework": "vue", "template": "blank", "bundler": "webpack", "cssPreProcessor": false, "theming": { "customColor": false, "color": "#007aff...
现场演示: ,目录关于Pychat是一种开源的,绝对免费的通讯工具,专门用于共同使用。 它是替代Slack / Discord创建的。 请参阅下表了解其主要功能。我什么时候应该使用pychat 皮查特松弛Skype的电报Viber 不和谐开源...
PhoneGap / Cordova [GitHub] MUI [GitHub] React Native [GitHub] Ionic [GitHub] CoffeeScript [GitHub] TypeScript [GitHub] ClojureScript [GitHub] ...