¿Por qué hacer una biblioteca de materiales?
Hemos escrito muchas páginas de destino. Excepto por algunas imágenes y colores de fondo, el diseño principal de cada página de inicio de sesión es casi el mismo, solo unos pocos tipos. Si hay un lugar que pueda ayudarme a administrar el código de la página de inicio de sesión, la próxima vez que escriba el inicio de sesión, puedo generar directamente la interfaz y ajustar la lógica.
Puede crear un login.txt para almacenar su página de inicio de sesión, pero como desea guardar más y más fragmentos de código, es difícil saber la forma de presentación específica de este fragmento de código en función del nombre del archivo, lo que lleva a Ese es el tema vamos a hablar sobre cómo administrar fragmentos de código reutilizables mediante la creación de una biblioteca de materiales.
¿Cuál es el material?
Los materiales son piezas de código reutilizables.
Cuando se trata de reutilizar, puede preguntarse, ¿por qué no llamarlo componente? Debido a que existe una diferencia esencial entre un material y un componente, un material es solo una cadena de códigos y no hay propiedades como accesorios, eventos y espacios.
Los materiales se pueden dividir en:
- material a nivel de componente
- material a nivel de bloque
- material a nivel de página
categoría de material
Tome un botón como ejemplo. Por ejemplo, las esquinas redondeadas de los botones de la biblioteca de la interfaz de usuario son de 6 píxeles y los botones requeridos por el diseñador no tienen esquinas redondeadas. Podemos completar un fragmento de código como este:
<!-- 组件级物料 -->
<el-button style="border-radius:0"></el-button>
复制代码Guarde este fragmento de código como un material de nivel de componente y podrá obtener este fragmento de código rápidamente cuando quiera usar botones sin esquinas redondeadas.
Quizás se pregunte, ¿por qué no agrega un atributo? ¿Por qué lo convierte en un material? Lo escribiré directamente. En este ejemplo, espero decirle qué es un material a nivel de componente de la manera más simple.Si solo modifica una esquina redondeada, ciertamente no necesita guardarlo como material.
Por lo general, al desarrollar el sistema de administración de nivel medio y de segundo plano, la mayoría de las listas y tablas aparecerán junto con la paginación. Llamamos material a nivel de bloque a una pieza de código que combina una tabla y paginación, por ejemplo:
<!-- 区块级物料 -->
<el-table />
<el-pagination />
复制代码De manera similar, si sus páginas de inicio de sesión y registro tienen el mismo estilo en diferentes proyectos, también puede usar una página completa como material a nivel de página, por ejemplo:
<!-- 页面级物料 -->
<el-input placeholder="请输入用户名"></el-input>
<el-input placeholder="请输入密码"></el-input>
<el-button>登录</el-button>
<a href="#" >忘记密码?</a>
复制代码fuep, una biblioteca de materiales basada en vue3
fuep es una herramienta para ayudarlo a administrar fragmentos de código. Hay una dirección de experiencia en línea al final del artículo.
如果你使用过飞冰，你就会发现关于物料的概念几乎与飞冰一致，与飞冰不同的是，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的工作机制。