ionic3项目实战教程 ionic3环境安装 项目搭建

关于ionic3项目实战教程

1-1.png

1-1.png

这一讲主要包含以下几个部分:

  • 1.技术储备;
  • 2.安装环境;
  • 3.新建项目;
  • 4.搭建基础框架;
  • 5.运行效果图;

1.技术储备

在项目开始前,请确保你对以下知识有所了解:

  • 会使用npm基础命令;
  • 熟悉HTML+CSS;
  • 熟悉TypeScript2+;
  • 了解Angular2/4框架;
  • 了解corodva插件的使用;
  • 了解MVC或者MVVM设计模式;
  • 会使用一款IDE,本教程使用的是visual studio code;

2.安装环境

npm install -g ionic@latest

3.新建项目

ionic start ionic3-dress tabs

如果在npm install需要等待很久,可以直接结束使用cnpm install来安装依赖包。
我的环境如下:

cli packages: (/Users/ionic3-dress/node_modules)

@ionic/cli-utils  : 1.8.1
ionic (Ionic CLI) : 3.8.1

local packages:

@ionic/app-scripts : 2.1.3
Ionic Framework    : ionic-angular 3.6.0

System:

Node : v6.10.3
npm  : 3.10.10 
OS   : macOS Sierra

4.搭建基础框架

此项目主要用到三个tab:首页推荐、优惠精选、个人中心;对应的更改tabs.html代码:

 <ion-tabs>
        <ion-tab [root]="tab1Root" tabsHideOnSubPages="true" tabTitle="首页推荐" tabIcon="home"></ion-tab>
        <ion-tab [root]="tab2Root" tabsHideOnSubPages="true" tabTitle="优惠精选" tabIcon="megaphone"></ion-tab>
        <ion-tab [root]="tab3Root" tabsHideOnSubPages="true" tabTitle="个人中心" tabIcon="person"></ion-tab>
    </ion-tabs>

5.运行效果图

ionic serve
1.png
  1. admin说道:

    沙发

发表评论

电子邮件地址不会被公开。 必填项已用*标注