目录结构

上面这张图是salut的目录文档,从github上将其下载后直接运行node run和 node json 可以直接启动项目。下面逐个介绍每个目录的存放的文件和作用。

construction

该目录下存放着工程文件,grunt配置文件以及几本requireJS,在此处运行npm install 可以安装工程的依赖模块。app.js 是项目入口文件。require是html中唯一用script标签引入的js文件。Gruntfile是grunt的配置文件。开发文档该项目的api说明文档。格式是md的,可以用解析文件查看。

css

该目录下存放着css样式文件,app是业务的样式文件,你写的每个界面的样式代码都存放在里面。pdw是基础的css,一些公共和基础底层的css代码写在该文件中,当然你可以任意地改写或者直接重写它。但我建议你覆盖这些css样式而不是删除。否则会出现难以预估到的样式错误。

fonts和img

存放的你自己的字体和图片

js

js目录下又分了好几层目录:js/base目录下存放Salut的核心代码;js/core存放backbone库以及它依赖的underscore和zepto;js/plugins存放着各种第三方插件,改工程默认是不加载任何插件的,被加载的插件需要符合amd规范,之后会详细解释它的加载规则;js/tpl中储存的是所有界面的模板文件;js/use下是每个界面的业务代码,界面展示的时候是根据需要下载这些文件的。Config是该项目的默认配置文件。还有一个map.html文件,该文件在处理地图文件的时候用到。

node

该文件下存放是项目的后台输出数据文件,实际开发中没用处,旨在为了本地查看示例。

run和page_main.html

run.js也是启动node服务文件,演示例的时候运行node run即可将项目跑起来。page_main则是项目的主体html片段。

命名规则

在按照以上目录结构搭建好了几本架子之后我们可以开始创建一个几本的界面。在js/use中创建一个js,以驼峰形式命名。紧接着在js/tpl中创建对应的模板文件。命名规则是以tpl开头,对应js结尾。但请注意,tpl后的第一个字母必须小写,后缀为.html。

结束

以上便是salut的基本目录结构。从你下载那时起他就已经创建好了,你只需要按照自己的需求在js/use和js/tp中添加业务文件即可。当然,如果你能够灵活地配置文件创建对应的目录,它也是可以很好的运行的。github地址如下:

https://github.com/constantince/Salut

快速构建SPA框架SalutJS--项目工程目录 二的更多相关文章

  1. 快速构建SPA框架SalutJS--项目工程目录 一

    起因 刚进公司那会儿,接的是一个微信APP应用,SPA是前人搭起来的,用到的技术主要是backbone和zepto.后来那人走了,就卤煮一个人把项目接了下来.项目越是到后面,越发觉了诸多弊端,不停的增 ...

  2. 快速构建SPA框架SalutJS--项目工程目录 三

    配置文件 在开始我们的第一个界面之前,我们需要把初始的html和config文件配置好.html非常简单,只需要一个div作为最外部的容器包裹着所有界面即可: <!DOCTYPE html> ...

  3. 使用 Spring Boot 快速构建 Spring 框架应用--转

    原文地址:https://www.ibm.com/developerworks/cn/java/j-lo-spring-boot/ Spring 框架对于很多 Java 开发人员来说都不陌生.自从 2 ...

  4. 使用 Spring Boot 快速构建 Spring 框架应用,PropertyPlaceholderConfigurer

    Spring 框架对于很多 Java 开发人员来说都不陌生.自从 2002 年发布以来,Spring 框架已经成为企业应用开发领域非常流行的基础框架.有大量的企业应用基于 Spring 框架来开发.S ...

  5. 使用 Spring Boot 快速构建 Spring 框架应用

    Spring 框架对于很多 Java 开发人员来说都不陌生.自从 2002 年发布以来,Spring 框架已经成为企业应用开发领域非常流行的基础框架.有大量的企业应用基于 Spring 框架来开发.S ...

  6. Myeclipse项目工程目录中各种Libraries的含义

    MyEclipse工程目录下一般会有以下几类Libraries,如图: 各种Libraries的含义如下: JRE System Library:Java SE 的常用库文件集合,构建任何Java项目 ...

  7. Maven项目工程目录

    maven工程目录规范: src/main/java   存放项目的.java文件 src/main/resources   存放项目的资源文件,如spring.hibernate配置文件 src/t ...

  8. maven项目工程目录约定

    使用maven创建的工程我们称它为maven工程,maven工程具有一定的目录规范,如下: src/main/java —— 存放项目的.java文件 src/main/resources —— 存放 ...

  9. 快速构建hibernate框架

    手动配置Hibernate框架的配置,极易出现问题,在Eclipse的web项目中,我们可以快速配置,方便快捷 一.导入Hibernate框架所需要的jar文件 二. 窗口—Perspective—打 ...

随机推荐

  1. sql server 高可用性技术总结

    一.  复制Replication(快照.事务.合并) 应用场景: 负载均衡.提供副本读,写操作. 分区将历史数据复制到其它表中. 授权,将数据提供它人使用. 数据合并. 故障转移. 优点: 实现简单 ...

  2. Kali Linux安装中文输入法全纪录

    前言: 我使用的是英文版的Kali,默认没有安装中文输入法,也没有安装小企鹅(我后来才知道),折腾了很久,现在终于可以在Kali里输入中文了(这篇文章就是在Kali里面用leafpad写的).安装的过 ...

  3. jQuery学习之旅 Item6 好用的each()

    1.javascript 函数的调用方式 首先来研究一下jquery的each()方法的源码,在这之前,先要回顾一下javascript函数具体调用样式: 普通函数调用 setName(); 可以作为 ...

  4. javascript知识详解之8张思维导图

    学习的道路就是要不断的总结归纳,好记性不如烂笔头,so,下面将po出8张javascript相关的思维导图. 思维导图小tips:思维导图又叫心智图,是表达发射性思维的有效的图形思维工具 ,它简单却又 ...

  5. 使用wordpress搭建自己的独立博客

    最近想要搭建自己的私人博客, 各种百度,完整的搭建步骤如下! 首先得要有自己的vps或者云主机,我这里是自己的云主机,有自己的域名(我这边目前没有买域名)! 搭建步骤! 1,安装lnmp(linux+ ...

  6. .Net core Web API导出数据到Excel

    前言 产品经理有一个需求,就是将cosmosDB里的数据,导出到Excel中. 1.新建一个.net core web api controller 添加引用:EPPlus.Core Install- ...

  7. mysql千万级大数据SQL查询优化

    1.对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引. 2.应尽量避免在 where 子句中对字段进行 null 值判断,否则将导致引擎放弃使用索 ...

  8. centos7 安装qt

    /出现can't find lGL,安装下面的库: yum install libGL yum install libGL-devel ​

  9. Quartz定时调度在Web中的应用

    1.在数据库中建一个job表和job日志表 job表

  10. 车牌定位与畸变校正(python3.7,opencv4.0)

    一.前言及思路简析 目前车牌识别系统在各小区门口随处可见,识别效果貌似都还可以.查阅资料后,发现整个过程又可以细化为车牌定位.畸变校正.车牌分割和内容识别四部分.本篇随笔主要介绍车牌定位及畸变校正两部 ...