没有选择react-navite,而选择cordova+vue2.x,是因为react-navite有学习成本,并且cordova+vue2.x程序员
可以直接上手,性能上可以满足需求,成本低,开发速度快。 安装所需软件 安装node.js,官网下载,傻瓜式安装,安装成功截图
    安装vue,自行百度,成功截图

安装cordova
    安装成功截图:
    安装JDK
5 安装SDK studio等 稍微详细记录
新建项目与打包

    新建项目

创建一个名字为hello 包名为com.lex.hello的项目

cordova create hello com.lex.hello

    在cordoa里新建vue项目

vue init webpack


    启动vue web项目

npm run dev

    修改配置
cordova 默认访问路径为根目录下www文件夹
    所以我们需要修改打包默认路径:

在根目录:index.html增加引入cordova.js

<script type="text/javascript" src="cordova.js"></script>

将www目录下index.html中meta标签复制至根目录下index.html文件,即增加:

 <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"> git配置
修改根目录下.gitinore文件,切记一定要忽略,否则多人会遇到很多问题,遇到过很多坑: .DS_Store
node_modules/
/dist/
npm-debug.log*
yarn-debug.log*
yarn-error.log* # Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln *~
*.sw[mnpcod]
*.log
*.tmp
*.tmp.*
log.txt
*.sublime-project
*.sublime-workspace
.vscode/ .idea/
.sass-cache/
.tmp/
.versions/
coverage/
tmp/
temp/
hooks/
platforms/
plugins/
plugins/android.json
plugins/ios.json
www/
$RECYCLE.BIN/ Thumbs.db
UserInterfaceState.xcuserstate 编译和运行
执行cordova命令,添加andorid和ios插件,切记在根目录执行 cordova platform add ios cordova platform add android 编译: npm run build 为了节省时间,不用每次编译,安装,package.json: "scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build": "node build/build.js",
"build android": "npm run build && cordova build android",
"build ios": "npm run build && cordova build ios",
"android": "npm run build && cordova run android --device",
"ios": "npm run build && cordova run ios --device"
}, 命令详细讲解 build命令,讲项目编译至根目录www下,cordova默认访问 npm run build npm run android命令 最最常用,查看上面配置文件,是执行了npm run build && cordova run android --device两个命令
编译并安装至手机 npm run android 不编译 直接安装至手机执行 cordova run android 安装之时 要连接手机 手机开启USB调试模式 总结
写此文章主要深受此https://blog.csdn.net/liujiawei00/article/details/79446231小仙女影响,再此深表感谢。
以后我也会坚持写博客,目前项目cordova项目已经上线,我将会持续写教程和躺过的一些坑。

