How to use vue3 to build a material library

Why do we need a material library?

We’ve written a lot of landing pages. Except for some background images and colors, the main layout of each login page is almost the same, with only a few types. If there is a place that can help me manage the code of the login page, then next time I write the login, I can directly generate the interface and adjust the logic.

You may create a login.txt to store your login page, but as the number of code snippets you want to save increases, it becomes difficult to know the specific presentation form of the code snippet based on the file name. This brings us to the topic we want to discuss: how to manage reusable code snippets by building a material library.

What is the material?

Materials are reusable code snippets

Speaking of reuse, you may ask, why not call it a component? Because materials are fundamentally different from components. Materials are just a string of code and do not have properties such as props, event, and slot.

Materials can be divided into different types according to their particle size:

• Component Level Materials
• Block level materials
• Page-level materials

Type of material

Take a button as an example. For example, the button radius of the UI library is 6px, but the button required by the designer has no radius. We can complete a code snippet like this:

<!-- Component level materials -->
<el-button style="border-radius:0"></el-button>

Save this code snippet as a component-level material so that you can quickly get this code snippet when you want to use a button without rounded corners.

You may wonder, isn't it just adding an attribute? Why do I have to make it into a material? I can just write it directly. In this example, I hope to use the simplest way to tell you what component-level materials are. If you just modify a fillet, you certainly don’t need to save it as a material.

Generally when developing a backend management system, most lists and tables will appear with paging. We call a code snippet that combines a table and pagination a block-level material, for example:

<!-- Block level materials-->
<el-table />
<el-pagination />

Similarly, if your login and registration pages have the same style in different projects, you can also use the entire page as a page-level material, for example:

<!-- Page level material -->
<el-input placeholder="Please enter your username"></el-input>
<el-input placeholder="Please enter your password"></el-input>
<el-button>Login</el-button>
<a href="#" rel="external nofollow" >Forgot your password?</a>

fuep, a material library based on vue3

fuep is a tool that helps you manage code snippets. You can find an online trial link at the end of this article.

If you have used Feibing, you will find that the concept of materials is almost the same as Feibing. The difference from Feibing is that the material carrier in fuep is not a file, but a visual layout tool. There are some disadvantages of using visual layout tools as carriers of materials: Intrusiveness, it is bound to Vue and specific UI libraries. Currently, you can only create material libraries based on element plus and vant3. However, if you are an Element Plus or Vant user, using visual layout to create materials will bring many benefits:

1. Real-time preview to ensure that the display effect of the material meets expectations
2. The layout and details can be modified easily
3. Materials can be freely matched
4. Quick Layout
   

Below I show one of the materials. You arrange the following components in the visual layout like this:

The generated code is this;

    <el-row type="flex" justify="start" align="middle">
        <el-col :span="12">
            Free up engineer productivity
            Fuep focuses on improving the efficiency of engineers, using visual layout to quickly generate highly maintainable code. Compared with traditional visualization tools, it does not require row and col to be nested in each other.
            <el-row type="flex" justify="start" align="middle">
                <el-button type="primary" class="ml-4 mt-4 px-8">Live Demo</el-button>
                <el-button class="ml-4 mt-4 px-8">Get Started</el-button>
            </el-row>
        </el-col>
        <el-col :span="12">
            <el-image src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" :fit="cover" class="" fit="scale-down"></el-image>
        </el-col>
    </el-row>

The interface rendered by code is as follows:

Based on this material, you can make some changes to the layout or details and save it as a new material that belongs to you.

If you don't know how to start, you can click the guide or introduction in the lower left corner to understand how fuep works.

fuep online experience

The above is the details of how to use vue3 to build a material library. For more information about vue to build a material library, please pay attention to other related articles on 123WORDPRESS.COM!