Quickly build a SPA Framework salutjs--project Catalog II

Source: Internet
Author: User
Tags naming convention script tag

Directory structure

The above diagram is a directory document for Salut, which can be started directly by running node run and node JSON after downloading it from GitHub. The following describes each directory's stored files and functions.

Construction

This directory contains the project files, grunt configuration files, and several Requirejs, where the NPM install can be installed with a dependency module for the project. App.js is a project entry file. Require is the only JS file in HTML that is introduced with a script tag. Gruntfile is a configuration file for grunt. Develop documentation for this project's API documentation. The format is MD and can be viewed with parse files.

Css

This directory contains CSS style files, the app is a business style file, you write each interface style code is stored inside. The PDW is the underlying CSS, and some of the common and underlying CSS code is written in the file, and of course you can rewrite it arbitrarily or rewrite it directly. But I recommend that you override these CSS styles instead of deleting them. Otherwise, there will be difficult-to-predict style errors.

Fonts and img

Store your own fonts and pictures

Js

JS Directory is divided into several layers of directories: Js/base directory to store salut core code, Js/core storage backbone library and its dependent underscore and zepto;js/plugins store a variety of third-party plug-ins, The default is not to load any plug-ins, the loaded plug-in needs to comply with the AMD specification, will explain its loading rules in detail, JS/TPL is stored in all the interface template files, Js/use is the business code of each interface, the interface is displayed when the need to download these files. Config is the default configuration file for the project. There is also a map.html file, which is used when working with map files.

Node

This file is stored in the background output data file of the project, which is useless in actual development, and is designed to view the sample locally.

Run and page_main.html

Run.js also launches the node service file, which runs node run when you run the project. Page_main is the main HTML fragment of the project.

Naming rules

After setting up a few shelves in accordance with the above catalogue structure, we can begin to create a few pages of the interface. Create a JS in the Js/use, named in the Hump form. The corresponding template file is created in the JS/TPL immediately thereafter. The naming convention begins with the TPL and corresponds to the JS end. Note, however, that the first letter after the TPL must be lowercase, with a suffix of. html.

End

The above is the basic directory structure of Salut. He has created it since you downloaded it, and you just need to add business files to Js/use and JS/TP as you need them. Of course, if you can flexibly configure the file to create the corresponding directory, it is also very good to run. GitHub addresses are as follows:

Https://github.com/constantince/Salut

Quickly build a SPA Framework salutjs--project Catalog II

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.