0实战之使用vue,从情状安插到安卓苹果双端上线

壹、Cordova制造应用

cordova create oneApp

Vue-cli是合法推荐的便捷营造单页应用的脚手架。官方给的提出,假如您是首先尝试Vue,哪就安安分分用普通的书写引进js文件,这里牵扯太多的东西,比如webpack、npm、nodejs等等,很轻易做到从入门到舍弃的思索。那篇小说本人便是依据合法的文书档案中的营造流程来的(合法创设提议)。一下是构建进度。

 Vue-cli是合法推荐的急速营造单页应用的脚手架。官方给的建议,假诺你是初次尝试Vue,哪就安安分分用通常的书写引进js文件,这里牵扯太多的东西,举例webpack 、npm 、nodejs 等等,很轻便做到从入门到扬弃的观念。那篇文章本人便是依据合法的文书档案中的营造流程来的(合法创设提出 )。一下是创设进度。

开篇简言

本身是一名前端技术员,刚刚落成了二个基于cordova的webapp,并且安卓和苹果双端都已上线,趁热写个总结分享给我们。(也是刚开始成人的小白,大概写的不佳,大家多多包含O(∩_∩)O
~)

Cordova创造应用出错

0实战之使用vue,从情状安插到安卓苹果双端上线。Cordova安装时不可能使用cnpm
应该采纳npm,cnpm即便快不过早先时期出的错绝比较那省下来的小时多得多。

不错安装形式

npm install -g cordova

或

npm install -g cordova --registry=https://registry.npm.taobao.org

npm install -g cordova 报错ENOENT: no such file or directory

缘由是以前下载安装退步时,生成了node_modul文件夹,全体剔除重新下载安装就ok啦

一、 安装 node.js

一、 安装 node.js

约略进程

自身是先在windows上达成的品种代码,然后打包安卓端的apk包并且上传到各大应用商铺(360、应用宝等),然后把项目代码移植到mac本上,来打包ios端的ipa包并且上传到app
store的。

二、vue成立应用

一、创立3个基于webpack模板的新类型(在上头Cordova项目目录里创设)

$ vue init webpack oneApp(名字可以和上面工程一样)

$ cd oneApp

$ npm install

$ npm run dev

始建实现现在的种类目录

美高梅开户网址 1

2、修改Vue项目config/index.js文件

'use strict'
module.exports = {
  build: {
    index: path.resolve(__dirname, '../../www/index.html'),
    assetsRoot: path.resolve(__dirname, '../../www'),
    assetsPublicPath: '',
 }
}

率先必要设置node境遇,能够一直到汉语官方网站下载安装包。

率先必要设置node蒙受,能够直接到普通话官方网址下载安装包。

背景介绍

Cordova是什么?百度词条中的定义:Cordova提供了1组织设立备相关的API,通过那组API,移动接纳能够以JavaScript访问原生的设施功效,如录制头、Mike风等。Cordova还提供了1组集结的JavaScript类库,以及为那些类库所用的装置相关的原生后台代码。Cordova援助如下移动操作系统:iOS,
Android,ubuntu phone os, 布莱克berry, Windows Phone, Palm WebOS, Bada
和 Symbian。

简简单单点清楚,Cordova是3个工具,通过它能够将您做的html网页显示在WebView里面,而你网页中用到的JS能够因而他的API去调用原生的事物,比如相机等。但它做出来的app比原生做出来的app幸而什么地方吧?直白点说,简便,省钱。因为cordova
app显示的页面全是您做的html页面,所以说你写1套code,就能够用在Android上,IOS上,以及Web上。不用去分别找Android程序员,IOS技术员。

③、打包编写翻译

一、对Vue工程进行build,编译之后打包生成的代码自动跑到主目录下的WWW文件下
cd 到Vue的MyApp目录下,实行npm run
build

美高梅开户网址 ,2、对cordova举行种种平台拓展编译cd到 主目录下,试行 cordova build
iOS、cordova build Android等。

