ionic 快速入门

2019-08-06 本文已影响0人不染事非

安装

请确保安装了最新的Node 6 LTS和NPM 3+
然后，全局安装CLI（您可能需要sudo）

$ npm install -g ionic@latest

您可以使用该ionic --version命令验证安装。

入门

使用ionic start以下方法启动新的Ionic项目；

$ ionic start myNewProject

选择启动器后，CLI将创建一个名为的新应用程序myNewProject。一旦你cd进入你的项目目录，一些新的命令变为可用，如ionic serve：

$ cd ./myNewProject
$ ionic serve

运行时ionic serve，您对应用代码所做的更改将自动刷新浏览器。如果要在设备或模拟器上查看应用程序，可以使用Cordova。
您可以使用该ionic --help命令列出可用命令。

使用Cordova

将Ionic与Cordova集成，为您的应用程序带来原生功能。

$ npm install -g cordova
$ ionic cordova --help
$ ionic cordova run ios

故障排除

确保您使用的是最新版本的CLI。用npm update -g ionic。更新。

配置文件

配置值存储在JSON文件中。

全局配置文件（~/.ionic/config.json）：用于全局CLI配置和身份验证
项目配置文件（ionic.config.json）：用于离子项目配置
CLI提供了用于从项目配置文件和全局CLI配置文件设置和打印配置值的命令。查看ionic config set --help和ionic config get --help使用。

环境变量

CLI将查找以下环境变量：

IONIC_CONFIG_DIRECTORY：全局CLI配置的目录。默认为~/.ionic。
IONIC_HTTP_PROXY：设置用于代理所有CLI请求的URL。请参阅使用代理。CLI也会查找
HTTP_PROXY和HTTPS_PROXY使用npm。
IONIC_EMAIL/ IONIC_PASSWORD：用于通过环境变量自动登录。

服务代理

CLI可以将代理添加到HTTP服务器以获取“livereload”命令，例如ionic serve和ionic cordova run android -lc。如果您在浏览器中进行开发并且需要调用外部API，则这些代理非常有用。使用此功能，您可以通过Ionic CLI将请求代理到外部API，从而防止出现No 'Access-Control-Allow-Origin' header is present on the requested resource错误。
在ionic.config.json文件中，您可以添加包含要添加的代理数组的属性。代理是具有以下属性的对象：

path：将与传入请求URL的开头匹配的字符串。
proxyUrl：一个字符串，其中包含代理请求应该去的URL。
xyNoAgent:(可选）true / false，如果true选择了连接池，请参阅HttpAgent

{
  "name": "appname",
  "app_id": "",
  "type": "ionic-angular",
  "proxies": [
    {
      "path": "/v1",
      "proxyUrl": "https://api.instagram.com/v1"
    }
  ]
}

使用上面的配置，您现在可以向本地服务器http://localhost:8100/v1发出请求，让它代理请求https://api.instagram.com/v1。

注意：不要忘记将应用中请求的网址更改为本地网址。此外，必须重新启动“livereload”命令才能使代理配置生效。

使用代理

要代理CLI执行的HTTP请求，您需要在与node_modulesIonic CLI 相同的上下文中安装CLI代理插件：
对于全局安装的CLI：

$ npm install -g @ionic/cli-plugin-proxy

对于本地安装的CLI：

$ cd myProject # cd into your project's directory
$ npm install --save-exact --save-dev @ionic/cli-plugin-proxy

然后，使用以下环境变量之一：

$ export HTTP_PROXY="http://proxy.example.com:8888" # also used by npm
$ export HTTPS_PROXY="https://proxy.example.com:8888" # also used by npm
$ export IONIC_HTTP_PROXY="http://proxy.example.com:8888"

其他CLI

npm

$ npm config set proxy http://proxy.company.com:8888
$ npm config set https-proxy https://proxy.company.com:8888

混帐

$ git config --global http.proxy http://proxy.example.com:8888

SSL配置

您可以配置Ionic CLI的SSL（类似于配置npm CLI）：

$ ionic config set -g ssl.cafile /path/to/cafile # file path to your CA root certificate
$ ionic config set -g ssl.certfile /path/to/certfile # file path to a client certificate
$ ionic config set -g ssl.keyfile /path/to/keyfile # file path to a client key file

的cafile，certfile和keyfile条目可以手动编辑为字符串数组中~/.ionic/config.json包括多个文件。