hybridcordova+vue开发app环境搭建

brave-sailor      2022-02-14     338

关键词:

 没有选择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项目已经上线,我将会持续写教程和躺过的一些坑。

 

vue配置开发环境和生产环境(代码片段)

介绍本文主要介绍开发、测试以及生产环境的配置。(以下内容可根据需求进行配置)步骤1、在src同级目录也就是根目录下新建文件:.env.development(开发环境)、.env.test(测试环境)、.env.production文... 查看详情

测试同学动手搭个简易web开发项目(代码片段)

技术栈node.js,vue.js,axios,python,django,orm,restfulapi,djangorestframework,mysql,nginx,jenkins.环境配置操作系统Windows7旗舰版,ServicePack1。前端Node.js>node-vv12.18.0>npm-v6.14.4Vue.js>vue-V(大写)@vue/cli4.4.1 查看详情

Vue App 环境变量可以在开发模式下读取,但不能在生产模式下读取

】VueApp环境变量可以在开发模式下读取,但不能在生产模式下读取【英文标题】:VueAppenvironmentvariablescanbereadindevelopmentmodebutnotinproductionmode【发布时间】:2020-06-0709:22:11【问题描述】:我正在使用Vuecli创建一个以Firebase作为后端... 查看详情

uni-app简介条件编译app端nvue开发html5+开发环境搭建自定义组件配置平台环境unicloud云开发平台(代码片段)

...态,很多第三方接入只需简单配置即可。优势:开发者数量多、平台能力不受限(支持原生代码混写和原生sdk集成)、性能优越、周边生态丰富、学习成本低、开发成本低代码风格:整体采用vue代码开发风格&#... 查看详情

uni-app简介条件编译app端nvue开发html5+开发环境搭建自定义组件配置平台环境unicloud云开发平台(代码片段)

...态,很多第三方接入只需简单配置即可。优势:开发者数量多、平台能力不受限(支持原生代码混写和原生sdk集成)、性能优越、周边生态丰富、学习成本低、开发成本低代码风格:整体采用vue代码开发风格&#... 查看详情

开发环境搭建

...师已经在虚拟机里面安装好了。老师希望学生专注于后端开发,在其他方面会尽可能的给大家带来方便。  查看详情

微信小程序如何搭积木式开发?(代码片段)

...了讲解,了解了各文件的作用以及语言类型与web网页开发语言的区别。那么今天就来和大家探讨一下微信小程序的搭积木式开发,其实就是我们不需要再去写一些功能的底层代码,只需要用几行代码去调用微信环境的... 查看详情

vuecli3配置开发环境测试环境生产(线上)环境(代码片段)

...建vue项目是精简版的少了build和config这2个文件,所以配置开发环境、测试环境、生产环境的话需要自己创建env文件。需要注意2点:1、cli2创建项目生成的config文件里的env文件是js后缀2、cli3创建自定义env文件的话不需要js后缀下面... 查看详情

vue离线引入依赖包

参考技术A安装vue依赖包熟悉vue的同学,做完上面两步,vue开发环境基本就搭建好了。不过,今天我们是要搭建内网环境,现在才刚开始。 查看详情

vue3.0配置开发环境和测试环境

...件(与vue.config.js同级).env  线上环境.env.development开发环境.env.testbuild 测试环境  2.在上边3个文件中:使用VUE_APP_URL=“接口url”书写格式:VUE_APP_[自定义name]           ... 查看详情

搭建一套java开发环境以及使用eclipse从头一步步创建java项目

  一、java开发环境的搭建  在windows环境下怎么配置环境。  1.首先安装JDK  java的sdk简称JDK,去其官方网站下载JDK。 https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html   2.环境变量配置  运行下... 查看详情

vuex实践之路——笔记本应用

...nstallvuex-g--save-devVuex是什么?Vuex是一个专为Vue.js应用程序开发 查看详情

小程序开发总结一:mpvue框架及与小程序原生的混搭开发(代码片段)

...场景对小程序的兼容要求特别高的时候需要用原生的方式开发解决思路mpvue的入口文件导入旧版路由配置文件公共样式字体图标迁移app.wxss->app.vue中less(mpvue的公共样式)旧项目导入旧项目(native 查看详情

linux笔记-达梦dpi开发环境搭建(无需搭建达梦库)(代码片段)

...so和对应的include导出来,到新机器上,就是DPI的开发环境了。其中so为:libdmdpi.so但这里要保证几点:①搭建好达梦库的机器操作系统与新机器要一致。②最后CPU的架构都是一致的,比如X86_64架构。编译时,... 查看详情

测试同学动手搭个简易web开发项目(代码片段)

技术栈node.js,vue.js,axios,python,django,orm,restfulapi,djangorestframework,mysql,nginx,jenkins.目录技术栈环境配置操作系统前端Node.jsVue.js后端PythonDjango数据库MySQL代理Nginx持续集成Jenkins项目搭建创建后端工程创建RESTfulAPI创建前端工程前端调后端... 查看详情

cordova+vue混合式开发app

        应要求第一次使用cordova打包了一下vue写的app项目,期间遇到了不少问题,整理一下流程并记录一下常见问题吧。        cordova打包项目需要的环境配置啥的就不具... 查看详情

vue项目必须要配置测试环境和生产环境吗?

...必须要配置测试环境和生产环境吗?可不可以生产环境和开发环境都不配置?可以看一下uni-app的相关资料,用vue的语法实现且能同时发布到多个终端。安装HBX新建uni-app项目就可以了,不需要配置测试和生产环境参考技术A当然不... 查看详情

linux笔记-达梦dpi开发环境搭建(无需搭建达梦库)(代码片段)

...so和对应的include导出来,到新机器上,就是DPI的开发环境了。其中so为:libdmdpi.so但这里要保证几点:①搭建好达梦库的机器操作系统与新机器要一致。②最后CPU的架构都是一致的,比如X86_64架构。编译时,... 查看详情