手摸手带你入门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两个单词替换成首页，保存修改，项目会自动构建，浏览器自动刷新，可以看到最新效果。如下图： default

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

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，感兴趣的可以看一下。