关于ionic:只需三步即可创建出你的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, 是一样的成果~ 都是运行我的项目)

• 因为没有写过 Angular 的我的项目, 所以首次运行的时候会有个确认装置 Angular 的提醒, 抉择 Y 就好.

运行胜利后会呈现一个窗口地址.http://localhost:4200
这样就代表你用 vscode 运行我的项目胜利了~~

浏览器关上窗口地址呈现了上面的页面.真香~~

我的项目目录介绍

我的项目目录如下:

src // 开发工作目录，页面、款式、脚本和图片都放在这个目录下
src/app // 利用根目录（组件、页面、服务、模块）src/assets // 资源目录（动态文件，图片，js 框架...）src/environments // 环境配置
src/theme // 主题文件，外面有一个 scss 文件，设置主题信息
src/global.scss // 全局 css 文件
src/index.html // index 入口文件
src/global.scss // 全局款式
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!';}

    }

页面刷新后变成了这样:

点击按钮后:文字产生了变动

点击链接能够跳转至我的博客首页~