目录：

一、ionic的安装

二、创建第一个应用程序

三、浏览器中预览应用

四、项目结构

五、添加页面

一、ionic的安装

使用Ionic创建和开发应用程序主要通过Ionic命令行实用程序（“CLI”），并使用Cordova构建和部署为本机应用程序。

CLI：command-line interface的缩写，命令行界面，是指可在用户提示符下键入可执行指令的界面，它通常不支持鼠标，用户通过键盘输入指令，计算机接收到指令后，予以执行。

Cordova：是从PhoneGap中抽出的核心代码，是贡献给Apache后的开源移动开发框架，是驱动PhoneGap的核心引擎。使用它您可以使用web技术（html、css、JavaScript）来进行跨平台的开发，可针对不同的运行平台构建对应的应用程序，同时提供了一组API，使我们开发的应用可以来访问设备的功能，如摄像头、麦克风、传感器、数据、网络状态等。

具体安装如下：

1. 首先我们需要先安装Node.js和NPM

下载Node.js6或更高版本的安装程序，下载好后双击下载的pkg包默认安装即可。在dos命令行 或者 git 命令行中，可分别输入以下内容查看npm和node的版本号

 // 查看node版本

 node –v

 // 查看npm版本

 npm –v

2. 安装 Ionic CLI和Cordova。

  • 通过 config 配置指向国内镜像源，避免国内网络安装错误，终端命令：
npm config set registry https://registry.npm.taobao.org //配置指向源

// 配置后可通过下面方式来验证是否成功

npm config get registry

// 或

npm info express
  • 下载后安装ionic和cordova包，终端命令：
npm install -g cordova ionic
  • 安装完成后，检查是否安装成功，终端命令：
ionic -info 　　　　//检查是否安装成功
ionic -angular 　　//查看Ionic版本

根据信息提示，可对没有成功安装的包再次安装。　　

二、创建第一个应用程序

进入你想放应用程序的那个目录，比如我放在E盘，打开终端，输入命令　　

cd e:

使用ionic tutorial作为起始模板创建应用程序

ionic start myapp tutorial

命令说明：

  • start 创建一个新的应用程序
  • myapp 你项目的目录名称和应用程序名称
  • tutorial ，ionic提供的起始模板，ionic提供了5个可用模板
    • tabs ：一个简单的3选项卡布局
    • sidemenu：侧面有可滑动菜单的布局
    • blank一个单独的启动器
    • super：启动项目超过14个可以使用的页面设计
    • tutorial：一个引导启动项目
      说明：如果不选择起始模板 ionic start myapp ，默认将使用 tabs 作为起始模板

三、浏览器中预览应用

你创建的应用程序所在文件夹，在浏览器中预览项目

cd myapp       //进入程序所在目录

ionic serve    //浏览器中预览

四、项目结构

整个应用项目结构如下

src/index.html 是应用程序的主要入口点，第一个打开的文件就是 index.html

 <!DOCTYPE html>

 <html lang="en" dir="ltr">

     <head>

         <meta charset="UTF-8">

         <title>Ionic App</title>

         <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

         <meta name="format-detection" content="telephone=no">

         <meta name="msapplication-tap-highlight" content="no">

         <link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">

         <link rel="manifest" href="manifest.json">

         <meta name="theme-color" content="#4e8ef7">

         <!--cordova.js的引用让我们可以使用Cordova创建应用（将应用打包为native应用，可以提交到App Store） -->

         <script src="cordova.js"></script>

         <!-- un-comment this code to enable service worker

   <script>

     if ('serviceWorker' in navigator) {

       navigator.serviceWorker.register('service-worker.js')

         .then(() => console.log('service worker installed'))

         .catch(err => console.error('Error', err));

     }

   </script>-->

         <link href="build/main.css" rel="stylesheet">

     </head>

     <body>

         <!--Ionic的根组件，同时也是app启动的地方-->

         <ion-app></ion-app>

         <!--polyfills.js是在程序构建过程中生成的，是为浏览器某些特点功能生成的基本补丁-->

         <script src="build/polyfills.js"></script>

         <!-- vendor.js 是在程序构建过程中生成的，它包含了node_modules所有的依赖项 -->

         <script src="build/vendor.js"></script>

         <!--我们应用绑定的代码，一个包含Ionic，Angular和您的应用程序JavaScript的连接文件-->

         <script src="build/main.js"></script>

     </body>

 </html>

./src/

在src目录的内部，我们找到我们原始的，未编译的代码。这就是Ionic应用程序的大部分工作。当我们运行ionic serve，我们的代码里面src/是transpiled到浏览器理解正确的JavaScript版本（目前，ES5）。这意味着我们可以使用TypeScript在较高级别工作，但是可以编译成浏览器需要的较早版本的Javascript。

src/app/app.module.ts是我们的应用程序的切入点

 @NgModule({

   //创建的所有页面需添加到declarations数组 和 entryComponents数组

   //所有自定义的组件或pipes需添加到declarations数组

   declarations: [MyApp,HelloIonicPage, ItemDetailsPage, ListPage],

   imports: [ BrowserModule, IonicModule.forRoot(MyApp)],

   //每一个app都有一个用来引导其他程序的根组件,这和ionic/Angular 1中的ng-app很相似

   //引导app程序的地方

   bootstrap: [IonicApp],

   // 创建的所有页面需添加到declarations数组 和 entryComponents数组

   entryComponents: [MyApp,HelloIonicPage,ItemDetailsPage,ListPage],

   //所有的服务需添加到 provider 数组

   providers: []

 })

 export class AppModule {}

