Modular development of the UC front end ' building blocks '--scrat.js

Modular development

Maintain the Js\css\img\tmpl required by the module together, one module in one directory

• JS Rendering Template
• CSS only cares about in-module styles

Development team voice; "We hope that each new product is not started from scratch, and that reusable modules can be deposited between different teams and projects. ”

Module ecology

Each project has _ Engineering module _ and _ Ecological module _.

Eco Module : Developed based on the _component specification and deployed on GitHub, you can use command-line tools to install modules on GitHub into your project. For example: JQuery, Iscroll, Zepto.js, vue.js

installation command:

Scrat Install Yyx990803/vuescrat intall fontawesome/font-awesome

1. Project start-up statement eco-module dependencies
2. Install the eco-module, command-line installation

Implementing components using Vue+scrat

• Scrat provides module dependencies, references, loads, inline, etc.
• Vue.componentDefining components
• Declarative data and event bindings in templates
• Data-driven, modular design

Direct use of custom tags such as <c-menu> , binding events, etc. in templates

Build projects automatically using Scrat

Scrat can be installed in a continuous integration system to automatically build the project, but also has the ability to build by version.

Personal view

The framework proposed by building blocks to develop the module, and finally the way to build the system is very good, before I developed projects are using Requirejs+sass to JS and CSS Management, folder management is by file type to differentiate, css/js/img so, The way to build blocks is to header/banner/footer this way to create folders, and then each module of Js/css/img/tmpl/json files are placed in the module folder, which really facilitates the decoupling and independence of the module.

But for the time being, this framework of learning materials and tutorials is not grey and needs to be studied.

Resources

PDF Description: Http://url.cn/Oth8xS
Scrat Official website: http://scrat-team.github.io/
GitHub Project Address: Https://github.com/scrat-team/scrat