ps:自身原先是使用Cordova+Ionic,刚刚开始用Cordova+vue,所以走了点不清坑。倘若有何样难点接待在底下商酌。

安装实现后,能够命令行工具中输入node -v和npm
-v,就算能显得出版本号,就评释安装成功。

设置到位后,能够命令行工具中输入 node -v 和 npm
-v,要是能展现出版本号,就注解安装成功。

条件搭建

壹. 装置node.js (Node.js是八个Javascript运维情形……)

下载安装node.js,下载地址:
-v,假若见到版本号表示安装成功。

美高梅开户网址 2

查看node版本号

二. 安装ant (Ant是1种基于Java的build工具……)

下载地址:
-v,看到版本号则表示成功。

美高梅开户网址 3

查看ant 版本号

Ps:假如是windows7系统,在增添path的值时,四个值时期要用分号隔离。

3. 安装cordova

命令行输入  npm install –g cordova

npm(node package
manager)是nodejs的包管理器,用于node插件处理(包涵安装、卸载、处理正视等),不过因为npm安装插件是从海外服务器下载,受网络影响大,或许出现万分,化解:用天猫团队提供的境内的cnpm,试行命令npm
install cnpm -g
–registry=
–v
,若是出现版本号则设置成功,大家就足以用cnpm安装大家所要求的事物了,比方大家地点实践的 cnpm install –g cordova 。关于npm
和cnpm的详尽疏解,能够参见那篇博客。

测试安装是不是成功,终端输入cordova -v,若是出现版本号表示安装成功。

美高梅开户网址 4

查看cordova版本号

4. 安装jdk

下载地址:
,选取本人的版本点击下载。下载下来后,遵照提醒安装,安装地方比方D:\java\jdk1.8.0_131,然后开始展览景况变量的配置就可以。(加多景况变量的步调:右键作者的Computer属性高档系统装置境遇变量系统变量中增加JAVA_HOME,值为D:\java\jdk1.8.0_13一,在系统情状变量中的变量path中加多%JAVA_HOME%\
bin)。

5. 安装sdk

下载地址:
,提出大家下载.zip文件不要下载.exe文件。反正小编下载.exe文件就装不上。下载下来.zip文件后解压缩,依照提醒安装,然后根据安装的职分展开景况变量的布置。(增多遇到变量的步骤:右键小编的管理器属性高端系统装置情形变量系统变量中增多ANDROID_SDK_HOME,值为D:\android\android-sdk-windows,在系统境况变量中的变量path中增多%ANDROID_SDK_HOME%\platform-tools和%ANDROID_SDK_HOME%\
tools)。

美高梅开户网址 5

下载sdk

走到后天,开拓所需的景况安排进程已经基本到位了!!


美高梅开户网址 6

美高梅开户网址 7

开创第1个使用

创立基于cordova平台的hybrid app,有上边二种情景:

  1. 原生cordova app(能够包容本身集团付出的框架)

  2. 使用ionic框架(个人理解ionic=angular+cordova)

  3. 采纳vue、react等其他框架,作者还尚未斟酌过。上面只介绍前二种。


===1 . 原生cordova app===


  a) 在有个别目录下创办cordova项目(cordova create <文件夹名>
<包名> < app 名>)。

指令行输入 cordova create test com.cordova.test test

美高梅开户网址 8

创建cordova项目

创立成功后,张开文件目录如下:

美高梅开户网址 9

新建的cordova项目目录

hooks寄存自定义cordova命令的脚本文件。

platforms阳台目录,各自的平台代码就放在此处,能够放一下阳台隶属的代码,以往那个目录应当是空的,后边会介绍怎样创设平台。

plugins插件目录,安装的插件会放在此处。前边会介绍怎么着设置插件。

www最要紧的目录,存放项目标HTML伍和JS代码的目录。app壹起先张开的正是其一目录中index.html文件,也即是体系的入口文件。

config.xml一言九鼎是cordova的有个别布局,比方:项目应用了什么样插件、应用Logoicon和运行页面SplashScreen,修改app的版本,名字等音信,还有平台的布局。

