当前位置: 棋牌电玩游戏平台 > 独家报道 > 正文

从零开始的ionic------环境搭建

时间:2019-07-23 11:15来源:独家报道
访问node.js官网( 在安装ionic 2之前先给大家介绍一款管理mac软件的神器---Homebrew。 ionic简介 ionic 是一个强大的 HTML5 混合移动应用程序开发框架(HTML5 Hybrid MobileApp Framework )。 可以帮助你使

访问node.js官网(

在安装ionic 2之前先给大家介绍一款管理mac软件的神器---Homebrew。

ionic简介

ionic 是一个强大的 HTML5 混合移动应用程序开发框架(HTML5 Hybrid Mobile App Framework )。 可以帮助你使用 Web 技术,比如 HTML、CSS 和 Javascript 构建接近原生体验的移动应用程序
ionic 主要关注外观和体验,以及和你的应用程序的 UI 交互,特别适合用于基于 Hybird 模式的 HTML5 移动应用程序开发。

这里先给个ionic的官网https://ionicframework.com/
建议大家读完本文档后再去ionic官网瞧一瞧,看不懂的结合一下谷歌翻译还是OK的。

补充一个ionic中文文档网站http://www.ionic.wang/

:本文档比较详细,因为打算让初学者能够读懂并多了解一些开发者必备的知识,很多基础知识基础用法都提到了一些。
如果某部分你已经了解,请直接跳过,如果你比较着急使用ionic,请直接跳到最后,我把步骤用最简单的方式总结在了一起。

下载完,点击安装  【默认目录】

安装Homebrew

打开终端窗口, 粘贴以下脚本即可

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

brew search 应用 搜索应用
brew install 应用 安装应用
brew help 查看相关命令
更多Homebrew详情:http://brew.sh/

运行环境搭建

Ionic应用程序主要通过Ionic命令行实用程序(“CLI”)创建和开发,并使用Cordova构建和部署为本机应用程序。所以在创建Ionic项目,你需要安装最新版本的Ionic CLI和Cordova。

在安装Ionic CLI和Cordova之前,你必须得先安装Node.js。

Node.js v8.9.3 to /usr/local/bin/node
 npm v5.5.1 to /usr/local/bin/npm 

安装ionic 2

Ionic 2 程序主要通过Ionic命令行工具CLI来创建和开发,并使用Cordova来构建和部署为原生应用程序。也就是说我们需要先安装一些工具来实现程序开发。

要创建 Ionic 2 项目,你需要安装最新版本的 CLI 和 Cordova。在此之前你需要安装最新版本的Node.js。然后继续安装Ionic CLI和Cordova来进行应用程序开发:

安装Node.js

====安装完毕====

1.安装node.js

brew search node
brew install node

或者官网下载:https://nodejs.org/zh-cn/

Windows环境下

点击下载会打开到nodejs官网的连接,官网首页会自动判断你的系统并给出下载链接

图片 1

image.png

左边的LTS(Long Term Support)是指长期稳定版,代表着长效,可靠,至少支持18个月,一般即使最新技术都会支持该版本。
而右边的Current则是当前最新版,优点则是有很多新功能。
一般来说,我们选择LTS的可靠版本(当然,我们以后也是可以再切换版本的)。
点击后会下载.msi文件,下载完成后进行安装,配置根据个人需要进行选择,一般来说一路默认过来就OK了。

图片 2

image.png

安装完成后,进入命令行输入node --version或node -v,如果显示版本,则安装成功。

node -v   npm - v

2.安装ionic

npm install -g ionic

Linux环境下

待续

==============

3.安装cordova

npm install -g cordova
命令前面可能需要添加sudo提权来进行全局安装。

如果因为网络原因安装不上解决办法
修改npm源为淘宝npm源,可以使用下面三种方法中的任意一种

  • 通过config命令
    1.npm config set registry https://registry.npm.taobao.org
    2.npm info underscore (如果上面配置正确这个命令会有字符串response)
  • 命令行指定
    npm --registry https://registry.npm.taobao.org info underscore
  • 编辑 ~/.npmrc 加入下面内容
    registry = https://registry.npm.taobao.org

npm包管理工具

nodejs安装好之后我们就可以使用npm了。
npm是随同NodeJS一起安装的包管理工具,常见的使用场景有以下几种:

  • 允许用户从NPM服务器下载别人编写的第三方包到本地使用。
  • 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
  • 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

nodejs已经集成了npm,所以npm也一并安装好了。同样可以通过输入 "npm -v" 来测试是否成功安装。命令如下,出现版本提示表示安装成功:

图片 3

image.png

npm非常有用,很多有用的第三方包通过npm都可以很方便的安装,以后大家可能会经常用到。

安装ionic

4.安装运行工具:

真机:npm install -g ios-deploy
模拟器:npm install -g ios-sim

使用 npm 命令安装模块

npm 安装 Node.js 模块语法格式如下:
npm install <Module Name>
不过,因为国内的网络限制,npm安装包的时候会时灵时不灵的。而解决方法有两个:

npm install -g ionic  或者 npm install -g ionic@latest

5.创建项目

ionic start myapp // 默认创建ionic 1,加上--v2才是ionic 2
ionic start myapp --v2 //默认tabs
ionic start myApp tabs --v2 //创建带有top栏和bottom栏的示例项目
ionic start myApp sidemenu --v2 //创建带有左侧带有menu栏的示例项目
ionic start myApp blank --v2 //创建空白项目

一、科学上网

也就是翻墙,挂vpn,分为免费(如蓝灯)和付费(如云梯vpn),这里我就不多说了,大家可以自己去搜索找适合自己的。

继续等待安装,完成

6.运行应用

进入到项目的目录下(cd myApp/)

浏览器中运行:ionic serve
模拟器中运行(默认):ionic run ios
真机中运行:ionic run ios --device

接下来就可以进行项目开发了。

二、使用npm淘宝镜像包cnpm

镜像一般说的是对某个对象的完全映射。
这个在电脑网络中比较常见的是镜像服务器,比如现在的根目录域名解析服务器就是采用了镜像的模式,让用户在上网的时候,不必去直接访问设置在国外的服务器进行域名解析,只要访问国内的镜像服务器就可以完成域名解析了。
国内访问不了国外网站,一些大公司便弄出了各种国内镜像服务器来映射一些服务。
cnpm官网地址http://npm.taobao.org/

查看版本    ionic -- version   或者 ionic --info

cnpm使用说明

先用npm安装cnpm,用cnpm(gzip 压缩支持) 命令行工具代替默认的 npm:
$ npm install -g cnpm --registry=https://registry.npm.taobao.org

安装模块
$ cnpm install [name]

cnpm支持 npm 除了publish之外的所有命令,以后需要用到npm命令时,直接用cnpm来替代npm,后面命令参数都不需要改变。

:之前在北京实习的时候,一位大佬(我们的研发总监,曾经微软中国的主任)说过,在他们实际使用中,cnpm有时是有问题的。所以如果你在之后的项目中,有时使用cnpm安装失败时,翻个墙用npm试试。

=============

cnpm安装ionic cli 和cordova

输入命令:cnpm install -g ionic cordova

:如果在模块后面加@则可以选择版本,如cnpm install -g ionic@2.2.2便可以安装2.2.2版本的ionic cli。

安装完成后便可以使用命令 ionic -v和 cordova -v来查看版本

编辑:独家报道 本文来源:从零开始的ionic------环境搭建

关键词: 操作系统 OS X Ionic iOS开发之