ionic开发之优化目录结构
当我们来个ionic start circleApp tabs的时候,会自动生成目录结构,基本如下:
显然这不利于项目的管理,当你的项目越来越复杂的时候,这是不够的。我们必须要按照模块进行文件夹的方式去管理
以下为优化后的目录结构
在模板处,我们将其按照模块文件夹的方式去分开管理,每个模块带着自己的控制器走。采用就近原则的管理方式。
当然只要你百度,还有更具备模块化的管理方式,当项目大到一定程度的时候,这种管理方式显然也是不够的,这里不做讨论。
接下来讲讲如何定制化自己的ionic主题样式。
ionic采用的sass来写css,所以你改主题样式,如果直接在css改,那可能会出问题,比如你替换一下颜色值,你必须查找全部替换,那会出现意想不到的问题,为此我们推荐更改sass,然后再去编译它。默认ionic已经有了gulpfile文件。
所以很好,我们就gulp去编译它,ok,假设我们对他的黄色表示不太满意,我们可以去改改
,改完之后需要编译了,编译之前我们来看看gulpfile文件为我们准备了什么
为了编译不报错,我们需要安装上面所列举到的gulp插件,当然安装这些插件的前提是你已经安装了全局的gulp和项目的gulp
这里要主要的是安装gulp-sass的时候需要自动安装node-sass,需要去传说中亚马逊的服务器中下载,需要FQ下载或者用淘宝镜像去下载,我是采用淘宝镜像去下载的。
安装完之后,查看webstorm右击gulpfile文件中的show gulp task
如果能正常显示出任务,说明基本没有错了,可以直接在webstorm中去运行某个任务,run gulp命令
当然比较酷的做法可能不这样,使用命令行的方式,因为gulpfile文件默认的任务是sass,所以直接在命令行中写入gulp或许比较快速直接点
显示完成时间之后已经编译了新的css文件
最后的一步骤别忘了,在index.html中的css引入问题,需要改成ionic.min.css来替代
至此,我们定制化的ionic主题已经配置完成。
ionic开发之优化目录结构的更多相关文章
- magento开发手册之目录结构
magento是一个很优秀的电商系统,很多朋友会用它部署自己的电商网站,少不了二次开发.下面我们随着ytkah来一起认识一下magento开发手册之目录结构吧. /app – 程序根目录 /app/e ...
- iOS开发总结——项目目录结构
1.前言 清晰的项目目录结构有利于项目的开发,同时也是软件架构的一部分,所以,项目开发之初搭建项目的目录结构很重要.刚转iOS时,自己并不知道如何搭建App的项目目录,在参与开发两个应用后,结合Web ...
- iOS项目开发中的目录结构
目录结构: 1.AppDelegate 这个目录下放的是AppDelegate.h(.m)文件,是整个应用的入口文件,所以单独拿出来. 2.Models 这个目录下放一些与数据相关的Mod ...
- WEB开发的标准目录结构
刚才在书上看到的,感觉很重要,简单做个笔记 把你的jsp.css.js代码分别放到3个文件夹中(这3个文件夹就名为jsp,css,js),文件夹中设置子目录,这些子目录最好命名与html文件的子目录命 ...
- [android开发篇]项目目录结构
- Ionic-wechat项目边开发边学(二):目录结构,header标签与路由
之前一直跟Linux驱动打交道,上层应用几乎为零,业余时间也不是很多,所以博客也不会写的非常详细,大家有问题尽管评论哦, 我有空会及时回复! 摘要 上一篇文章主要介绍了ionic的开发环境配置, 以及 ...
- Android项目实现Module目录结构分组
一.背景 项目需求的频繁迭代,新的产品功能在不断添加和延伸,随之带来的是,项目技术复杂度的提升. 近几年来,Android模块化.组件化相关技术得到极速发展,将项目整体进行分层,不同的层次之间依据实际 ...
- 【Unity3D游戏开发】之游戏目录结构之最佳实践和优化 (十一)
游戏目录结构之最佳实践 前置条件 1.多人协作开发,git管理 2.游戏不大,所有Scene合并到一起Scene中,eg.RoleScene.MapScene.StoreScene 3.Master一 ...
- python 全栈开发,Day142(flask标准目录结构, flask使用SQLAlchemy,flask离线脚本,flask多app应用,flask-script,flask-migrate,pipreqs)
昨日内容回顾 1. 简述flask上下文管理 - threading.local - 偏函数 - 栈 2. 原生SQL和ORM有什么优缺点? 开发效率: ORM > 原生SQL 执行效率: 原生 ...
随机推荐
- HDU5037 Frog
Once upon a time, there is a little frog called Matt. One day, he came to a river. The river could b ...
- 汕头市队赛 SRM14 T1 计算几何瞎暴力
计算几何瞎暴力 (easy.pas/c/cpp) 128MB 1s 在平面上,给定起点和终点,有一面墙(看作线段)不能穿过,问从起点走到终点的最短路程. 输入格式 输入一行,包含8个用空格分隔的整数x ...
- gluPerspective(解释得很好)
http://www.cppblog.com/COOOOOOOOL/archive/2009/12/28/104255.html 函数原型gluPerspective(GLdouble fovy,GL ...
- 两步完美解决 androud 模拟器太慢的问题
androud 开发环境默认的 avd 管理器下载并启动的模拟器,运行速度非常慢,有时不可忍受,用下面两步可以解决这个问题: 下载 genymotion-2.3.1 (注意,最好是这个版本,试过2.4 ...
- 用户空间缺页异常pte_handle_fault()分析--(下)--写时复制【转】
转自:http://blog.csdn.net/vanbreaker/article/details/7955713 版权声明:本文为博主原创文章,未经博主允许不得转载. 在pte_handle_fa ...
- CSS控制图片显示区域
优化页面响应速度,减少页面向服务端请求图片次数,有时候可能会将多个小图合并到一张图中,用的时候通过css控制显示的区域,比如:上传一张人物图片到服务器检测人脸,最后在页面上列出所有识别出来的人脸,实现 ...
- poj 1375(解析几何)
Intervals Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 4292 Accepted: 1288 Descrip ...
- vs2015 建立项目报错:值不能为空,参数名:path1的错误解决与“未将对象引用到对象的实例”
“值不能为空,参数名:path1” 的错误.原因就是安卓sdk的路径不正确. 最简单的解决办法如下: 找到C:\Program Files (x86)\Android\android-sdk.进入文件 ...
- [BZOJ4990][Usaco2017 Feb]Why Did the Cow Cross the Road II dp
4990: [Usaco2017 Feb]Why Did the Cow Cross the Road II Time Limit: 10 Sec Memory Limit: 128 MBSubmi ...
- Python的扩展接口[2] -> 动态链接库DLL[0] -> 动态链接库及辅助工具
动态链接库 / Dynamic Link Library 目录 动态链接库简介 函数封装DLL 组件对象模型COM 如何判断.dll文件是COM还是DLL 辅助工具 1 动态链接库简介 / DLL I ...