Cordova+Vue环境搭建

尤雨滴
324 阅读2分钟

  • 前言:因这个月要做一个会议APP,上线时间短,故采用混合APP,达到快速生产的目的,虽然做出来的交互效果跟原生的是有一些距离,但好在没有过多的花里胡哨的操作

  • 关于技术选型:因为团队里面只有我们老大做过hybrid,所以对cordova比较了解,虽然知道当下RN,uni-app,flutter很火,但是考虑到学习成本,还是选择了经典的cordova+vue全家桶

cordova环境搭建:

1.node
  需要node环境,若是前端的开发者,则这个肯定有
  没有的话,[进入node官网](https://nodejs.orj/en/): ,下载安装,
  控制台 node -v,输出了v10.16.0,即代表OK

2.npm
  node安装了,npm也就有了,同样 npm -v,输出 6.9.0, 即OK

3.安装JDK
  [进入SUN官网](http://java.sun.com/javase/downloads/index.jsp),找到window安装,
  我的是同事发给我的,好像 1.8.0版比较稳定,他们推荐这个版本
  安装之后,配置环境变量:
  JAVA_HOME:D:\Java\jdk1.8.0_91
  PATH:%JAVA_HOME%\bin
  CLASSPATH:.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar
4.安装Android Studio
  或单独安装 SDK和gradle,由于我安装老是下载不了SDK的一些插件,遂放弃
  [AS官网](http://www.android-studio.org/),我用的是3.5版本
  [不会安装的看这个](https://www.cnblogs.com/xiadewang/p/7820377.html)
  apk打包用as,IPA打包还要下xcode,
  或者用命名行打包也可以: cordova build android 或者 cordova build ios
5.安装cordova
  npm install -g cordova
  cordova -v,即可查看是否安装成功,出现版本号即安装OK

创建cordova app

  打开控制台:cordova create my-app
  my-app是项目名称,
  执行完之后,进入 项目目录,npm install 安装依赖包

项目目录结构如下

cordova目录

创建vue项目

  在cordova下面的一层目录创建vue项目,用vue-cli创建项目,过程不赘述了

项目目录结构如下

cordova+vue

启动vue项目,app项目

在vue目录下面,npm run dev 即可开启vue项目,
但只能在浏览器运行,若想要真正跑起来,则需要 npm run build,
将构建后的dist下面的index.html和static目录拷贝到cordova下面的www目录覆盖掉它原来的index.html,
打包安卓需要在cordova下面添加Android平台:cordova platform add android
打包ios需要在cordova下面添加ios平台:cordova platform add ios
打包apk命令为 cordova build android
打包ipa命令为 cordova build ios

修改vue构建后路径

若不想每次 npm run build,再拷贝文件到www下面,更改构建后的路径即可,
到vue/config/index.js,修改如下

cordova+vue

上述为创建的大致步骤,供参考

avatar
文章
阅读
粉丝