cordova+vue-simple搭建和调试

最新推荐文章于 2024-07-19 17:14:42 发布

杨园园的微博

最新推荐文章于 2024-07-19 17:14:42 发布

阅读量1.6k

点赞数 1

分类专栏： cordova vue-simple 文章标签： cordova vue-simple

本文链接：https://blog.csdn.net/rosy_yang/article/details/85094896

版权

cordova 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

vue-simple

1 篇文章 0 订阅

订阅专栏

一vue-simple基于的项目原型

vue-simple页面大体框架是运用vue的脚手架集成的，安装过程如下：

1.全局安装vue脚手架工具/vue客户端（npm 包管理器，也可用淘宝镜像cnpm）

  npm install -g vue-cli

2.下载vue脚手架项目（简单配置的webpack）

vue init webpack-simple my-project

3.进入vue项目的根目录

cd my-project

4.安装依赖

npm install

5.本地起服务运行（node架起的服务）

 npm run dev

6.需要打包的静态文件 ( 命令操作名字在配置查找可知道具体干了什么)

 npm run build

总结：以上是最基本的脚手架的操作步骤，下面内容根据我们自己掌上工单做对应修改，主要实现对接cordova和静态本地显示的功能。

二 vue-simple目前项目打包成静态本地直接点击index可执行文件（不需要服务）

1.webpack.config.js 文件中打包的出口路径配置成如下图： (方便静态和访问到)

  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: './dist/',
    filename: 'build.js'
  },

2.package.json文件中配置只留取build 和dev的命令操作

  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --inline --hot --host 127.0.0.1",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },

3.main.js文件中mode模式去掉

const router = new VueRouter({
	linkActiveClass:'mui-active', //可以修改router-link-active 为mui-active来解决tab栏的选中bug
    // mode: 'history',  //不想看到#号则配置这个 (可以用来解决与html本身锚点冲突的问题)
    routes: [

   		// { path: '/', redirect:'/login'},
        { path: '/', component: login2 },
        { path: '/login', component: login2 },
        { path: '/Home', component: Home },

4.index文件路径修改成静态文件的标准路径

<script src="./dist/build.js"></script>

5.main.js 文件头部添加代码

Vue.config.productionTip = false;

6.直接打包，点击index就可以看到静态网站了

三与Cordova连接的vue-simple的操作

1.（保持上面操作二不变）修改 main.js的文件内容

document.addEventListener("deviceready",function(){
    new Vue({
        el: '#app',
        router:router, //使用路由对象实例
        render: h => h(App)
    })
}, false);

2.在vue-simple的根目录执行下面命令

  npm run build

3.将执行后的index文件和dist文件一并复制到cordova的最外部的www文件下

4.修改复制到www文件下的index文件

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<meta name=viewport content="width=device-width,initial-scale=1">
<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 *; img-src 'self' data: content:;">
        <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">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <title>baoge</title>
  </head>
  <body>
  <div id=app></div> 
  <script src="dist/build.js"></script>
  <script type="text/javascript" src="cordova.js"></script>
  </body>
  </html>

5.在cordova的根目录执行一下命令(此命令是安卓平台用的)

  cordova build android

6.usb连接手机，执行，在手机上查看运行情况。

四生成的apk现在浏览器中排查（步骤下面列出）

1 platforms–》android–》app–》build–》outputs–》apk–》debug 文件夹下的 app-debug.apk文件下载到手机端，连上usb，点击运行

2 打开链接 chrome://inspect/#devices 这是chormo浏览器的，手机端的apk操作的时候，可以看到网页有新内容添加，点击进去，即可在浏览器端查错和测试

五 cordova自身有的插件的应用在vue项目中如何应用（相机插件为例子）

cordova的很多插件挂在了navigator全局对象下，

摄像头cordova-plugin-camera

console.log(navigator.camera)
也就是无论调用什么，前面加上 navigator应该就ok

六 vue-simple项目在cordova中部署步骤（vue-simple项目打包直接进入cordova外层www文件夹下）

1、将vue-simple放在cordova项目的根目录中

2、将vue-simple的webpack.config.js文件中修改如下（两个出口路径的配置修改）：

output: {
  path: path.resolve(__dirname, '../www/dist'),
  publicPath: '../www/dist',
  filename: 'build.js'
},

3、打包掌上工单项目，在掌上工单根目录执行以下命令：

npm run build

4、如需要在安卓端展示app，参照目录三的4、5、6；