preface

After I resigned from my old employer, I was idle and thought of the requirement of a background management system. At that time, I needed a component of picture preview, but the Element – UI used in the project did not have this component, so I started to write this component.

The preparatory work

Fork the Element-UI library to your Git repository and clone it locally.

Take a look at the main project directory structure of Element-UI.

+ - build engineering scaffold configuration file directory | + -- examples engineering document, also is the element - UI website | + -- after executing the lib pack file | + -- packages each component's directory, Is also the focus of the next development | + -- SRC element - UI engineering of various public files, file | + -- contains the entrytestTest case file directory | + -- types typescript declaration file directoryCopy the code

Of course, you need to know their team’s development specifications before you start developing, so look at the Element-UI contribution guide first.

With that in mind, you’re ready to start coding.

Development steps

Prepare the environment

To convert NPM to YARN, run the following command.

npm i yarn -g
Copy the code

Install the project dependency file using YARN.

yarn
Copy the code

Generated directory

At this point, the preparation is almost complete. Take a look at the component development specification above, which mentions one point.

Create the component directory structure by making new

As far as I know, this make name is not provided by NPM package. The main function of this tool is to provide convenience for c++ developers. It is difficult to install on Windows platform, so we will directly look at the makefile file.

We can skip the make installation and directly use the corresponding command, node command is as follows:

node build/bin/new.js $(filter-out $@,$(MAKECMDGOALS))
Copy the code

Let’s take a look at what this new.js implementation does.

The first parameter is the English name of the component, and the second parameter is the Chinese name of the component. To create the file we need, use the following command.

node build/bin/new.js test-component 'Test Component'
Copy the code

See what happens

The following files are automatically created, which is the code you need to complete. Since you are writing components, you need to be able to preview and debug at the same time, so in this case you need to do the following steps: First look at package.json to see which script commands are provided.

Run the project

According to the analysis command, in the development environment, you need to run the dev command. After the project runs, open the browser and enter http://127.0.0.1:8085 to preview the project.

npm run dev
Copy the code

Write the code

In the auto-created md file, open the Element /examples/docs/ zh-cn /test-component.md file and edit it. You can see the changes on the page. Here’s an example of a component I wrote earlier.

The content is divided into three parts

  1. Executable script file, the part at the top of the image that is wrapped with a script script
  2. The demo file, the part in the middle of the image wrapped with HTML, where the template wrapped code will eventually be rendered to the page, and the script part is just the text sample and will not be executed, but the script script at the top of the image
  3. Parameter description, located at the bottom of the image

Of course, you can also write style code to change the way components appear on the page after rendering

Open element/ Packages /test-component/ SRC /main.vue. This is the file where the business logic resides. The point of this article is not to teach you how to code, but to understand the development process of Element-UI. So I won’t go into the details of the code here, but the entire code I developed can be viewed here, including the JS code, CSS code, test cases, and typescript declarations.

The test case

In my opinion, the purpose of unit testing is to test the business logic you are currently developing, so as to find errors in time and reduce maintenance costs in the future. Element-ui uses the Mocha testing framework and the CHAI assertion library. Since the project is already built, it is very cheap for developers to learn how to use the CHAI assertion library. For the chai assertion library, see here. You can figure out what functions you need to test by looking at the test cases of other elements of Element-UI.

Typescript declaration files

Because typescript is not very good, so after a short study ts, an idea that the role of ts declaration file, for is not a library written in ts, provides a repository of open API type declaration, the main do with libraries should be to the editor can understand open API, providing a smart tips, if there is any wrong, Please also point out.

So what you need to do is to write a type declaration that takes the parameters that are passed in dynamically from the component you write and the open API, roughly as shown below

As you can see, each function makes a type declaration for the parameter passed in and the type returned.

PR code

Git rebase = git rebase = git rebase = git rebase = git rebase = git rebase = git rebase Then submit the pull request, and then get the official reply. Here, I should like the official ELM. There will be a reply every time, which is very efficient.

Get rejected brutally, so before you decide to develop element-UI components, think about what element-UI has that you don’t currently have, but need.

conclusion

Although this preparation component has not been officially adopted, but through the preparation of this component, learned a lot of knowledge, so SAO years, let go do it

update

A vUE component development Webpack configuration modeled after element’S UI can be built on this basis to encapsulate their own needs

Github.com/Richard-Cho…