Cordova + vue 创建移动端

  1. 安装工具要求
    JDK 可以更新到最新版本
    Node.js V8.12
    谷歌浏览器 可以更新到最新版本
    androidSDK(installer_r24.4.1-windows) 可以更新到最新版本
    Gradle 可以更新到最新版本
    apache-ant-1.10.1 可以更新到最新版本

  2. 系统环境配置安装
    1).安装JDK 并配置环境变量
    在这里插入图片描述
    在这里插入图片描述
    2).安装 node.js
    尽量安装8.12版本, 为以后的热更新配置做准备,在此文档编写之前高版本的Node.js还不能正常配置热更新,会出现内置错误。
    3). 安装谷歌浏览器
    4). 安装 安卓SDK(installer_r24.4.1-windows) 安装目录 放在一个较大的盘 不要放在C盘 不要放在C盘 不要放在C盘 重要的事情来3 边 谁知道怎么改成红色的 。。。。
    在这里插入图片描述
    直接点击安装 。
    安卓环境变量配置
    新建ANDROID_HOME

在这里插入图片描述

Path 添加
%ANDROID_HOME%\platform-tools
%ANDROID_HOME%\tools
在这里插入图片描述
5). Gradle
解压压缩包进行环境变量配置 GRADLE_HOME
在这里插入图片描述
Path 添加环境变量 %GRADLE_HOME%\bin
在这里插入图片描述
6.)如果你的系统是64 为的 并且内存比较大的话(8G 的不行 16G 的可以 这个大坑,差点摔死我) 不需要配置
在环境变量中添加一个系统变量,变量名:_JAVA_OPTIONS,变量值:-Xmx512M
7).配apache-ant
在这里插入图片描述
Path 添加 %ANT_HOME%\bin
在这里插入图片描述
3.开发环境安装
1). 全局安装Cordova cmd 下运行
npm install -g cordova

2). 全局安装 Vue 脚手架 cmd 下运行

npm install -g vue-cli

3). 全局安装热更新环境 cmd 下运行

npm install -g cordova-hot-code-push-cli
  1. 新建项目(项目根目录即为GHAPP 文件夹下 Vue目录即为GHAPP 文件夹下vue 文件夹 )
    1).cordova create GHAPP
    在这里插入图片描述

2). 添加打包的平台
项目 根目录下执行以下语句
cordova platform add android –save
cordova platform add ios –save
cordova platform add browser –save
3).创建Vue 项目
在项目根目录 下创建Vue 项目
vue init webpack vue
在这里插入图片描述
4)修改 \vue\config\ index.js 下的文件.
在这里插入图片描述
5). 修改 \vue\src\ main.js

document.addEventListener("deviceready", function() {
	new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})
})

在这里插入图片描述
原来的保留不然 npm run build 的文件不能再浏览器中显示。
5.开始打包
1). Vue 文件夹下执行生成

npm  run build

2).安装相应的安卓API
根目录下运行cordova platform 查看安卓版本 然后打开 SDK Manager.exe 进行安装
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
3). 生成 APP
根目录下运行 cordova build android

对于Vue移动端项目的实战,以下是一些常见的步骤和建议: 1. 创建项目:使用Vue CLI来创建一个新的Vue项目。可以选择使用预设模板,如vue create my-project,或者使用Vue UI图形界面创建项目。 2. 选择适合移动端的UI框架:Vue有很多适用于移动端开发的UI框架,例如Vant、Mint UI、Framework7等。根据项目需求和个人喜好选择一个适合的UI框架。 3. 响应式布局:针对移动设备的不同尺寸和屏幕方向,需要使用CSS媒体查询和弹性布局等技术来实现响应式布局,确保页面在不同设备上都能良好显示。 4. 移动端交互:移动设备的交互方式与PC端不同,需要考虑手势操作、触摸事件等。可以使用第三方库如hammer.js来处理手势操作,同时合理设计交互元素和按钮大小,以提升用户体验。 5. 优化性能:移动设备的资源有限,需要对代码进行优化以提升性能。可以使用懒加载、图片压缩、代码分割等技术来减小页面加载和渲染的压力。 6. 使用移动端调试工具:在开发过程中,可以使用Chrome开发者工具的模拟器或真机调试来测试页面在移动设备上的表现。 7. 打包与发布:使用Vue CLI进行打包,生成可部署的静态文件。可以选择将项目部署到服务器上,或者使用移动端应用打包工具如Cordova、React Native等将Vue项目打包成原生应用。 以上是一些开发Vue移动端项目的基本步骤和建议,希望对你有所帮助!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值