This is the sixth day of my participation in the First Challenge 2022. For details: First Challenge 2022.

Written in the beginning

First of all, if you from the beginning in the first article series a one order to see this article, so small make up congratulations to you, thank you, too, because you’ve finished the ten thousand – word article, of course, also once again thank you for your love of small make up an article, hope this series of articles, for you will have a little help that I am satisfied. O O (studying studying)

Secondly, I have finished five articles in front. This is the sixth article, and this article is a summary, mainly summarizing all the knowledge points learned in the first five articles, and also rationalizing the ideas of the article. I hope it can be of further help to you.

Finally, we reveal the topics of the next three articles: Loading components on demand, building online preview documents, and taking you from scratch to implement a high-quality component-Select.

Well, let’s start with the next part of this article.

The first paper

ElementUI source code series 1 — Building a project from scratch, preparing a project, packaging a project, and testing a project process

  • Build the basic directory structure for your project.
  • usewebpackPackage the project:
    • To introducewebpackPack it. We need to download itwebpack 和 webpack-cliTwo packages.
    • To deal with.vueFiles, againvue-loader 和 vue-template-compilerTwo packages.
  • There are two ways to test a project:
    • Test the project as a local NPM package: the main process is to modify the project firstpackage.jsonOf the filemainConfiguration item to locate the entry file generated after packaging; Then performnpm packPack to generatetgzThe package; Finally, download it in the new projectNPM install Full path for storing TGZ packages locallyCan simulate uploadnpmThe actual scene.
    • HTML file quick test. Vue file: this is actually more suitable for writing component styles, it mainly useshttp-vue-loaderThis package is done. We need to put the components.vuefileexport defaulttomodule.exports = {}Form, and then in.htmlTo introduce use, the main need is to run.htmlThe file must be running on the server.

The second article

Using gulp to convert SCSS to CSS and complete and compress, using CP-CLI to move directories and files, we have learned the following points:

  • useCSSIn the preprocessorscssLanguage to write component styles.
  • Learn to usegulpTo deal withscssStyle tocss, the following packages are mainly used:
    • Gulp: An automated build tool, and the familiarwebpackIt’s similar, but it’s a little bit purer. It’s based onNodeThe ability of streams to build task flows, in some ways has a performance advantage, and we’ll take it to work.scssFile.
    • Gulp-autoprefixer: gulp-autoprefixer is used for auto-completionCSSPrefix plugin.
    • Gulp-cssmin: Used for compressionCSS.
    • Gulp – sass: compilingscss, toCSS.

The third article

ElementUI is one of the most important elements in ElementUI, and it is one of the most important elements in ElementUI. It is one of the most important elements in ElementUI.

  • Learn the contents of the build/bin/gen-cssfile.js file in the element-ui source code, because when we create a new component, we go through three steps:

    • Step 1 – Create the component directory structure
    • Step 2 – Create the component style file
    • Step 3 – General entry file import component

    The second step is to create a component.scss file and introduce a component style file when creating a new component style file. In order to deal with the future project may have a large number of components, we use Node to automate these two processes.

  • Learn fs.writefilesync (‘ file path ‘, ‘file content ‘,’ file encoding/error callback ‘); The use of this API.

  • Json file for the component configuration file.

Article 4

In this article, we will learn how to automatically create component directory structure and generate components. Json file.

  • learningelement-uiUnder the sourcebuild/bin/new.jsThe content of the file, learning it because each component directory structure is similar, in order to facilitate us to create a new component directory, avoid manual creation, we also carried out automatic creation of the component directory operation. It automates the first of the three steps mentioned above to create a component.
  • Learn to useprocessThe module.argvProperty gets command line arguments.
  • The file-save module makes it easier to create and write files.
  • Use the UpperCamelCase module to convert dashes/dots/underscores/Spaces delimited strings to hump form.
  • Learn to automatically generate component configuration filescomponents.jsonThe content of the.
  • useJSON.stringify(value[, replacer [, space]])The third parameter formatting.jsonFile format format.

Article 5

ElementUI source code series 5 – Learning about build-entry.js automatic generation of the main entry file index.

  • learningelement-uiUnder the sourcebuild/bin/build-entry.jsThe content of the file is learned because the creation of a new component goes through three steps, and the first and second steps were automated in the first two files, so the third step is certainly not missing.
  • The most important thing to learn in this chapter is the JSON-Templater module, which is a string template generator that allows you to quickly and easily generate good string templates.
  • Of course, there are other small things, such as the compatibility of newlines, the string module for deriving a file, and so on.




At this point, this article is finished, sa Hua Sa hua.

I hope this article has been helpful to you. If you have any questions, I am looking forward to your comments. Same old, likes + comments = you know it, favorites = you know it.