只需三步即可创建出你的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!';
      }

    }

页面刷新后变成了这样:

点击按钮后:文字发生了变化

点击链接可以跳转至我的博客首页~

Timor