Why do we need to do material warehouse?

We’ve written a lot of landing pages. The main layout of each login page is almost the same, except for some background images and colors. There are only a few types. If there is a place to manage the code for my login page, then the next time I write the login page, I can just generate the interface and tune the logic.

You may create a login. TXT to store your login page, but with code snippets you want to save more and more, is hard to you according to the name of the file to know this snippet concrete representations, this leads us to the topic of discussion, how to build the material library to manage the reusable code fragments.

What is the material?

Materials are reusable code fragments

Speaking of reuse you might ask, why not components? A material is essentially different from a component. A material is just a string of code without any properties like props, Event, or slot.

Materials can be divided by different particle size into:

  • Component grade material
  • Block level material
  • Page level material

Type of material

Take a button, for example. For example, the UI library button has a rounded Angle of 6px, and the designer required the button to have no rounded corners. We can complete a code snippet like this:

<! <el-button style="border-radius:0"></el-button>Copy the code

Save the code snippet as a component-level material that can be quickly retrieved when using buttons without rounded corners.

You may wonder why it is necessary to make a material by adding an attribute. I will write it directly. In this example, I want to show you in the simplest way what component level materials are. If you just modify a rounded corner, you certainly don’t need to save as a material.

When developing a background management system, most of the lists and tables will appear along with the pagination. A snippet of code that combines tables and pages is called a block-level material, for example:

<! --> <el-table /> <el-pagination />Copy the code

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

<! -- page-level materials --> < EL-input placeholder=" please input username "></ EL-input > <a href="#" > </a>Copy the code

Fuep, material library based on VUE3

Fuep, a tool to help you manage snippets of code, has an online address at the end of the article.

If you have ever used Flying Ice, you will have noticed that the concept of materials is almost the same as flying ice. Unlike flying ice, the material carrier in FUEP is not a file, but a visual layout tool. Using visual layout tools as a carrier for materials has some drawbacks: it is intrusive and tied to vUE and concrete UI libraries. Right now, you can only build material libraries based on Element Plus and VANT3. However, if you’re an Element Plus or Vant user, using visual layouts to create materials has a number of benefits:

  1. Real-time preview to ensure that the display effect of materials is to meet the expected
  2. You can easily change the layout and details
  3. Materials can be randomly matched
  4. Quick layout, see new ideas for visual layout

Here I show one of the materials, and you arrange the following components in a visual layout:

The generated code looks like this;

    <el-row type="flex" justify="start" align="middle">
        <el-col :span="12">
            <h3 class="mb-4 px-4 text-cool-gray-800 text-4xl">Free up engineer productivity</h3>
            <p class="px-4 text-base text-gray-500 text-justify">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.</p>
            <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>
Copy the code

The code renders the interface like this:

You can modify the layout or details of this material to save it as a new, yours material.

If you don’t know how to get started, click on the guide or introduction in the lower left corner to learn how FUEP works.

Fuep online experience