package.json一个JSON对象,该对象的每1个分子正是当下项目的壹项设置。比如name正是项目名称,version是本子(遵守“大版本.次要版本.小本子”的格式)。

  b) 增加平台

进入到刚刚成立的种类文件目录下,命令行输入:

cd test (退出当前目录输入: cd .. )

cordova platform add android(增多安卓平台)

*cordova platform add
ios
(那句增添苹果平台供给在mac上实践。假若该类型供给在苹果端上线,后边会讲到代码移植到mac本上打包ios包的步调。再次先忽略)*

不曾报错的话正是丰硕成功了,此时展开项目文件夹里的platforms文件之中有android文件夹了。

美高梅开户网址 10

实践命令 cordova platform add android

一旦要移除该平台,命令是:cordova platform rm android

到那边我们就把图谋专业都办好了,以往得以起来写js 和html代码了。

  c)加多和删除项目须求的codova插件

# 加多插件 #

命令行输入:cordova plugin add cordova-plugin-camera (cordova
plugin add <插件官方名称>),如下则注明增添成功。

美高梅开户网址 11

累加插件成功

只要报错则能够尝试:移除android平台,再另行增多低版本的android平台(命令行输入cordova
platform add android@6安装6.多版本的android,因为未来加多android平台连串暗许增添最新的
7.多版本的,不过某个cordova插件或然还无法匹配。)

去cordova官方网站找插件:http://cordova.apache.org/

也得以去github上找插件:

# 删除插件 #

命令行输入:cordova plugin rm
cordova-plugin-camera
 (使用rm和remove都可以)

美高梅开户网址 12

剔除插件成功

 # 查看已经加多了的插件列表 #

命令行输入:cordova plugin list(查看当前安装了这么些插件)

也可以平昔展开项目文件夹下的plugins文件夹查看(android.json和fetch.json都应当存在)

美高梅开户网址 13

plugins插件文件夹

  d)编写翻译调节和测试程序

上边包车型客车不是每一句代码都亟需周转,依据自个儿的要求实行抉择。

cordova install android //将编写翻译好的应用程序安装到模拟器上。

cordova emulate android //在模拟器上运转(前提是创建好AVD)

cordova serve //在浏览器运营

cordova build android //打包cordova项目到android平台。

cordova run android
//通过USB直接设置到真机(该语句已经席卷了build命令,要是你手提式有线话机管理器两次三番好,并且展开了手提式有线话机里的usb调节和测试格局,就能够如此直接run)

最后出现BUILD SUCCESSFUL 则成功。

美高梅开户网址 14

build打包成功

实施完后到上海体育场所中最后1好如故不好路线中去找大家的apk包,这几个apk包便是大家打出来的app的debug形式也正是支付条件下的包,放到手提式有线电电话机上就会运转了。可是正式上线到利用商铺的包不可能那样打,前边讲。第一次run/build时间会相比长。最终出现BUILD SUCCESSFUL
则表明成功。

到此处大家轮廓产生了android端的付出。

Ps:大家以往开荒项目文件发现目录中多了个node_modules文件夹,这里面是大家项目所用到的依赖包,是系统遵照package.json中的配置对应生成的。假若大家去下载旁人的支付好的类型代码时,下载下来后先是件事就是施行npm
install

来安装package.json中的配置和依赖,生成node_modules文件。然后再cordova
platform  add android加多平台。


下边说一下大家在www文件里写代码时也许供给接纳的1部分文化:

1. 选拔less 写样式文件:(作者用的编辑器是webstorm)

    壹. 命令行输入:npm install –g less

    2.
找到C:\Users\用户名\AppData\Roaming\npm\lessc.cmd,打开webstorm
> file > settings

美高梅开户网址 15

在webstorm中配置less(1)

    叁.点击
“+”,在下拉菜单中选用less,然后把刚刚的分外路线填到下图中的红框中。ok完毕。接下来大家在开创less文件时,就能够自动生成3个css文件跟随。

美高梅开户网址 16

