Ionic3环境配置

dreamans 发布于2019-08-05 12:11 / 807人阅读

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部分可能比较麻烦。

混合云超融合服务器环境配置网站环境配置虚机配置环境高级环境配置

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/56765.html

使用Ionic3框架开始第一个混合开发APP

摘要：什么是框架框架是一个混合开发框架，其本身依赖于，，。使用框架可以做什么使用可以使用前端相关技术快速开发多平台的移动。使用全局安装和。输入，这是添加一个平台的命令。注意这个包是版本，并非正式包，正式包需要先生成签名至此，你就开始了第一个应用。什么是混合开发？简单来说，就是在开发移动应用中同时使用Native和Web的开发方式。什么是Ionic3框架？ Ionic3框架是一个混合开发...

wangshijun 2019-08-02 15:57 评论0 收藏0
使用Ionic3框架开始第一个混合开发APP

摘要：什么是框架框架是一个混合开发框架，其本身依赖于，，。使用框架可以做什么使用可以使用前端相关技术快速开发多平台的移动。使用全局安装和。输入，这是添加一个平台的命令。注意这个包是版本，并非正式包，正式包需要先生成签名至此，你就开始了第一个应用。什么是混合开发？简单来说，就是在开发移动应用中同时使用Native和Web的开发方式。什么是Ionic3框架？ Ionic3框架是一个混合开发...

Mr_houzi 2019-08-21 11:54 评论0 收藏0
使用Ionic3框架开始第一个混合开发APP

摘要：什么是框架框架是一个混合开发框架，其本身依赖于，，。使用框架可以做什么使用可以使用前端相关技术快速开发多平台的移动。使用全局安装和。输入，这是添加一个平台的命令。注意这个包是版本，并非正式包，正式包需要先生成签名至此，你就开始了第一个应用。什么是混合开发？简单来说，就是在开发移动应用中同时使用Native和Web的开发方式。什么是Ionic3框架？ Ionic3框架是一个混合开发...

khs1994 2019-06-25 11:31 评论0 收藏0
使用Ionic3框架开始第一个混合开发APP

摘要：什么是框架框架是一个混合开发框架，其本身依赖于，，。使用框架可以做什么使用可以使用前端相关技术快速开发多平台的移动。使用全局安装和。输入，这是添加一个平台的命令。注意这个包是版本，并非正式包，正式包需要先生成签名至此，你就开始了第一个应用。什么是混合开发？简单来说，就是在开发移动应用中同时使用Native和Web的开发方式。什么是Ionic3框架？ Ionic3框架是一个混合开发...

thursday 2019-08-29 13:10 评论0 收藏0
ionic3 教程（五）基本的网络请求

摘要：链接教程一安装和配置教程二登录页制作教程三设置页制作教程四安卓硬件返回键处理教程五基本的网络请求这是最后一节，本节主要用最简单网络请求和基本的内置指令做一个演示。接收数据用依赖注入网络请求会返回一个对象。 showImg(https://segmentfault.com/img/remote/1460000010805290); 链接： ionic3教程（一）安装和配置 ionic...

bbbbbb 2019-08-01 17:27 评论0 收藏0