ionic框架入门

 

1.Chocolatey

Chocolatey是一个Windows上的包管理器，类似于linux上的yum和apt-get。 你可以在其官方网站上查看具体的使用说明。一般的安装步骤应该是下面这样：

@powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))" && SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin

一般来说，使用Chocolatey来安装软件的时候，需要以管理员的身份来运行命令提示符窗口。译注：chocolatey的网站可能在国内访问困难，导致上述安装命令无法正常完成。请使用稳定的翻墙工具。 如果你实在装不上这个工具，也不要紧。nodejs你可以去对应的官方网站下载安装即可。

 

2.NodeJs

 

打开命令提示符窗口，使用Chocolatey来安装NodeJS。

choco install nodejs.install

安装完node后建议设置npm镜像以加速后面的过程（或使用科学上网工具）。注意：不要使用cnpm！cnpm安装的模块路径比较奇怪，packager不能正常识别！

npm config set registry https://registry.npm.taobao.org --global

npm config set disturl https://npm.taobao.org/dist --global

环境配置 说明：这里的环境配置主要配置的是npm安装的全局模块所在的路径，以及缓存cache的路径，之所以要配置，是因为以后在执行类似：npm install express [-g] （后面的可选参数-g，g代表global全局安装的意思）的安装语句时，会将安装的模块安装到C:\Program Files\nodejs路径中，占C盘空间。

例如：我希望将全模块所在路径和缓存路径放在我node.js安装的文件夹中，则在我安装的文件夹F:\androidFile\nodejs下创建两个文件夹nodeglobal及nodecache如下图：

 

创建完两个空文件夹之后，打开cmd命令窗口，输入

npm config set prefix "F:\androidFile\nodejs\node_global"

npm config set cache "F:\androidFile\nodejs\node_cache"

 

我的电脑中环境变量配置，打开环境变量对话框，

在系统变量下新建NODE_PATH，输入F:\androidFile\nodejs\node_global\node_modules

在用户变量下的Path修改为F:\androidFile\nodejs\node_global

安装插件环境1---->  npm install -g node-gyp

安装插件环境2----> npm install --global --production windows-build-tools

安装插件环境3---->   npm install node-sass

到此完成

 

3.ionic

// 安装（失败的话 Mac 尝试使用 sudo，Windows 尝试管理员身份运行cmd）

$ npm install -g cordova ionic // 安装后可以验证一下 ionic cli 版本$ ionic -version 3.5.0

 最新版可能会出现一些未知问题，或者先卸载已有版本 npm uninstall -g ionic   然后装3.9.1版本npm install -g ionic ionic@3.9.1

// 创建应用

// cd 到要创建项目的目录，输入以下内容创建ionic项目

// todo 是项目名，tabs是模板（默认是tabs，其他还有blank的单页等）

ionic start todo blank blank

此时的目录如下圈中的文件

// 安装依赖 

// 会生成一个 node_modules 文件夹，并在里面安装package.json 上写下的文件,这个过程会比较久或者很久，这一步完成就能跑起来了

 cd todo/
 npm install

拉取远程文件完成后的目录文件为圈中

// 在浏览器中运行项目

 ionic serve

完成后的目录文件为所有文件

// 添加到平台android并推送代码

 ionic cordova platform add android

//这里会出现Error: read ECONNRESET
    at TLSWrap.onStreamRead (internal/stream_base_commons.js:111:27)


PS E:\yangtao\ionic\todo> ionic cordova platform add android
> ionic integrations enable cordova
[INFO] Downloading integration cordova
Error: read ECONNRESET

    at TLSWrap.onStreamRead (internal/stream_base_commons.js:111:27)
//可去掉cordova尝试一下然后再使用ionic cordova platform add android构建android项目
PS E:\yangtao\ionic\todo> ionic platform add android
The platform command has been renamed. To find out more, run:

     ionic cordova platform --help

PS E:\yangtao\ionic\todo> ionic cordova platform add android
> ionic integrations enable cordova
[INFO] Downloading integration cordova
? The config.xml file exists in project. Overwrite? Yes
? The resources/ directory exists in project. Overwrite? Yes
[INFO] Copying integrations files to project
CREATE config.xml
CREATE resources
CREATE resources\android
CREATE resources\icon.png
CREATE resources\ios
CREATE resources\README.md
CREATE resources\splash.png
CREATE resources\android\icon
CREATE resources\android\splash
CREATE resources\ios\icon
CREATE resources\ios\splash
CREATE resources\android\icon\drawable-hdpi-icon.png
CREATE resources\android\icon\drawable-ldpi-icon.png
CREATE resources\android\icon\drawable-mdpi-icon.png


 ionic cordova build android

 ionic cordova run android