在webstorm中配置less(2)

二. 运动端设备大小适配难点rem转px

在www/js中引进rem.js 或许flexible.js
(英特网有),但小编用的协调写的1段代码,效果一样的,只是逻辑上不太相同。小编的方式如下:

新建rem.js,引进到www下的index.html那一个进口文件中,然后写入以下代码:

!function(n){

    var e=n.document,t=e.documentElement,i=720,d=i/100,

         o=”orientationchange”inn?”orientationchange”:”resize”,

         a=function(){

             varn=t.clientWidth||320;n>720&&(n=720);

             t.style.fontSize=n/d+”px”

         };

        e.addEventListener&&     
 (n.addEventListener(o,a,!1),e.addEventListener(“DOMContentLoaded”,a,!1))

}(window);

那段代码的逻辑是:美术专门的工作给的图一般是720px宽的,(若是你的图案给的不是720得以修改上边的代码中的720改成你的),在支付的进程中,推行cordova
serve运维在chrome浏览器后,F1贰 > 手提式有线电话机形式 >
设备宽度设置成responsive
720宽,在此分界面下进展支付调节和测试,要是美术工作图上十0px的要素,大家在写less/css时,该成分div的宽就写一rem,即1rem=十0px。


===2 . 选用ionic框架做hybrid app===


正好讲了cordova
原生app的手续,上边简单讲一下选择ionic框架的做法。命令行基本1致。

Ionic的一层层命令:(类似corodva原生app)

1.npm安装ionic:npm install –g cordova ionic

2.开立项目:ionic start myproject
–type=ionic1
(myproject是类别名,前面—type=ionic一是映珍视帘成立哪个版本用的的,不写的话暗中同意是眼下时尚的3版本)

创立成功,项目文件目录如图:

美高梅开户网址 17

刚创制的ionic项目目录

  1. 就好像上边讲到的1雨后春笋命令

cd myproject

ionic cordova platform add android

ionic serve // 浏览器调节和测试

ionic cordova build android            

 ionic cordova emulate android // 模拟器运维ionic cordova run
android  // 连接上手提式无线话机运营,等同于build+emulate

肆.设置插件 命令行输入:ionic plugin add
cordova-plugin-shake(插件名)

ionic结合cordova 调用一些原生的api
如摄像头等,供给引进ng-cordova,具体参考:那篇小说


二、安装 vue-cli

二、安装 vue-cli

项目上线

花色源代码写完后,那么该上线了。下边分别讲一下
上线到安卓各大使用商店。(360部手提式有线电电话机帮手、应用宝等等) 和上线到苹果的app
store的手续!


android 端上线 ==> 以360手机帮手为例。

一. 将使用打包 命令行输入:cordova build –release android

此番的打包不相同于用地点讲到的用cordova build android
打出去的包,那些是debug的包,是调节和测试版,是自行签字的。(这里解释一下“具名”:能在大哥大上运维的apk都以通过签名的,没有具名的apk是跑不起来的,debug包也是系统活动签的名,是用debugkeystore签过名的,但它不是专门的职业的我们应用唯一的签署,所以大家需求给大家利用唯一的签订契约,所以我们在那步打包时打不具名的包,如上命令
加 –release,方便下一步签app专属的名)。

2. 浮动具名文件
(首先找到jdk安装的岗位(如自己的D:\java\jdk1.8.0_13一),命令行进入到jdk文件下的bin目录下,在命令行顺序输入如下几条命令,成立test.keystore)

(壹)命令行输入:cd D:\java\jdk1.8.0_131\bin

(贰)命令行输入:keytool -genkey -alias test.keystore -keyalg RSA
-validity 40000 -keystore test.keystore
(参数表达:-genkey
生成文件  -alias 外号  -keyalg 加密算法  -validity 限制期限  -keystore
文件名 )

(叁)然后依照提示设置keystore密码以及你的音信,接下去不报错的话就表示已经变化了test.keystore文件,在jdk的bin目录下。

三. 到360平移开放平台 上注册账号。

