三、创建项目

1)生成cordova项目

cordova create 项目目录名 反向域 项目名 

cordova create testApp com.test.app

这里testAPP是项目的名字,com.test.app是APP的包名,可以随意取,最好按照“com.” 开头

codova+vuecil3开发配置文档(三) 创建项目

目录说明:

Hooks: 存放readme.md文件

Platfroms:通过cordova platforms add android 添加的安卓相关文件就放在里面,这个文件夹比较重要,打包生成的apk也在这个文件夹下

plugins:cordova安装的插件在此文件夹下

www:前端代码,如html,js,css等代码(vue打包后的文件就放在这里)

config.xml:打包项目的配置文件,可以修改APP的包名,应用名称等

 

 

将vue 项目放入 cordova中

cd cordova的项目根目录下

执行vue create vue-src(这里vue-src可以换,只不过这样起名比较常用)

codova+vuecil3开发配置文档(三) 创建项目

3)vue配置

cd 到 vue项目下执行

vue ui

codova+vuecil3开发配置文档(三) 创建项目

点击变量

codova+vuecil3开发配置文档(三) 创建项目

将输出目录改为 ../www (此时你build出来的文件会直接放在上一级的www文件中)

点击配置 配置vue项目 设置公共路径为 ./ (否则可能出现生成的apk启动时会出现白屏的现象)

输出目录改为 ../www

codova+vuecil3开发配置文档(三) 创建项目

 

保存后,vue目录下会自动生成vue.config文件

codova+vuecil3开发配置文档(三) 创建项目

如果不想用vue ui 来配置,也可以直接建vue.config.js文件自行配置

codova+vuecil3开发配置文档(三) 创建项目

vue文件改造

为了使vue更好的为移动端服务,我们需要改动以下文件

将cordova项目www目录下的index.html打开,复制所有meta

codova+vuecil3开发配置文档(三) 创建项目

覆盖掉vue public 下的index.html,并添加cordiva.js

codova+vuecil3开发配置文档(三) 创建项目

打开vue 的main.js

codova+vuecil3开发配置文档(三) 创建项目

改造为

codova+vuecil3开发配置文档(三) 创建项目

 

如果只想在浏览器中查看效果则不用加,加了后会显示不出

相关文章:

  • 2021-08-31
  • 2021-07-21
  • 2021-06-24
  • 2022-12-23
  • 2021-12-15
  • 2021-08-06
  • 2022-12-23
  • 2021-12-29
猜你喜欢
  • 2021-06-29
  • 2021-10-19
  • 2021-12-27
  • 2021-12-20
  • 2021-05-02
  • 2021-06-11
  • 2021-04-14
相关资源
相似解决方案