Ionic3环境配置

Posted homehtml

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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:UsersHello.npminstall_tarball
ode-sass4.5.3win32-x64-48_binding.node
Binary found at D:Learn-Ionicionic-action
ode_modules\_node-sass@4.5.3@node-sassvendorwin32-x64-48inding.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-Ionicionic-action
ode_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部分可能比较麻烦。

本文转载于:Ionic3环境配置

以上是关于Ionic3环境配置的主要内容,如果未能解决你的问题,请参考以下文章

Ionic3 环境搭建以及基础配置实现(更新中)

ionic3 环境配置 + 運行第一個項目

ionic - ionic3.x + cordova7.0.1 环境配置

ionic3.x脚手架(基于个人项目自用)

ionic3 打包安卓平台环境搭建报错解决方案总结

VSCode 配置 用户自定义代码片段 自定义自动代码补充