构建我的第一个Ionic项目
来源:互联网 发布:管家婆数据库安装 编辑:程序博客网 时间:2024/05/14 06:40
一、下载安装Node.js
下载地址:https://nodejs.org/en/,安装后打开cmd输入以下命令查看版本号:
C:\Users\p0090268>node -vv6.11.0C:\Users\p0090268>npm -v3.10.10二、安装Ionic
输入以下命令安装Ionic:
npm install -g ionic如果之前安装过其他版本的话,需要先卸载:
npm uninstall -g ionic安装完成后输入以下命令查看版本号:
C:\Users\p0090268>ionic -version3.3.0三、安装Cordova
输入以下命令安装Cordova:
npm install -g cordova
在弹出的提示信息输入y,查看版本号:
C:\Users\p0090268>cordova -version7.0.1四、安装JDK
下载地址:http://www.oracle.com/technetwork/java/javase/downloads/index.html
下载安装后,设置系统变量,名称:JAVA_HOME, 值:C:\Program Files\Java\jdk1.8.0_51,在PATH中添加%JAVA_HOME%\bin
安装完成后输入以下命令查看版本:
C:\Users\p0090268>java -versionjava version "1.8.0_51"Java(TM) SE Runtime Environment (build 1.8.0_51-b16)Java HotSpot(TM) 64-Bit Server VM (build 25.51-b03, mixed mode)五、安装Android SDK
可以通过Android Studio下载,也可以去Android Developers自行下载,同样需要设置系统变量,名称:ANDROID_HOME, 值:D:\Android\sdk
六、创建项目
在命令行中cd到项目目录(任意路径),使用 start 命令来创建app:
ionic start MyFirstIonicProject tutorial --v3MyFirstIonicProject 是项目名,tutorial 是通过指定的 tutorial 模板来初始化项目,如果不加默认是tabs模版,如果不想使用模版添加blank参数,--v3是指定新建项目的Ionic版本,如果不加,默认是v1版本,如果你指定创建的版本没有安装或被移除,会创建失败。不出意外的话,running几分钟之后,项目就创建成功了。
七、运行项目
项目创建成功后,在该路径下会看到多了个MyFirstIonicProject文件,这就是我们的项目了。cd到该目录,通过 serve 命令来启动项目:
E:\Ionic\MyFirstIonicProject>cd MyFirstIonicProjectE:\Ionic\MyFirstIonicProject\MyFirstIonicProject>ionic serve等待命令行编译项目,输出内容:
[INFO] Starting app-scripts server: --port 8100 --p 81 --r 35729 --address 0.0.0.0 - Ctrl+C to cancel[15:07:40] watch started ...[15:07:40] build dev started ...[15:07:40] clean started ...[15:07:40] clean finished in 2 ms[15:07:40] copy started ...[15:07:40] transpile started ...[15:07:45] transpile finished in 4.39 s[15:07:45] preprocess started ...[15:07:45] deeplinks started ...[15:07:45] deeplinks finished in 17 ms[15:07:45] preprocess finished in 20 ms[15:07:45] webpack started ...[15:07:45] copy finished in 4.75 s[15:07:55] webpack finished in 10.69 s[15:07:55] sass started ...[15:07:57] sass finished in 2.21 s[15:07:57] postprocess started ...[15:07:58] postprocess finished in 42 ms[15:07:58] lint started ...[15:07:58] build dev finished in 17.45 s[15:07:58] watch ready in 17.75 s[15:07:58] dev server running: http://localhost:8100/[15:08:17] lint finished in 19.48 s然后浏览器会自动打开这个地址,就能看到效果了。
阅读全文
0 0
- 构建我的第一个Ionic项目
- 【ionic】我的第一个ionic程序
- 构建我的第一个react项目
- 我的第一个ionic应用的
- 第一个Ionic项目
- Ionic运行第一个项目
- 我的第一个项目
- 我的第一个项目
- 我的第一个项目
- 我的第一个项目
- 创建第一个ionic APP项目
- 我的第一个项目的收获
- maven构建第一个项目
- 构建第一个angular项目
- 我的第一个WFF项目
- 我做第一个项目的经历
- 第一个项目(我的智囊团)
- 我的第一个小项目
- java获取页面输入的值
- mysql利用group_concat()合并多行数据到一行
- stack和queue的错题
- 输入流与输出流
- Chipscope信号无法找到的解决方案
- 构建我的第一个Ionic项目
- quick-cocos2d-x CCHttpRequest詳細說明及用法
- 第2章 Liunx 安装maven
- 矩阵快速幂
- git学习笔记
- Android 深入分析Activity生命周期
- jdbc.properties
- Java与算法(4)
- 获取服务器数据通过Gson解析显示Listview上