4. 签名,加固。

下载360加强帮手,下载地址,里面有使用手册,依据提醒操作,完毕里面消息的填充。主要的:里面供给填写具名文件路线,那么就填写上边步骤第22中学最后生成的签字文件路径,这样大家就陈设好了。接下来正是把步子一生成的未被机关签字的release包放进来,上传、签名、加固。然后最平生成的apk包正是大家能够上传到360利用商场的包了。

5.
进入
360支付平台 。

签到 > 管理骨干 >
填写壹连串的app消息和市4新闻,填写完整点击提交审查,一个工作日内就取得结果了。一般审查批准都能经过,即便没通过会提示给你原因,遵照他说的更改在付给就行,也许直接给他们的客服邮箱发邮件沟通就可以。综上可得android应用市镇很好通过,不像苹果app
store那么严(shi)谨(er)。哈哈哈~


ios上线 。。

———————作品太长了,请看 (下)篇。——————–

设置好了 node,大家可以直接全局安装 vue-cli:

设置好了 node,大家得以平素全局安装 vue-cli:

npm install -g vue-cli
npm install -g vue-cli

因为各个不可描述的原委,使用npm安装会非常慢,而且很轻易失误,所以推举应用cnpm来设置。

因为各样不可描述的由来,使用npm安装会相当的慢,而且很轻松出错,所以推举使用cnpm来安装。

npm install -g cnpm --registry=https://registry.npm.taobao.org
npm install -g cnpm --registry=https://registry.npm.taobao.org

设置成功后,使用 cnpm 安装 vue-cli 和 webpack。

设置成功后,使用 cnpm 安装 vue-cli 和 webpack。

cnpm install -g vue-cli
cnpm install -g vue-cli

安装完毕后,能够行使vue -V 查看是或不是安装成功。

设置到位后,能够使用 vue -V 查看是不是安装成功。

美高梅开户网址 18

美高梅开户网址 19

叁、生成项目

3、生成项目

先是供给在命令行中进入到花色目录,然后输入:

先是供给在指令行中进入到花色目录,然后输入:

vue init webpack Vue-demo
vue init webpack Vue-demo

内部 webpack 是模板名称,Vue-demo
是自定义的项目名称,命令实行之后,会在眼下目录生成二个以该名称命名的体系文件夹。

里面 webpack 是模板名称,Vue-demo
是自定义的项目名称,命令推行之后,会在现阶段目录生成3个以该名称命名的品种文件夹。

配置达成后,可以看来目录下多出了二个门类文件夹,里面纵使 vue-cli
成立的三个基于 webpack 的 vue.js 项目

配置完毕后,能够看出目录下多出了2个品类文件夹,里面就是 vue-cli
创造的二个基于 webpack 的 vue.js 项目

然后进入项目目录(cd Vue-Project),使用 cnpm 安装信赖

然后进入项目目录(cd Vue-Project),使用 cnpm 安装信赖

cnpm install
cnpm install

然后运营项目

接下来运维项目

npm run dev
npm run dev

四、打包上线

四、打包上线

本身的花色文件都须要安置 src 文件夹下

协调的类别文件都亟待停放 src 文件夹下

项目支出成功未来,能够输入npm run build 来开始展览包装职业

品类支出成功之后,能够输入 npm run build 来进展包装专门的学业

npm run build
npm run build

装进落成后,会生成 dist
文件夹,若是已经修改了文件路线,能够一向张开当半夏件查看

装进落成后,会转移 dist
文件夹,假如已经修改了文本路线,能够直接张开当地文件查看

项目上线时,只必要将 dist 文件夹放到服务器就行了。

连串上线时,只供给将 dist 文件夹放到服务器就行了。

如上正是本文的全部内容,希望对我们的上学抱有辅助,也期望我们多多协助脚本之家。

您或然感兴趣的小说:

  • node
    vue项目支出此前后端分离实战记录
  • Vue二.0哪些发表项目实战
  • 详解vue项目营造与实战
  • vue项目实战总计篇

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图