专栏首页编程直播室Ionic安装环境安装关于墙国环境创建Ionic项目测试运行项目

Ionic安装环境安装关于墙国环境创建Ionic项目测试运行项目

环境安装

先安装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

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

启动过程

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

运行效果

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Canvas2D画线和面1.Html中的画布2.渲染上下文3.画一个方块4.画一条线

    孙亖
  • 微风2005一、主翼主要规格二、主要数据打造一台适合初学者使用的练习机「微风2005」锥形翼製作过程

    孙亖
  • Ionic 2 问题集Console.log 不输出编译Android报错:compileArmv7DebugJavaWithJavac一些更新命令错误:Error: listen EADDRINUS

    孙亖
  • npm下载报错情况的处理

    npm是一个非常强大的包管理器,基本上前端需要的插件和框架在这上面都有,所以本人一直只用这个,其他的一律先忽视。然而使用npm时有时候会出现error以及无法下...

    NateHuang
  • windows 上优雅的安装 node 和 npm

    我一直觉得我掌握的这份优雅是被许多人所知道了,直到我发现小伙伴们都下载 .msi 来装 node ,我心中的优雅感终于压制不住。 .msi 安装 windows...

    IMWeb前端团队
  • windows 上优雅的安装 node 和 npm

    我一直觉得我掌握的这份优雅是被许多人所知道了,直到我发现小伙伴们都下载 .msi 来装 node ,我心中的优雅感终于压制不住。

    IMWeb前端团队
  • 使同事羡慕不已的8个npm命令

    这篇文章会为你揭示一些有用的 npm 技巧,由于篇幅原因不可能涵盖所有,所以我选择了工程师日常相关且有用的作为本篇文章的关注点。 基本简写 为了大家保持一致,特...

    前端黑板报
  • 前端基础-Node.js包管理器npm

    上面的代码,我们使用npm安装了moment来进行格式化时间的处理,这就是使用第三方模块;

    cwl_java
  • 恭喜GitHub!今日喜提npm:Node Package Manager

    如果您曾在JS前端或node.js开发中投入过时间和精力的话,那么您肯定已经与npm打过多次交道了。正是由于npm的努力才使得JS成为了世界上最大的开发者生态系...

    用户1272076
  • 全球最大包管理器npm被GitHub收购,将与GitHub整合,网友:别被微软搞垮

    npm全称Node Package Manager,用JavaScript写成,已有超过10年历史,现在拥有130万个软件包,每月下载量达750亿次。

    量子位

扫码关注云+社区

领取腾讯云代金券