Ionic3环境配置

Docker Action 记录 作者: LinkSystem 2017/08/11

Ionic3 Action 是我关于Ionic3的实践记录。

配置 cnpm和npm的国内源

#解决网速问题
npm install -g cnpm --registry=https://registry.npm.taobao.org

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

部署 Ionic cordova

npm install -g ionic cordova

创建 Ionic 的项目

#选择模版，通过上下键控制，然后回车

ionic start ionic-action

? What starter would you like to use:
> tabs ............... ionic-angular A starting project with a simple tabbed interface
  blank .............. ionic-angular A blank starter project
  sidemenu ........... ionic-angular A starting project with a side menu with navigation in the content area
  super .............. ionic-angular A starting project complete with pre-built pages, providers and best practices for
 Ionic development.
  conference ......... ionic-angular A project that demonstrates a realworld application
  tutorial ........... ionic-angular A tutorial based project that goes along with the Ionic documentation
  aws ................ ionic-angular AWS Mobile Hub Starter

#然后项目开始制动构建，但如果网速不是挺快的话，构建会错误而崩溃
#我猜原因是它校验了文件的sha值，
#需要手动删除node_modules，然后进入该项目重新 install 一下
#但需要注意的是不要使用 npm install，否则还是回因网络问题挂掉

cd ionic-action

cnpm install
\ [17/19] Installing repeat-string@^1.5.2platform unsupported @ionic/app-scripts@3.0.0 › chokidar@1.7.0 › fsevents@^1.0.0 Package require os(darwin) not compatible with your platform(win32)
[fsevents@^1.0.0] optional install error: Package require os(darwin) not compatible with your platform(win32)
√ Installed 19 packages
√ Linked 489 latest versions
Cached binary found at C:\Users\Hello\.npminstall_tarball\node-sass\4.5.3\win32-x64-48_binding.node
Binary found at D:\Learn-Ionic\ionic-action\node_modules\_node-sass@4.5.3@node-sass\vendor\win32-x64-48\binding.node
Testing binary
Binary is fine
√ Run 2 scripts
deprecate @ionic/app-scripts@3.0.0 › rollup-plugin-node-builtins@2.1.2 › browserify-fs@1.0.0 › level-filesystem@1.2.0 › level-sublevel@5.2.3 › xtend@2.0.6 › object-keys@~0.2.0 Please update to the latest object-keys
Recently updated (since 2017-09-22): 16 packages (detail see file D:\Learn-Ionic\ionic-action\node_modules\.recently_updates.txt)
  Today:
    → @ionic/app-scripts@3.0.0 › autoprefixer@7.1.1 › browserslist@2.4.0 › electron-to-chromium@^1.3.18(1.3.24) (16:02:24)
    → @ionic/app-scripts@3.0.0 › autoprefixer@7.1.1 › caniuse-lite@^1.0.30000670(1.0.30000740) (13:01:02)
    → @ionic/app-scripts@3.0.0 › tslint@5.7.0 › tsutils@^2.8.1(2.10.0) (02:28:25)
√ All packages installed (576 packages installed from npm registry, used 36s, speed 36.1kB/s, json 508(1.06MB), tarball 223.02kB)

访问 Ionic 项目

# 启动项目，自动访问 （默认浏览器）
ionic serve
[INFO] Starting app-scripts server: --address 0.0.0.0 --port 8100 --livereload-port 35729 --dev-logger-port 53703 -Ctrl+C to cancel

配置 Android Studio 以及 Android SDK

自行百度， 注意配置 SDK的所在的路径，Gradle的所在的路径

为 Ionic 添加插件

# --nofetch 是必须的
cordova platform add android@6.2.3 --nofetch

构建 Android 应用

ionic cordova run android

关于 Ionic 的错误

确实非常麻烦， 但如果规矩的按步骤来还是可以构建起来的，重点是配置Android部分可能比较麻烦。