//安装 vue-cil npm install --global vue-cli //安装cordova npm i cordova -g
//新建cordova 项目
cordova create vue-cordova
//进入目录
cd vue-cordova
//vue-cli新建vue项目
vue init webpack vueprojectname
//进入vue 项目目录
cd vueprojectname
//安装依赖
npm i
运行项目
npm run dev
编译项目
npm run build
打开vue项目目录下面的,添加
<script src="cordova.js"></script>
打开/config/index.js
先删除 cordova项目下的www文件夹里的东西
执行编译vue项目将输出到 cordova 项目目录下的www文件内
npm run build
添加android平台并打包
//添加android 平台 cordova platform add android //打包android apk cordova build android
添加ios平台打包
//添加ios平台 cordova platform add ios
打开platform/ios/***.xcodeproj以xcode打开,签名后打包。
效果图
在cordova-vue/vue/下新建文件夹cordova
再cordova下新建cordova.js
const pluginslist = [ 'cordova-plugin-camera', 'cordova-plugin-device', ] exports.install = (vue, options) => { vue.cordova = vue.cordova || { deviceready: false, plugins: [] } vue.cordova.on = (eventname, cb) => { document.addeventlistener(eventname, cb, false) } document.addeventlistener('deviceready', () => { vue.cordova.deviceready = true }, false) pluginslist.foreach(pluginname => { let plugin = require('./plugins/' + pluginname) plugin.install(vue, options, pluginloaded => { if (pluginloaded) { vue.cordova.plugins.push(pluginname) } if (vue.config.debug) { console.log('[vuecordova]', pluginname, '→', pluginloaded ? 'loaded' : 'not loaded') } }) }) }
在main.js 添加
import cordova from './cordova/cordova.js' vue.use(cordova)
新建文件夹plugins下新建文件
cordova-plugin-camera.js
exports.install = function (vue, options, cb) { document.addeventlistener('deviceready', () => { if (typeof navigator.camera === 'undefined') { return cb(false) } vue.cordova.camera = navigator.camera return cb(true) }, false) }
cordova-plugin-device.js
exports.install = function (vue, options, cb) { document.addeventlistener('deviceready', () => { if (typeof device === 'undefined' || typeof device.cordova === 'undefined') { return cb(false) } vue.cordova.device = { cordova: null, model: null, platform: null, uuid: null, version: null, manufacturer: null, isvirtual: null, serial: null } object.keys(vue.cordova.device).foreach(key => { if (typeof device[key] !== 'undefined') { vue.cordova.device[key] = device[key] } }) return cb(true) }, false) }
同时要在cordova项目目录下 安装cordova-plugin-device,和cordova-plugin-camera插件
cordova plugin add cordova-plugin-device cordova plugin add cordova-plugin-camera
如此类推,如果你需要别的插件也是这样添加。
整体项目结构
如对本文有疑问, 点击进行留言回复!!
清除新版Google Chrome浏览器中表单控件(input,button...)默认的黑色边框
荐 20200714——git/mac配置/项目运行步骤/一些报错
antd 菜单组件 使用时报错:Cannot read property ‘isRootMenu‘ of undefined
CSS|div的style=“background-image: url(img/a.bmp)图片显示不出来
硬件仪表盘账号建立指导(一) --WHQL认证测试结果提交账号(一)
cookie的规范Cookie的不可跨域名性或Cookie与域名的关系
网友评论