Why do a material library?
We have written many landing pages. Except for some background images and colors, the main layout of each login page is almost the same, just a few types. If there is a place that can help me manage the code of the login page, then the 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 you want to save more and more code snippets, it is difficult to know the specific presentation form of this code snippet based on the file name, which leads to That's the topic we're going to talk about, how to manage reusable code snippets by building a library of materials.
What is the material?
Materials are reusable pieces of code
When it comes to reuse, you may ask, why not call it a component? Because there is an essential difference between a material and a component, a material is just a string of codes , and there are no properties such as props, event, and slot.
Materials can be divided into:
- component-level material
- block-level material
- page-level material
category of material
Take a button as an example. For example, the rounded corners of the buttons of the UI library are 6px, and the buttons required by the designer have no rounded corners. We can complete a code snippet like this:
<!-- 组件级物料 -->
<el-button style="border-radius:0"></el-button>
复制代码Save this code snippet as a component-level material, and you can get this code snippet quickly when you want to use buttons without rounded corners.
You may be wondering, why don't you just add an attribute, why make it into a material, I'll just write it directly. In this example, I hope to tell you what a component-level material is in the simplest way. If you just modify a rounded corner, you certainly don't need to save it as a material.
Generally, when developing the middle and background management system, most of the lists and tables will appear along with the paging. We call a block-level material a piece of code that combines a table and pagination, for example:
<!-- 区块级物料 -->
<el-table />
<el-pagination />
复制代码Similarly, if your login and registration pages have the same style in different projects, you can also use an entire page as a page-level material, for example:
<!-- 页面级物料 -->
<el-input placeholder="请输入用户名"></el-input>
<el-input placeholder="请输入密码"></el-input>
<el-button>登录</el-button>
<a href="#" >忘记密码?</a>
复制代码fuep, a material library based on vue3
fuep is a tool to help you manage code snippets. There is an online experience address at the end of the article.
如果你使用过飞冰，你就会发现关于物料的概念几乎与飞冰一致，与飞冰不同的是，fuep中的物料载体并不是一个文件，而是可视化布局工具。用可视化布局工具作为物料的载体有一些弊端： 侵入性，它与vue和具体的ui库绑定。 现在，你只能制作基于 element plus 和 vant3 的物料库。但是，如果你是element plus和vant的用户，使用可视化布局来制作物料会带来诸多好处：
- 实时的预览，以保证物料的展示效果是满足预期的
- 可以很方便地修改布局和细节
- 物料之间可以随意搭配
- 快速布局，详见可视化布局的新思路
下面我展示其中一个物料，你在可视化布局中这样排列下面这些组件：
生成的代码是这样的；
<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>
复制代码通过代码渲染出来的界面是这样的：
你可以在这个物料的基础上，做一些布局或者细节的修改来保存成一个新的，属于你的物料。
如果你不知道如何开始，可以点击左下角的指引或者介绍来了解fuep的工作机制。