Ionic3 Start

作者: spilledyear | 来源:发表于2017-10-25 11:28 被阅读202次

    本文是Ionic3系列的第一排你文章,主要介绍开发环境的搭建过程,之后的文章将依赖此应用,不再涉及到环境搭建方面的内容(除非是添加特性),Ionic官方文档:
    ionic官网
    ionic官方文档

    本项目github地址:
    github 地址

    ionic打包成Android应用的详细教程,请参考参考以下链接:
    ionic3 Android打包

    环境准备

    • node:8.x
    • npm:5.x
    • ionic: 3.x
    • Angular:4.x
    • Cordova:7.x

    工具准备

    安装Node
    node下载
    下载完成之后:解压 》 配置环境遍历 》 测试
    node自带npm,node安装成功,npm也就安装成功

    测试命令  
    node -v 
    npm -v 
    

    安装Ionic command-line tools
    利用npm包管理器安装 ionic command-line tools

    npm install -g ionic
    这样会安装最新版本的ionic ,  -g  代表全局安装
    
    测试是否安装成功
    ionic -v
    

    安装Cordova
    cordova是用来打包的,也就是让js有能力调用原生设备接口,利用npm包管理器安装 cordova

    npm install -g cordova
    这样会安装最新版本的cordova,  -g  代表全局安装
    
    测试是否安装成功
    cordova -v
    

    创建项目

    以上就已经安装好了 ionic cli可供使用,通过 ionic cli,可以非常方便的创建一个ionic项目。同时,利用该工具创建ionic项目的时候可以选择不同的模板,也可以选择不适用模板,只需要命令后面的一个参数即可,例如,以下命令将创建一个 带有 tabs 模板的 ionic项目,通过ionic start 创建一个应用:

    ionic start inStart tabs
    

    inStart是应用的名称, tabs是模板的名称。对应的,还可以使用创建没有模板的应用:

    ionic start inStart blank
    该命令会创建一个基于ionic 最新版本的应用
    

    高本版的ionic cli还有很多非常好用的功能,比如

    ionic start inStart tabs  --type ionic1
    创建 一个 基于ionic1 版本的应用
    
    ionic g page menu
    该命令用于创建一个名为menu的page
    

    以上是基于ionic cli 创建应用,ionic网还介绍了一种使用可视化工具Creator创建应用的方法,具体的不太清楚,有兴趣的可以尝试。

    启动应用

    这里所说的启动应用,是指启动应用在浏览器查看、调试,并不涉及到打包的内容。
    启动应用比较简单,一条命令就可以搞定:

    cd  inStart 
    ionic serve
    

    相关文章

      网友评论

        本文标题:Ionic3 Start

        本文链接:https://www.haomeiwen.com/subject/tagfpxtx.html