离子赝势文件

This guide will teach you how to write a simple Hello World program in Ionic.

本指南将教您如何在Ionic中编写一个简单的Hello World程序。

步骤1：安装 (Step 1: installation)

Install ionic, npm ,angular and cordova if not installed. [See first introduction for more information.]

如果未安装，请安装ionic，npm，angular和cordova。 [有关更多信息，请参见第一个简介。

sudo apt-get install nodejs
sudo apt-get install npm 
sudo npm install -g ionic cordova

步骤2：创建一个名为helloworld的文件夹 (Step 2: Create a folder named helloworld)

ionic start helloworld blank

Note: Since this is a small project, enter No or N when prompted during program execution.

注意：由于这是一个小项目，因此在程序执行过程中提示时输入No或N。

步骤3：将目录更改为helloworld [这是您的离子目录] (Step 3: Change directory to helloworld [this is your ionic directory])

cd helloworld

步骤4：在文本编辑器中打开文件夹。 (Step 4: Open the folder in your text editor . )

You will see various files and subfolders.

您将看到各种文件和子文件夹。

Don't panic – these files are generated automatically by npm for you. Just go to src->page->home->home.html .

不要惊慌-这些文件是npm为您自动生成的。 只要到src - > page - > home - > home.html 。

基本文件格式 (Basic File Format)

`home.html` is the html page where you can write html syntax.<br/>

`home.scss` is the css page to write css syntax.<br/>

`home.ts` is the typescript page to write typescript code.

步骤6：删除模板并添加html语法，如下所示 (Step 6: Delete the template and add the html syntax as shown below)

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Project
    </ion-title>
   </ion-navbar>
  </ion-header>

  <ion-content padding>
   <h2>Hello World </h2>
  </ion-content>

步骤7：保存代码并运行 (Step 7: Save the code and run)

ionic serve

To see your code running go to the browser and and open localhost:8100 in the URL. That's it!

要查看您的代码正在运行，请转到浏览器，然后在URL中打开localhost：8100。 而已！

有关Ionic的更多信息： (More info on Ionic:)

• Ionic full course (video)

  离子全过程(视频)

• Create a CRUD todo app with Ionic

  使用Ionic创建CRUD待办事项应用

翻译自: https://www.freecodecamp.org/news/how-to-write-hello-world-in-ionic/

离子赝势文件