手摸手带你入门ionic3(三)：新建项目

Note: 编辑器使用VS Code，能够经过查看->集成终端打开编辑器内的终端环境，执行 ionic 命令。

新建项目

打开mac OS的终端，输入：

ionic start awesomeProject
复制代码

awesomeProject 表示项目的名称，可自定义，接着会出现如下模板选项，能够经过上下箭头选择新建的项目。

? What starter would you like to use: (Use arrow keys)
❯ tabs ............... ionic-angular A starting project with a simple tabbed intrface
  blank .............. ionic-angular A blank starter project
  sidemenu ........... ionic-angular A starting project with a side menu with navigation in the content area
  super .............. ionic-angular A starting project complete with pre-built pages,providers and best practices for Ionic development.
  conference ......... ionic-angular A project that demonstrates a realworld application
  tutorial ........... ionic-angular A tutorial based project that goes along with the Ionic documentation
  aws ................ ionic-angular AWS Mobile Hub Starter
复制代码

解释一下，tabs是相似微信这样底部包含Tab的模板，blank是只含有一个界面的模板，sidemenu是相似QQ具备滑动侧边栏的模板，super 是ionic项目组提供的展现了ionic开发最佳实践的模板，对ionic开发流程了解以后能够参考这个例子。conference 是ionic项目组提供的另外一个展现ionic框架及组件使用例子的模板。tutorial是一个简单的包含sidemenu，list，页面跳转等功能的小项目模板。

经过enter键肯定选择的模板，而后会自动从 GitHub 上下载模板和经过 npm install 加载依赖包，加载完毕后会询问：

? Connect this app to the Ionic Dashboard?
复制代码

输入n。点击enter键，出现如下内容，表明新建项目完毕。

? Connect this app to the Ionic Dashboard? No
> git add -A
> git commit -m "Initial commit" --no-gpg-sign

Next Steps:
Go to your newly created project: cd ./awesomeProject
复制代码

Note: 之后讲解的代码都是在此项目中添加，以后再也不赘述。

文件说明

使用VS Code打开刚才的项目awesomeProject，左侧的资源管理器能够看到初始项目全部的文件，每一个文件的做用我已经在以前的一篇博客中作了解释，具体参见 ionic V3.10 新建空白项目中文件的简单介绍，请务必把这篇博客对照新建的项目的目录看一遍。

项目启动与调试

在项目内部打开 VS Code 内的终端，输入：

ionic serve
复制代码

会构建项目，完成后自动打开默认浏览器，我建议将默认浏览器设置成Chrome。假如没有自动打开，本身在浏览器输入localhost:8100。打开Chrome浏览器的开发者工具，选择手机和平板模式，能够看到运行效果。

打开 src/pages/home/home.html，将Ionic Blank两个单词替换成首页，保存修改，项目会自动构建，浏览器自动刷新，能够看到最新效果。以下图：

假如自动刷新的时候报下面的错：

events.js:182
      throw er; // Unhandled 'error' event
      ^

Error: read ECONNRESET
    at exports._errnoException (util.js:1022:11)
    at TCP.onread (net.js:610:25)
复制代码

能够参见我在SF上的回答：ionic serve 报错

后记

本人在写一个ionic入门的教学手册 ionic3-handbook，还有一个基于真实项目的ionic项目HW-basic，感兴趣的能够看一下。