69 lines
1.6 KiB
Markdown
69 lines
1.6 KiB
Markdown
|
---
|
|||
|
|
title: Hello World In Ionic
|
|||
|
|
localeTitle: 离子世界你好
|
|||
|
|
---
|
|||
|
|
# 爱奥尼亚的Hello World !!
|
|||
|
|
|
|||
|
|
### 这是一篇社论，它将通过你在Ionic制作一个简单的Hello World程序。
|
|||
|
|
|
|||
|
|
### 脚步
|
|||
|
|
|
|||
|
|
#### 1.如果没有安装，请安装`ionic` ， `npm` ， `angular`和`cordova` 。\[有关详细信息，请参阅[第一篇](https://guide.freecodecamp.org/ionic)介绍\]
|
|||
|
|
|
|||
|
|
```shell
|
|||
|
|
sudo apt-get install nodejs
|
|||
|
|
sudo apt-get install npm
|
|||
|
|
sudo npm install -g ionic cordova
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
#### 2.创建名为`helloworld`的文件夹
|
|||
|
|
|
|||
|
|
```shell
|
|||
|
|
ionic start helloworld blank
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
注意： 由于这是小项目，因此在程序执行期间出现提示时输入No或N.
|
|||
|
|
|
|||
|
|
#### 3.将目录更改为`helloworld` \[这是您的离子目录\]
|
|||
|
|
|
|||
|
|
```shell
|
|||
|
|
cd helloworld
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
#### 4.在文本编辑器中打开文件夹。你会看到各种文件和子文件夹。
|
|||
|
|
|
|||
|
|
不要惊慌这些文件由npm为你自动生成。只需转到`src` - > `page` - > `home` - > `home.html` 。
|
|||
|
|
|
|||
|
|
#### 5.基本文件格式
|
|||
|
|
```
|
|||
|
|
`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语法，如图所示。
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
|
|||
|
|
<ion-header>
|
|||
|
|
<ion-navbar>
|
|||
|
|
<ion-title>
|
|||
|
|
Ionic Project
|
|||
|
|
</ion-title>
|
|||
|
|
</ion-navbar>
|
|||
|
|
</ion-header>
|
|||
|
|
|
|||
|
|
<ion-content padding>
|
|||
|
|
<h2>Hello World </h2>
|
|||
|
|
</ion-content>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
|
|||
|
|
#### 7. Save the code and run
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
贝壳 离子发球 \`\`\`
|
|||
|
|
|
|||
|
|
#### 8.要查看运行的代码，请转到浏览器并在URL中打开localhost：8100。
|