安装讲解cordova和ionic

发布时间：2019-01-18 09:37:54 修改时间：2019-01-18 09:37:54 阅读：4543 评论：0 0

开始安装：革命就分两步走

1.安装cordova和ionic

$ npm install -g ioniccordova

使用全局安装，这样后面你就可以在控制台使用ionic命令来执行相关的操作

2.新建项目

$ ionic start demo tabs

demo是项目的名称，tabs代表项目使用了tabs模板，ionic主要有三种模板，tabs, sidemenu和blank，tabs应该是使用最广泛的一种了。

一个新项目的结构

所有的源代码都存放在了src目录，在src目录中，和我们打交道最多的，就是app和pages两个文件夹。

app文件夹

main.ts 入口文件

以前大家写网页的时候，都是用到一个js文件，就在网页中调用一个script标签。而现在的前端项目，都只调用一个入口文件，让入口文件帮我们去引入其它依赖的文件。这好比以前商店都开在街边，你要买什么东西直接走到店面去。而现在流行各种商业广场CBD，你先走进商场大门，再去找要去的店铺。一个好处就是，你预先不用知道这家店的具体位置，你只管走进大门吹空调就行了，这难道不爽吗。

app.module.ts 根模块文件

ionic是基于angular的，而angular是完全模块化的。根模块文件是一个无微不至的大管家，你把你要用什么（模块、组件、服务、管道、指令等）都告诉它，它会帮你去弄来，而你就只管做个安静的美男子就行了。

app.component.ts 根组件

angular里的组件，就是我们平时所说的视图，组件的产品就是我们所看见的界面了。根组件主要定义了app整体的视觉表现，比如根页面、状态栏、启动界面等等。

app.component.scss 全局样式文件

嗯，就是写全局css的地方，不过在ionic里你可以用sass来写，如果你不了解sass，我后续会在做一些介绍。

app.html 根组件的模板

没有存在感，略了。

pages文件夹

pages很简单啦，就是存放APP的所有页面，每个文件夹就是一个页面，里面定义了页面的业务逻辑、模板和样式，下一章我们就来讲讲页面的那些事儿。

开始第一次运行

记得先cd到项目目录

$ cd demo

在控制台执行serve命令

$ ionic serve

ionic就会在本地创建一个服务器，稍等片刻后，浏览器就会弹出应用的首页。

是不是感觉这个应用的体态有些……丰满，我们按F12进入开发者工具，然后点击移动设备工具，就可以模拟页面在移动设备上的效果。

上方还有几款预设的设备，你可以切换它们来观察不同分辨率，不同操作系统的效果。不过要记得每次切换后，把页面刷新一下。

此时，服务器会监事你项目中文件的变化，当你对其中的文件进行了修改时，页面会自动刷新呈现新的状态，当你完成调试工作时，在控制台使用ctrl+c来关闭本地服务器。在开发初期，浏览器能帮我们完成大部分的调试工作，也就是你无需准备实体移动设备或者虚拟机，非常地方便。

---