Cordova笔记二：vue-leaflet-cordova的创建

vue组件化三部曲：

前言

相比于别的跨平台快速开发技术，Cordova已经走在其他跨平台技术的前面。技术相对来说成熟，而且适合广大网络开发人员，。

我提到过Cordova可以在Visual Studio中创建，而且可以直接使用Typescript进行编写，但对于初学者来说上手并不容易。学一门技术还是从简单的开始。Visual Studio开始项目就生成那么多文件确实有点太吓人了。

Ionic是最为成熟的移动端框架，它的成熟不仅仅在于它的样式，更是在于它的项目构建。当然它的底层还是cordova，这几年对前端的摸索，让我深刻了解前端知识越是底层，越是有价值。因为前端的变化太快，最顶层的框架可能就是“稍瞬即逝”。所以越成熟，越底层，越能投入生产的技术才是值得学习的。

这篇文章前半段介绍一下Cordova的安装和创建项目，后半段是对vue-leaflet-cordova的一个介绍。

建议全局安装，方便脚手架生成项目。

npm install -g cordova

cordova在安装完以后，可以使用命令行创建目录，此时你可以在命令行中输入cordova查看对应的命令，或cordova help [command]查看对应的命令详情。

cordova create MyApp

创建项目后，进入文件夹cd MyApp，里面有四个文件夹和一个配置文件。

常用的平台主要是browser，ios，android。我相信不会有人去纠结wp和blackberry。由于涉及到ios，这里推荐开发的电脑尽可能使用mac。电脑端浏览项目应该是最常见，也是最简单的。首先，安装browser平台，然后运行即可。

cordova platform add browser
cordova run browser

就可以看到对应的效果。

注意尽可能使用 Chrome 浏览器运行。

这里，再举一个栗子，ios。同理，安装平台。

cordova platform add ios

这时还不能直接运行。

cordova requirements

返回的列表表明了你的安装情况。xcode是必须的。需要你耐心的安装。同理，android平台的安装也是如此。

requirements

cordova build ios
cordova emulate iOS

build意味着生成对应的编译文件，毕竟ios和android都是编译型的平台。emulate是打开模拟器，预览效果。

插件是实现web和native交换的重要一环，依靠的是Jsbridge。如今像腾讯和阿里已经把这门技术研究到极致，并且有更近轻量化的定制。

安装插件非常简单。我们可以看到在plugin文件夹中，有对应平台的native代码。

cordova plugin add geolocation

我个人认为掌握一款插件的开发，才是真正意义的了解cordova的插件编写，以及与native的交互。

vue-leaflet-cordova参考了hiapp的项目结构。将vue打包文件夹直接等同于www。

转载，请表明出处。总目录Awesome GIS