一般来说我们直接可以使用npm来安装ionic,但是由于国内的网络环境原因(你懂的)下载速> 度龟慢,所以可以考虑使用淘宝镜像来安装ionic比较快。以下教程是看了网上相关安装ionic的教程视频并且亲测成功截图写下来。先简述一下步骤,再详情查看详情的截图安装配置过程。

简略步骤:

  1. 请预先安装好nodejs (官网:https://nodejs.org/en/
  2. 安装淘宝镜像命令: npm install -g cnpm
    --registry=https://registry.npm.taobao.org
  3. 安装ionic命令: cnpm install -g ionic@beta
  4. 设置全局的npm从国内源加载:修改配置文件(安装的node路径下nodejsnode_modulesnpmnpmrc文件)npmrc,在文件的尾部添加配置registry
    =http://registry.cnpmjs.org
  5. 在项目文件夹初始化项目命令:ionic start demo --v2
  6. 在项目文件运行ionic环境服务命令:ionic serve

图文详情步骤:

1.打开cmd,以管理员身份运行(特别是win8和win10的,为了避免权限问题)

图片描述


2.拷贝复制命令 npm install -g cnpm --registry=https://registry.npm.taobao.org
(注意安装的node版本不要太旧,及时更新)

图片描述
图片描述

验证是否安装成功,输入命令 cnpm -v 查看版本号(能查看到版本号即表明安装成功)

图片描述


3.使用cnpm来安装Ionic,命令 cnpm install -g ionic@beta

图片描述

图片描述


4.设置全局的npm从国内源加载

a)修改配置文件(找到安装node路径下的nodejsnode_modulesnpmnpmrc文件)npmrc

图片描述

b)可以sublime或者记事本打开,修改文件内容,添加配置 registry = http://registry.cnpmjs.org

图片描述


5.在你的电脑本地新一个文件用来存放ionic项目文件,例如我新建一个ionicProj文件:

图片描述

重新打开一个cmd,进入到ionicProj文件下
尝试初始化项目,输入命令:ionic start demo --v2

图片描述

如果发现有这一步,是提示你创建一个ionic账户(方便ios开发使用账户),想注册输入Y否则n

图片描述

创建完毕,可以在本地看到以下文件

图片描述


6.测试刚才新建项目,在终端进入demo文件夹里面,使用命令 ionic serve 来启动demo项目

图片描述

如果有来到以下截图这里卡住了,这里的意思要你选择一个运行的服务器地址(有1,2,3,4可以选了),在Address Selection: 中可以输入localhost

图片描述

然后会自动调用你的chrome浏览打开看到demo效果:

图片描述


附:
最近有网友真机测试过,提醒问题:
V2默认demo编译出来的apk,在安卓机上,底部是竖向排列的,并且点击无效,V1.x的,就没问题。


东雄平
356 声望19 粉丝

第四棒选手东雄平