Ionic 2 开发(一)_安装与目录结构

简介: 由于公司开始使用后ionic 进行前段开发,现在需要学习下ionic,虽然是后台开发,但是还是有必要了解下的安装Node.js官网:http://nodejs.cn/自行下载安装安装Ionicnpm install -g cordovanpm install -g ionic设置淘宝镜像npm config set registry https://registry.

由于公司开始使用后ionic 进行前段开发,现在需要学习下ionic,虽然是后台开发,但是还是有必要了解下的

安装Node.js

安装Ionic

npm install -g cordova

npm install -g ionic

设置淘宝镜像

npm config set registry https://registry.npm.taobao.org
npm info underscore (如果上面配置正确这个命令会有字符串response)

新建项目

ionic start demo

编译运行调试

cd demo
npm install
ionic serve

enter image description here

项目结构

enter image description here

1.src/index.html

index.html 是 Ionic应用的主入口文件,其目的是设置脚本和CSS引导,然后开始运行我们的应用程序。这是我们项目的加载入口

2.src/app

入口文件夹 /app.component.ts
应用入口文件,每个应用程序都有一个根组件,用于控制应用程序的其余部分。将HomePage页面赋值给rootpage变量,在app.html中使用这个变量。

3.src/pages

放置我们生成的页面

4.src/assets

存放icon、img等资源

5.src/resources

包含你的app图标和启动画面,分安卓和ios

6.src/theme/variables.scss

覆盖默认样式的位置

学习不是要么0分,要么100分的。80分是收获;60分是收获;20分也是收获。有收获最重要。但是因为着眼于自己的不完美,最终放弃了,那就是彻底的0分了。
相关文章
|
JavaScript 开发工具 Android开发
初学者做APP所需工具安装及ionic-app-scripts has unexpectedly closed问题
初学者做APP所需工具安装及ionic-app-scripts has unexpectedly closed问题
145 0
初学者做APP所需工具安装及ionic-app-scripts has unexpectedly closed问题
|
JavaScript 前端开发 Android开发
Ionic 开发中遇到的常见问题及解决方案
Ionic 常见问题及解决方案
8373 0
|
Web App开发 Java 开发工具
ionic和cordova初探--从安装到运行首个app
好多人说ionic好用,一直要推荐我用,我就不信了,来安装玩一下试试效果。实践出真知!安装过程各种坑,工具太多了,太麻烦了,差点放弃(还好坚持下来呢)。 1.安装node 许多前端工具的安装都依赖于node的包管理器npm,Node官网: https://nodejs.org/ 安装完成后在cmd中输入 npm -v 回车。
2415 0
|
前端开发 C++ Windows
安装ionic 报错 安装canvas报错 解决办法
安装node-gyp 或将 npm 升级到内含 node-gyp 的版本 (nodejs v0.6.13以上的 npm 已内置了node-gyp, 则此步可以略过); 3.
1167 0
|
Web App开发 移动开发 JavaScript
Win10 UWP开发系列:使用VS2015 Update2+ionic开发第一个Cordova App
原文:Win10 UWP开发系列:使用VS2015 Update2+ionic开发第一个Cordova App 安装VS2015 Update2的过程是非常曲折的。还好经过不懈的努力,终于折腾成功了。 如果开发Cordova项目的话,推荐大家用一下ionic这个框架,效果还不错。
1788 0
|
缓存 JavaScript Android开发
Ionic 1 & 2 开发常见问题 Q&A
原文发表于我的技术博客 本文分享了在 Ionic 1 & 2 版本开发过程中常见问题的一些 Q&A,供慕课网同学或其他朋友参考。原文发表于我的技术博客 1. 版本的问题 Ionic 2 目前属于快速迭代更新的版本,版本的更新会带来如文件结构和少许代码的变更,不过底层还是构建于 Angular 2 ...
1527 0
ionic开发之用户头像修改-图片选择与上传
用户头像修改,图片选择上传,非常常用的功能,本来打算和wap版一样,也用XMLHttpRequest和FormData来处理图片异步上传,结果在手机上测试的时候发现,onload事件没有触发,没找到原因,本来想省点事才不用插件去实现这个功能的,这下看来只能用插件了。
1695 0
|
移动开发 前端开发 JavaScript
【技术干货】前端开发之IONIC移动端开发
Ionic是一套HTML5 Hybrid Mobile应用开发框架,本文给大家介绍的是如何在MAC下搭建Ionic开发平台和开发移动端应用。快点戳进来看看吧~
5995 0