阅读 842

手摸手带你入门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,感兴趣的可以看一下。

关注下面的标签,发现更多相似文章
评论