ionic2(仿单糖app)-01环境搭建与项目初始化

相关网站

ionic官网 Ionic2官方文档地址

• ionic的官方文档还是比较健全的。有 环境搭建及命令行cli、大量仿原生应用的控件的使用示例、各种类的API、cordova插件(js和ios、android开发语言的通信)、常用的字体图标等。
• ionic2 是基于angular2版本以上的二次开发的框架。所以 需要熟悉的语言有 angular2-4、typescript、es6等。涉及的其他东西有 scss、webpack、制作子体图标等。

环境搭建

1.下载安装NodeJs包

注：作者使用的是mac环境。 建议选择6.11 版本。
安装完成后，打开终端 执行 npm -version 查看是否安装成功。

命令

注: npm 是前端的一个包管理器

2. 安装ionic和Cordova

安装命令为

npm -g ionic cordova

其中 -g 为 Global 全局安装的意思。 检测是否安装成功，和上面一样查看版本号 ionic -version cordova -version
温馨提示: 如果因为网络原因安装失败，请 科学上网 或 切换到 淘宝源 cnpm

ionic cordova 命令

当然 版本不一样 也是没有关系的

3.初始化一个helloworld项目

ionic start DanTang tutorial

• start 是创建一个新的项目
• DanTang 是项目的名字
• tutorial 是创建项目使用的模版

ionic 提供了一下几种模版

• tabs 有3个tab的简单分栏项目
• menu 侧滑的项目
• blank 空项目
• tutorial 指导性的项目(和tabs差别不大)

4. 进入到新建的项目目录下

cd DanTang

5. 启动项目

ionic serve

到此 ionic的helloworld项目就结束了。更多ionic cli 的命令 请使用 ionic -help 自行学习 查看。