1. Demand Analysis
Rich feature: rich set of components, custom themes, international.
Documentation & demo: provides a friendly documentation and demo, low maintenance costs, support for multiple languages.
Installation introduction: npm support cdn way and manner, and to support the introduction of demand.
Engineering: development, test, build, deploy, continuous integration.
Rich feature
Rich component
The core component library or component, first look at the design principle element-ui components: consistency, feedback, efficient and controllable. Detailed explanation in the official website, I will not put up in the back of element-ui development team, we have a strong design team, which also benefited element-ui founder sofish voice and position in the company, for to such a good resource. So element-ui component appearance, color, interactivity are doing very well.
As a basic component library, there is a very important aspect is the kind of rich components. element-ui official currently assembly 55, divided into six categories, namely, basic components, class components form, data class components, class components tips, class components and other types of navigation components. These rich base component can satisfy the majority of PC end to B business development needs.
Development of so many components, you need a lot of time and effort, so there should be very grateful element-ui team, provides these basic components to us, we make them based on secondary development, saving a lot of time.
element-ui component source code packages directory maintenance, but not in the src directory. To do so is not to be used monorepo, I also did not find lerna package management tool, I guess the purpose of doing so is to allow each of the components can be packaged separately, as needed to support the introduction. But in fact want to achieve this goal is not necessarily so to organize maintenance of the code, I recommend the assembly code component library in src / components directory maintenance, and then modify the configuration script can do webpack each component packaged separately as well as the introduction of on-demand support, source code in src directory is always more reasonable.
Custom Theme
A major feature element-ui is to support custom themes, you can use the online theme editor, you can modify and customize all the global components Element Design Tokens, and you can easily preview the real-time visual style after the change. It also can be based on a new custom style to generate a complete style package for direct download, then how does it do it?
Style element-ui component, common style in packages / theme-chalk files, and it can be distributed independently. element-ui component styles in colors, fonts, line styles, etc. are variable by way of introduction, in packages / theme-chalk / src / common / var.scss we can see the definition of these variables, so to do more topic provides convenient, because I just modify these variables, you can achieve a theme change components.
Understand the basic principles, do online replacement theme is also not difficult, I will not speak in detail to the front-line interactive custom themes section, interested students can see for yourself the source, are examples directory, I just say something here principles of nature.
You want to do online peels, and real-time preview, with the help of server needs, such as maintaining the theme can go through a configuration, users do after a series of operations, will generate a new theme configuration, this configuration tell by the way the interface submitted server, then the server will do return according to this configuration generates a new CSS (specific implementation of the scheme is not open source, generally will do some variable substitution, and then compilation), new CSS styles will override the default style, reaching switching themes the goal of.
Installation & introduction
Indeed element-ui package will generate all the components of a CSS and JS, the government has also provided examples:
-
<!-- 引入样式 --> -
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> -
<!-- 引入组件库 --> -
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
Engineering
Front end higher and higher requirements for engineered, element-ui as a component library, which it has done things in engineering aspects of it?
The first is the development phase, in order to ensure consistency of coding style you used ESLint, even wrote a eslint-config-elemefe as an extension of the rules ESint configuration; in order to facilitate local development and debugging, with the webpack and configured Hot Reload; use We developed the idea of modular components that depend on the number of modules on the public src directory, and based on a functional split directives, locale, mixins, transitions, utils module.
Followed by testing, using a test frame karma, the unit tests for the preparation of each component, and integrated using Travis CI test.
Followed by building aspect, element-ui written a lot npm scripts, dist to this script as an example:
"dist": "npm run clean && npm run build:file && npm run lint && webpack --config build/webpack.conf.js && webpack --config build/webpack.common.js && webpack --config build/webpack.component.js && npm run build:utils && npm run build:umd && npm run build:theme"
It will in turn execute multiple commands inside will eventually generate lib directory and the packaged file. I do not intend to introduce all the commands, interested students can study on their own, and here I would like to introduce build: this script file to do things:
"build:file": "node build/bin/iconInit.js & node build/bin/build-entry.js & node build/bin/i18n.js & node build/bin/version.js",
The benefit here will be followed by the implementation of some Node script in the build / bin directory on the icon, entry, i18n, version, and so do a series of initialization, their contents are doing IO file according to some rules, doing so is completely by means of automated tools to generate documents, and more efficient than artificial fly, this wave of the operation is very worthy of our study and application.
Finally, the deployment is completed by this pub npm script:
"pub": "npm run bootstrap && sh build/git-release.sh && sh build/release.sh && node build/bin/gen-indices.js && sh build/deploy-faas.sh"
Mainly by running a series of bash scripts to achieve the submitted code, merged, version management, npm publish, official website, so that the entire publishing process automation is completed, the specific content of the script interested students can view their own
to sum up
So far, the overall design element-ui component library of introduction, you can see behind these components in addition to the rich, there is still a complete set of solutions, a lot of experience is worth learning and drawing, imperfect places worth to think, many of the technical details can dig.