背景:之前我的项目是用React+AntDesignPro写的.再过两个礼拜就有一个新我的项目要写了.这个我的项目主管要求用Angular+ionic写,于是与开始了我的学习之旅.从创立一个ionic我的项目开始!加油!!
第一步:装置ionic
用管理员的身份关上命令窗口肯定要先装置node环境
运行命令:
npm install -g ionic如下图 :
第二步:新建ionic我的项目
2.1:切到你须要装置的我的项目文件夹下2.2:运行新建ionic我的项目的命令
ionic start命令介绍:
// 给你的新我的项目取个名字 例:testIonicProject name: testIonic// 抉择新我的项目应用的框架:React/Angular 例:AngularFramework: 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!'; } }页面刷新后变成了这样:
点击按钮后:文字产生了变动
点击链接能够跳转至我的博客首页~