hybrid cordova+vue开发APP(一) 环境搭建的更多相关文章

  1. cordova + Vue 开发 APP 上手指南

    什么是 cordova cordova 是由 Apache 基金会支持的,使用 HTML5 + CSS3 + JS 来构建多平台 APP 程序的开发框架.其支持调用手机系统(Android.IOS.W ...

  2. HBuilder开发App Step1——环境搭建,HelloMUI 以及真机调试

    No1. 必须搭建java环境 只需要最基础的java环境,也就是cmd下可以运行java和javac即可, 具体教程请自行百度,都会有很详细的教程,这里不重点介绍. No2. 下载安装HBuilde ...

  3. 使用Kotlin开发Android应用 - 环境搭建 (1)

    一. 在Android Studio上安装Kotlin插件 按快捷键Command+, -> 在Preferences界面找到Plugins -> 点击Browse repositorie ...

  4. 黑马eesy_15 Vue:04.Vue案例(ssm环境搭建)

    黑马eesy_15 Vue:02.常用语法 黑马eesy_15 Vue:03.生命周期 黑马eesy_15 Vue:04.Vue案例(ssm环境搭建) 黑马eesy_15 Vue:04.综合案例(前端 ...

  5. Tiny4412 开发板 编译环境搭建【转】

    本文转载自:http://blog.csdn.net/beijiwei/article/details/51055369 版权声明:本文为博主原创文章,未经博主允许不得转载. /*********** ...

  6. 手机APP自动化环境搭建

    1 摘要 近年来,随着移动应用从数量上和逻辑复杂程度上的增长,以及产品发布周期的紧缩,使得回归测试迫在眉睫,鉴于此APP自动化测试变得越来流行,当前主流的APP自动化工具有:Appium.Roboti ...

  7. Cordova学习(一) 环境搭建

    一.什么是cordova Cordova提供了一组设备相关的API,通过这组API,移动应用能够以JavaScript访问原生的设备功能,如摄像头.麦克风等. Cordova还提供了一组统一的Java ...

  8. Android NDK开发之从环境搭建到Demo级十步流

    写在正文之前: 几个月没有更新博客,感觉有点生疏了,所以说不能断,一断人就懒. 其实这几个月也并不是什么事也没有做,俺可是时刻想着今年的任务呢,10本书,30篇博文...,这几个月间断性的也是在学习中 ...

  9. Vue项目的npm环境搭建

    Vue项目的环境搭建主要步骤如下: vue项目创建 安装NodeJS +到官网下载自己系统对应的版本,这里我们下载Windows系统的64位zip文件,下载完成后解压,可以看到里面有一个node.ex ...

随机推荐

  1. sublime text3 批量查找替换文件夹或项目中的字符

    1.点击左上角的“菜单”,在弹出的菜单中选择“打开文件夹”. 2.在文件夹上右击,选择“在文件夹中查找”选项 3.之后会软件底部会弹出对话框,分别输入要查找的内容和替换的内容,最后点击替换按钮 4.再 ...

  2. js条件判断if-else和switch、循环for和while

    条件判断和循环都使用{ }将代码块括起来,如果代码块只有一行,则可省略{ }. 在循环中,continue表示跳过当前循环继续进行下一次循环,break表示跳出整个循环. 1.条件判断if-else, ...

  3. fjwc2019 D6T1 堆(组合数+打表)

    #193. 「2019冬令营提高组」堆 但是每个点都遍历一遍,有些点的子树完全相同却重复算了 忽然记起完全二叉树的性质之一:每个非叶节点的子树中至少有一个是满二叉树 那么我们预处理满二叉树的那一块,剩 ...

  4. Solr导入MySQL数据之dataimport-handler

    Solr不借助手动JSolr编程情况下也可以将Mysql的数据导入到Solr中.实现方式是安装dataimport-Handler从关系数据库将数据导入到索引库. 1.向SolrCore中加入jar包 ...

  5. 【题解】Luogu P2522 [HAOI2011]Problem b

    原题传送门 这题需要运用莫比乌斯反演(懵逼钨丝繁衍) 我们看题面,让求对于区间\([a,b]\)内的整数x和\([c,d]\)内的y,满足$ gcd(x,y)=k$的数对的个数 我们珂以跟容斥原理(二 ...

  6. android学习:apiDemos导入时R.java无法生成的问题

    准备导入apiDemos研究一下别人的代码,发现导入后不能正常build,无法生成R.java,发现res/layout/progressbar_2.xml里有几个 <ProgressBar a ...

  7. 20145325张梓靖 《网络对抗技术》 Web安全基础实践

    20145325张梓靖 <网络对抗技术> Web安全基础实践 实验内容 使用webgoat进行XSS攻击.CSRF攻击.SQL注入 XSS攻击:Stored XSS Attacks.Ref ...

  8. tf.nn.max_pool

    tf.nn.max_pool(value, ksize, strides, padding, name=None)   参数是四个,和卷积很类似: Args Annotation 第一个参数value ...

  9. gcc,make,cmake

    1.gcc是GNU Compiler Collection(就是GNU编译器套件),也可以简单认为是编译器,它可以编译很多种编程语言(括C.C++.Objective-C.Fortran.Java等等 ...

  10. topcoder srm 525 div1

    problem1 link 最后剩下的是中间的一个矩形.所以可以直接枚举这个矩形,如果它含有的硬币个数等于$K$,则再计算移动的最少次数,更新答案. problem2 link 首先,每个节点发送每种 ...