小新入坑ionic初步配置

本文详细介绍Ionic框架,一种用于构建接近原生体验的HTML5移动应用的框架。文章涵盖Ionic的安装步骤,包括JDK、Node.js、Cordova及Ionic本身的安装配置,以及如何使用Ionic创建和运行移动应用。

##使用之前要知道ionic是什么
百度搜的–哈哈!
ionic 是一个强大的 HTML5 应用程序开发框架(HTML5 Hybrid Mobile App Framework )。 可以帮助您使用 Web 技术,比如 HTML、CSS 和 Javascript 构建接近原生体验的移动应用程序。
ionic 主要关注外观和体验,以及和你的应用程序的 UI 交互,特别适合用于基于 Hybird 模式的 HTML5 移动应用程序开发。

##总体来说就是帮助我们去开发移动端界面的一个框架
##知道了这个框架后肯定是要知道怎么安装了

1,首先——要安装javaJDK(这里推荐安装1.8的)
网盘地址:链接:https://pan.baidu.com/s/1GD8SCFj5DEnqTroLyL6lGQ
提取码:xiuj
一直下一步安装完成
然后找到下载的位置,
在这里插入图片描述
把这个地址复制下来
右键我的电脑——属性
在这里插入图片描述
点这个高级选项——环境变量——Path
在这里插入图片描述
然后双击打开将地址粘贴到最后,记得前面加个分号;
然后运行cmd
输入java –version查看java版本,会有提示信息

2,下载node.js
官网:http://nodejs.cn/download/
下载自己电脑版本的即可
也是一路下一步,可以修改文件目录位置

3,Ionic和cordova下载
因为使用npm下载一些插件时,因为网速过慢等原因,我们可以先设置淘宝镜像。打开(nodejs的安装目录)下的npmrc文件,用记事本打开,加入registry=https://registry.npm.taobao.org;
在命令行输入npm install -g cordova,全局安装cordova;cordova –v查看版本
在命令行输入npm install -g ionic,全局安装ionic;ionic –v查看版本
npm全局安装的插件在C:\Users\XXX \AppData\Roaming\npm中
我们也可以加入到环境变量中

4,Ionic创建或者找现成的模板
使用ionic官方提供的现成的应用程序模板,或一个空白的项目创建一个ionic应用:
ionic start myApp tabs
不出意外这里应该会出错,反正我的是死活创建不了(我用的是模板)

5,启动应用
这里推荐使用vs Code 来运行
点击工具栏——查看——找到终端
会自动调到你当前的目录,然后输入
ionic serve
启动成功会跳到http://localhost:8100这个地址

6,手机调试界面
你也可以在终端启动的时候输入
ionic serve -l
然后在后面加ionic-labhttp://localhost:8100/ionic-lab
在这里插入图片描述
这里有3种系统可以选择

最后——当然你也可以选择下载安卓模拟器来操作真机模式

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值