五、添加页面

Ionic学习记录（一）：ionic及cordova安装、创建第一个应用、项目结构的更多相关文章

  1. cordova安装--创建ionic项目

    1.简介ionic ionic 是一个强大的 HTML5 应用程序开发框架(HTML5 Hybrid Mobile App Framework ). 可以帮助您使用 Web 技术,比如 HTML.CS ...

  2. MongoDB 学习记录（二）yum安装

    前言:接着上篇继续学习MongoDB,这次学习的是在Linux下安装MongoDB 环境:centos7.3 安装版本:MongoDB4.0 官网安装教程地址 https://docs.mongodb ...

  3. Ionic学习记录

    1.跨域问题 浏览器中的运行 当你运行 ionic serve 时发生了什么呢? 启动了一个本地 web 服务器 你的浏览器打开并定位到本地服务器地址 这让你看着你的应用加载到你电脑上一个浏览器里,地 ...

  4. python爬虫学习记录——各种软件/库的安装

    Ubuntu18.04安装python3-pip 1.apt-get update更新源 2,ubuntu18.04默认安装了python3,但是pip没有安装,安装命令:apt install py ...

  5. Hadoop学习记录（6）|Eclipse安装Hadoop 插件

    下载 https://skydrive.live.com/redir.aspx?cid=cf7746837803bc50&resid=CF7746837803BC50!1277&par ...

  6. docker学习------记录centos7.5下docker安装更换国内源的处理过程

    一.centos7.5下更换阿里源 1.装好centos7.5镜像,将yum源更换为阿里源 第一步:刚出的centos7.5是解析不到阿里的东西的,所以找了台centos7.4,下载一些包 (1) 下 ...

  7. Python学习记录(一)：Anaconda3的安装、配置与使用

    简单说下为啥要创建Python虚拟环境呢? 不同的Python工程中用到的包不尽相同,相同包的版本也可能不一样,一种方法是使得各个环境相对独立. 假如说某一个环境崩了,直接remove掉就可以了,不会 ...

  8. 【PyQt5 学习记录】011：使用 QListWidet 创建列表

    使用 QListWidet 创建列表 作者: 八月未见 博客: https://www.cnblogs.com/jmtm/ 创建列表: list_widget = QListWidget() 插入项目 ...

  9. .net core 2.0学习记录（一）：搭建一个.Net Core网站项目

    .Net Core开发可以使用Visual Studio 2017或者Visual Studio Code,下面使用Visual Studio 2017搭建一个.net Core MVC网站项目. 一 ...

随机推荐

  1. xamarin.forms模拟rem动态大小值，实现屏幕适配

    开发app的时候,比较麻烦的地方,就是处理屏幕适配,比如文字设为12的大小,测试的时候,看得文字挺正常,可是,放到高分辨率设备一看,文字就变得特别小, 怎样实现随着分辨率变大或者变小,所有的size数 ...

  2. 【解题报告】 洛谷 P3492 [POI2009]TAB-Arrays

    [解题报告] 洛谷 P3492 [POI2009]TAB-Arrays 这题是我随机跳题的时候跳到的.写完这道题之后,顺便看了一下题解,发现只有一篇题解,所以就在这里顺便写一个解题报告了. 首先当然是 ...

  3. Scrapy Item用法示例（保存item到MySQL数据库，MongoDB数据库，使用官方组件下载图片）

    需要学习的地方: 保存item到MySQL数据库,MongoDB数据库,下载图片 1.爬虫文件images.py # -*- coding: utf-8 -*- from scrapy import ...

  4. i++与++i的区别及效率

    i++与++i的区别及效率   先看看基本区别:i++ :先在i所在的表达式中使用i的当前值,后让i加1++i :让i先加1,然后在i所在的表达式中使用i的新值 看一些视频教程里面写for循环的时候都 ...

  5. scrapy——7 scrapy-redis分布式爬虫，用药助手实战，Boss直聘实战，阿布云代理设置

    scrapy——7 什么是scrapy-redis 怎么安装scrapy-redis scrapy-redis常用配置文件 scrapy-redis键名介绍 实战-利用scrapy-redis分布式爬 ...

  6. noip2013 Day2 T2 花匠 解题报告

    题目: 3289 花匠 2013年NOIP全国联赛提高组 时间限制: 1 s 空间限制: 128000 KB 题目描述 Description 花匠栋栋种了一排花,每株花都有自己的高度.花儿越长越大, ...

  7. Linux统计行数命令wc（转）

    Linux wc命令用于计算字数. 利用wc指令我们可以计算文件的Byte数.字数.或是列数,若不指定文件名称.或是所给予的文件名为"-",则wc指令会从标准输入设备读取数据. 语 ...

  8. HDU 4503

    可以反过来求不是相同关系的小朋友.相当于染色问题吧. 对于A小朋友,它的T个朋友和另外的(N-1-T)个同学就可以组成一个这样的三角形.T*(N-1-T),由于一条非染色边被计算两次,所以除以2. # ...

  9. 2.2－VLAN间路由

    2.2-VLAN间路由     第一代LAN间的通信:     不支持VLAN的交换机:由一个路由器和几个交换机组成,每个交换机的所有端口都同属于一个网段/LAN:在路由器上有几个网段就有几个与之相对 ...

  10. URAL 1601. AntiCAPS （strings）

    1601. AntiCAPS Time limit: 0.5 second Memory limit: 64 MB The blonde Angela has a new whim: internet ...