Note: With VS Code, open the terminal environment in the editor and run the Ionic command by going to -> Integration Terminal.

New project

Open a MAC OS terminal and type:

ionic start awesomeProject
Copy the code

AwesomeProject represents the name of the project and is customizable, followed by the following template options to select the new project using the up and down arrows.

? 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 navigationin 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
Copy the code

To explain, tabs are similar to wechat with tabs at the bottom, Blank is a template with only one interface, Sidemenu is a template similar to QQ with a sliding sidebar, and super is a template provided by ionic project team that shows the best practices in ionic development. This is a good example to look at in ionic development. The Conference is another template provided by the Ionic project team to show examples of how the Ionic framework and components are used. Tutorial is a simple small project template that includes sidemenu, List, page jump, and more.

Press Enter to determine the selected template. Then the template will be automatically downloaded from GitHub and the dependency package will be loaded through NPM install.

? Connect this app to the Ionic Dashboard?
Copy the code

Input n. Click Enter and the following content will appear, indicating that the new project is completed.

? 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
Copy the code

Note: The code explained later is added to this project and will not be described further.

Document describing

Open the awesomeProject with VS Code, and the explorer on the left shows you all the files for the original project. I explained the purpose of each file in a previous blog post. See ionic V3.10 for a brief introduction to the files in the New Blank Project. Be sure to read this blog post against the new project catalog.

Project startup and debugging

Open a terminal within VS Code inside the project and type:

ionic serve
Copy the code

The project will be built and the default browser will open automatically upon completion. I recommend setting the default browser to Chrome. If it does not open automatically, type localhost:8100 in the browser. Open developer Tools in Chrome and select Mobile and Tablet mode to see what works.

Open thesrc/pages/home/home.htmlThat will beIonic BlankReplace the two words withHome page, save the modification, the project will be built automatically, the browser will refresh automatically, you can see the latest effect. The diagram below:

If the following error is reported while auto-refreshing:

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)
Copy the code

See my answer on SF: Ionic Serve error

Afterword.

I am writing an ionic introduction teaching manual ionic 3-Handbook and an Ionic project HW-Basic based on real projects. If you are interested, please check it out.