Nine layers of the platform, from the tired soil: code good components

This article is the third in a series on the use and implementation of code systems.

We will provide a series of articles on code implementation

  • Opening: the correct way to open the code
  • How did Ma Liang design a highly scalable online web production platform
  • The magic brush has been opened. How can I use it

What are we talking about when we talk about components

The last article gave a large number of code editor examples, I believe that the reader has an intuitive understanding of code editor.

Below is the structure of the code editor.

As you can see, the core of the entire editor is the component, and any other configuration or functionality is served by the component.

In a code system, components are the basic elements that make up a page, and each component has a specific function. For example, a picture component can present a picture, and a text component can present a paragraph of text. A page is composed of a series of components arranged in a certain position and style, and then configured. Therefore, the capability of components determines the capability of code, and the richness of components represents the strength of code.

Most of the official components have already appeared in the previous article (hope you were impressed by the robot), such as pictures, text, rich text, rotation, etc., are some of the more basic components. So, in addition to the official components, how to integrate the custom components into the code, see below.

Ma Liang component development

gods-pen

Gods – Pen is a command line tool based on NodeJs that provides a tool that covers the entire process of code component development.

npm install gods-pen-cli -g # install gods-pen
Copy the code

To see the help gods-pen help, there are four subcommands available

Create a component

gods-pen create my-component
Copy the code

Enter the component name and description as prompted, and select a component category

The project file structure is as follows

As you can see, this is a typical VUE project. Yes, the code component itself is the same as a normal VUE component, but we have added some convention fields to make the component recognized and configured by the code editor.

/ SRC /index.vue is the component you just created. The main work of component development is to develop functions for this component.

/ SRC /example.vue provides some simple code examples and instructions.

The files in the preview/ directory are used for development preview. The files in the preview/ directory will not be packaged for final release. You can modify the code as needed, such as testing the props.

Icon. PNG will be published with your component to the component repository as the component icon. You should replace this file with your own component icon.

[readme.md](http://readme.md) is the detailed usage instructions of the component. It supports Markdown and is uploaded to the component repository along with the release of the component. You can view the component instructions in the code editor.

Have you noticed that the last step in creating a component is to select “Do you want to create a property configuration component?” A property configuration component is a custom component that can be used in the editor to configure the properties of the component, rather than the default one provided by the editor. In fact, this folder exists whether you choose to create this component or not. The difference is that when you select “yes”, the WebPack Entry configuration will include the editor/index.vue file. Otherwise, it will not include the editor/index.vue file. When you find that you need a custom properties configuration component and have not selected yes before, just add editor: ‘./editor/index.vue’ under the entry field in webpack.config.js.

Component development

Code good components based on VUE, in the VUE framework after a certain understanding can be easily developed code good components.

In the figure above, with the dependencies installed and the project started, a simple modification of the component shows “Hello World”

Here we develop a simple card component that contains a picture, a line of text, and the picture and text can be configured

So far, it is still a normal vue component that accepts two parameters, img and line. How can the editor recognize the parameters it needs and provide a reasonable input control

As you can see, we added an editor field to both the img parameter and the line parameter, and specified editor.type and editor.label. Type of “image” means that the editor should provide an image selector for this parameter. If “Label” is “Picture”, the parameter should be displayed as “picture” in the editor. For more input types, refer to the document.

Component build and publish

After the development of the component is complete, prepare a beautiful picture to replace icon. PNG as the component icon, write the component readme, confirm whether the package. Json component version number (version field) is the latest, and whether the Chinese name (Label field) of the component is configured.

If the component repository has not been set before, run the setting command first

# set to godspen.ymm56.com official component warehouse gods - pen config registry at https://godspen.ymm56.comCopy the code

Perform releases (including automated builds)

gods-pen publish -t [access-token]
Copy the code

The access-token can be obtained in the background of code management — user Settings.

There you go. Use it

gossip

Routine for experience, routine for star.