Ionic安装

作者: 孙亖 | 来源:发表于2016-10-24 14:10 被阅读147次

    环境安装

    先安装Node.js,网址 www.nodejs.org

    下载地址是:https://nodejs.org/en/download/current/, 如果不是请自行在官网上查找。安装一路Next,直至Finish即可。

    安装Ionic

    接下来正式安装Ionic,使用命令行工具:

    $ npm install -g ionic cordova
    

    如果没有管理员权限,可以使用sudo命令(linux下)。

    通过命令行窗口安装ionic cordova
    npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
    C:\Users\sunjipeng\AppData\Roaming\npm\cordova -> C:\Users\sunjipeng\AppData\Roaming\npm\node_modules\cordova\bin\cordova
    C:\Users\sunjipeng\AppData\Roaming\npm\ionic -> C:\Users\sunjipeng\AppData\Roaming\npm\node_modules\ionic\bin\ionic
    C:\Users\sunjipeng\AppData\Roaming\npm
    

    警告忽略了。

    关于墙国环境

    在Ionic的安装和后续维护中会大量使用到npm工具,虽然npm可以访问,但是速度感人,因此天朝新一代无产阶级程序员一般会给npm加一个国内的源。目前,使用最多的是淘宝的源。
    淘宝给nmp代理专门建立了一个网页:https://npm.taobao.org/,上面介绍了如何用替代工具cnpm来加速访问。
    不习惯使用cnpm的还可以按照传统方式给npm加源,有三种方法,三种办法任意一种都能解决问题,建议使用第三种,将配置写死,下次用的时候配置还在:
    1.通过config命令

    npm config set registry https://registry.npm.taobao.org
    npm info underscore (如果上面配置正确这个命令会有字符串response)
    

    2.命令行指定

    npm --registry https://registry.npm.taobao.org info underscore
    

    3.编辑 ~/.npmrc 加入下面内容

    registry = https://registry.npm.taobao.org
    

    推荐使用最后一种方法,一劳永逸,前面2钟方法都是临时改变包下载源.
    如果你不像使用国内镜像站点,只需要将 写入 ~/.npmrc 的配置内容删除即可。
    除了淘宝外,还有一个源: http://registry.cnpmjs.org。由于本人没有试过,就作为备用参考吧。

    创建Ionic项目

    $ ionic start MyIonic2Project tutorial --v2
    

    使用 start 命令,MyIonic2Project 这是项目名,tutorial是模版名,如果不指定该参数则默认使用tabs 模版,--V2说明使用ionic2。

    创建Ionic项目

    报错了undefined,先按提示用安装命令升级下cordova试试:

     npm install -g cordova
    
    安装更新cordova

    错误依旧,加上参数--verbose

    ionic start MyIonic2Project tutorial --v2 --verbose
    

    发现需要安装git和python2,安装后创建工程成功。

    创建项目成功

    测试运行项目

    进入项目目录

    cd MyIonic2Project
    

    启动

    ionic serve
    

    启动过程需要一点时间,如下图所示:

    启动过程

    启动后,在浏览器就能看到程序界面了:

    运行效果

    相关文章

      网友评论

      本文标题:Ionic安装

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