关于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!';
      }

    }

页面刷新后变成了这样:

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

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