学习的产物
学习最好的方式还是跟着项目走!
在学习Ionic4的时候,我给自己找了个项目:一个简单的数独游戏。
(文末附完整源码)
这个游戏暂定要完成以下内容:
-
首页
-
数独
- 游戏难度选择
- 数字填写
- 笔记模式
- 擦除填写
- 同数字提示
- 关联格子提示
-
设置
- 语言选择
-
关于
由于笔者的前端是半路出家,所以或许有些地方在大师看来会很幼稚,欢迎指正!
话不多说,开始创建数独项目:
Ionic4的安装也需要Node.js,这里就不介绍如何安装Node.js了
有需要的移步:Node.js官网,同时这里也附上 Ionic官方文档
1. 安装Ionic CLI
在安装之前,确保安装了Node.js和npm的最新版本。
使用npm全局安装Ionic CLI:
npm install -g ionic
-g
表示全局安装,在Windows下,需要管理员权限。在Mac/Linux中,还需要输入sudo
.
2. 创建项目
输入如下语句,看网络情况,这个创建,需要一段时间,耐心等待。
ionic start IonicSoduku blank
安装到最后会提示是否安装Appflow: Install the free Ionic Appflow SDK and connect your app? (Y/n)
这里我输入的是n,不安装
IonicSoduku
是创建项目的名称,也是文件夹名称;
下面是最后那个blank
相关的说明:
tabs
: 带了下方切换页面按钮的项目
sidemenu
: 带了侧边菜单的项目
blank
: 只有一个页面的空项目
3. 启动项目
接下来,进入创建的IonicSoduku
目录,输入ionic serve
启动项目
cd IonicSoduku
ionic serve
到此,项目启动了,不出意外,应该能看到如下画面:
附上github完整的源码地址:
https://github.com/bobgame/Ionic-Sudoku
下一篇:Ionic4 学习笔记(二):首页制作,创建其他页面