只需三步便可建立出你的ionic項目+簡單使用

背景:以前項目是用React+AntDesignPro寫的.再過兩個禮拜就有一個新項目要寫了.這個項目主管要求用Angular+ionic寫,因而與開始了個人學習之旅.從建立一個ionic項目開始!加油!!

第一步:安裝ionic

用管理員的身份打開命令窗口
必定要先安裝node環境
運行命令:

npm install -g ionic

以下圖 :

第二步:新建ionic項目

2.1:切到你須要安裝的項目文件夾下
2.2:運行新建ionic項目的命令

ionic start

命令介紹:

// 給你的新項目取個名字 例:testIonic
Project name: testIonic
// 選擇新項目使用的框架:React/Angular 例:Angular
Framework: Angular
// 選擇下載項目模板 例:blank(空白)
Starter template: blank

以下圖:

項目建立成功後會出現[Info]提示:

第三步:運行ionic項目

3.1:切到你剛剛建立的項目文件夾目錄下
3.2:運行項目
運行命令:

ionic serve

運行成功後會出現一個地址http://localhost:8100

頁面上打開這個地址就會出現如下頁面表明整個步驟運行成功!

使用vscode運行ionic的項目

第一步:用vscode打開你的項目文件夾

第二步:運行項目

打開NPM文件夾鼠標移至start上面右側會出現一個小箭頭,點擊運行
(由於懶的敲命令,點擊start就能夠運行了.也能夠在vscode上方的終端,新建終端,輸入ionic serve,是同樣的效果~ 都是運行項目)
運行成功後會出現一個窗口地址.http://localhost:4200
這樣就表明你用vscode運行項目成功了~~

瀏覽器打開窗口地址出現了下面的頁面.真香~~

項目目錄介紹

項目目錄以下:

src // 開發工做目錄，頁面、樣式、腳本和圖片都放在這個目錄下
src/app // 應用根目錄（組件、頁面、服務、模塊）
src/assets // 資源目錄（靜態文件，圖片，js框架...）
src/environments // 環境配置
src/theme // 主題文件，裏面有一個scss文件，設置主題信息
src/global.scss // 全局 css 文件
src/index.html // index 入口文件
src/main.ts // 主入口文件
src/polyfills.ts // 這個文化包含 Angular 須要的填充，並在應用程序以前加載
angular.json // angular配置文件
ionic.config.json // ionic配置文件
package.json // 配置項目的元數據和管理項目所須要的依賴
package-lock.json // 本次配置項目的元數據和管理項目所須要的依賴
tsconfig.json // TypeScript 項目的根目錄，指定用來編譯這個項目的問根文件和編譯選項
tslint.json // 格式化和校驗 typescript

如今來嘗試修改一下home文件內容

// 修改home.page.html文件內容爲:
    <ion-header [translucent]="true">
      <ion-toolbar>
        <ion-title>
          Blank
        </ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content [fullscreen]="true">
      <ion-header collapse="condense">
        <ion-toolbar>
          <ion-title size="large">Hello world!</ion-title>
        </ion-toolbar>
      </ion-header>

      <ion-content class="ion-padding">
        <div id="container">
          <strong>來給我點贊呀!!</strong>
          <p>個人博客<a target="_blank" rel="noopener noreferrer" href="https://segmentfault.com/u/timor_5d5e2be9e8378">地址</a></p>
        </div>
        <p>{{ text }}</p>
        <ion-button (click)="onChangeText()">來點我呀</ion-button>
    </ion-content>
    </ion-content>

// 修改home.page.ts內容爲:
    import { Component } from '@angular/core';

    @Component({
      selector: 'app-home',
      templateUrl: 'home.page.html',
      styleUrls: ['home.page.scss'],
    })
    export class HomePage {
      text = 'Our first Ionic app';
      onChangeText() {
        this.text = 'changed!';
      }

    }

頁面刷新後變成了這樣:

點擊按鈕後:文字發生了變化
點擊連接能夠跳轉至個人博客首頁~