ionic3填坑之旅

最新推荐文章于 2020-07-13 15:10:34 发布

转载最新推荐文章于 2020-07-13 15:10:34 发布 · 78 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/lmxy1990/blog/1799135

为什么80%的码农都做不了架构师？>>>

基础环境安装

1.安装nodeJS

2.安装angular

npm install -g @angular/cli

3.安装cordova

npm install -g  cordova

4.安装ionic

npm install -g ionic

5.设置npm镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org

---------------------------

开始创建项目

1.ionic 新建一个项目

ionic start my_app tabs

2.这里如果出现问题,找个vpn挂一下吧.如果挂vpn还是不行,试下清除npm/ionic的代理设置

npm config delete http-proxy
npm config delete https-proxy

3.进入创建好的目录,install

cd my_app
cnpm i

4.添加ionic支持平台的ios/andriod

ionic cordova platform add ios
ionic cordova platform add android

5.启动项目,就可以看到一个页面了.

ionic serve

坑1:

安装ionic 与cordova的顺序错误的话,新建项目会一直抛异常,新建不了(这里排除网络问题)

项目编译

1.编译安卓时候,gradle unzip错误.解决办法,使用本地的gradle

设置环境变量
CORDOVA_ANDROID_GRADLE_DISTRIBUTION_URL=https://www.xiapp.top/gradle-4.1-all.zip

修改编译指定的gradle版本(这个android-gradle)注意与上面那个不是一个东西
xxx\platforms\android\CordovaLib\build.gradle

这里建议不要用最新版,build.gradle这里不用修改,下载
xxx\platforms\android\cordova\lib\builders\GradleBuilder.js
对应的版本就可以了.

2.from 未找到警告

修改这个文件
xxx\node_modules\@ionic\app-scripts\dist\sass.js

找到 postcssOptions
设置成:
var postcssOptions = {
  from: undefined,
  to: path_1.basename(sassConfig.outFile),
  map: autoPrefixerMapOptions
};

转载于:https://my.oschina.net/lmxy1990/blog/1799135