如何使用vue3打造一个物料库


Posted in Vue.js onMay 08, 2021

为什么要做物料库?

我们写过很多登录页面。而每个登录页面除了一些背景图和颜色外,主体布局几乎是一致的,就那么几种类型。如果有个地方能帮我管理登录页面的代码,那么下次我再写登录的时候就可以直接把界面生成好,调逻辑就可以了。

你也许会创建一个login.txt来存放你的登录页,可随着你想保存的代码片段越来越多,你已经很难根据文件的名称来知道这个代码片段具体的展现形式,这就引出了我们要讨论的话题,如何通过构建物料库来管理可重复使用的代码片段。

物料是什么?

物料是可复用的代码片段

说到复用你也许会问,为什么不叫组件呢?因为,物料跟组件有本质的区别,物料只是一串代码,并不存在props,event,slot这些属性。

物料可以由粒度的不同划分为:

  • 组件级物料
  • 区块级物料
  • 页面级物料

物料的类别

以一个按钮为例。例如UI库的按钮圆角是6px,设计师要求的按钮没有圆角。我们可以完成这样一个代码片段:

<!-- 组件级物料 -->
<el-button style="border-radius:0"></el-button>

将这个代码片段保存成一个组件级的物料,要使用没有圆角的按钮时就可以快速地得到这个代码片段。

你也许会疑惑,不就加了个属性吗,为什么还要制作成一个物料,我直接写就好了。这个例子,我希望用最简单的方式告诉你什么是组件级物料,如果只是修改一个圆角你当然不需要保存成一个物料。

一般在开发中后台管理系统时,大部分的列表,表格会随着分页一起出现。我们将一个表格和分页组合起来的代码片段称为区块级物料,例如:

<!-- 区块级物料 -->
<el-table />
<el-pagination  />

同样的,不同项目中如果你的登录,注册页面风格相同,你也可以将一整个页面作为一个页面级的物料,例如:

<!-- 页面级物料 -->
<el-input  placeholder="请输入用户名"></el-input>
<el-input  placeholder="请输入密码"></el-input>
<el-button>登录</el-button>
<a href="#" rel="external nofollow"  >忘记密码?</a>

fuep,基于vue3的物料库

fuep,是一个帮助你管理代码片段的工具,文末有在线体验地址。

如果你使用过飞冰,你就会发现关于物料的概念几乎与飞冰一致,与飞冰不同的是,fuep中的物料载体并不是一个文件,而是可视化布局工具。用可视化布局工具作为物料的载体有一些弊端: 侵入性,它与vue和具体的ui库绑定。 现在,你只能制作基于 element plus 和 vant3 的物料库。但是,如果你是element plus和vant的用户,使用可视化布局来制作物料会带来诸多好处:

  1. 实时的预览,以保证物料的展示效果是满足预期的
  2. 可以很方便地修改布局和细节
  3. 物料之间可以随意搭配
  4. 快速布局

下面我展示其中一个物料,你在可视化布局中这样排列下面这些组件:

如何使用vue3打造一个物料库

生成的代码是这样的;

<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>

通过代码渲染出来的界面是这样的:

如何使用vue3打造一个物料库

你可以在这个物料的基础上,做一些布局或者细节的修改来保存成一个新的,属于你的物料。

如果你不知道如何开始,可以点击左下角的指引或者介绍来了解fuep的工作机制。

fuep在线体验

以上就是如何使用vue3打造一个物料库的详细内容,更多关于vue 打造物料库的资料请关注三水点靠木其它相关文章!

Vue.js 相关文章推荐
在Vue中使用Echarts可视化库的完整步骤记录
Nov 18 Vue.js
vuex的数据渲染与修改浅析
Nov 26 Vue.js
vue中配置scss全局变量的步骤
Dec 28 Vue.js
手写Vue源码之数据劫持示例详解
Jan 04 Vue.js
vue 计算属性和侦听器的使用小结
Jan 25 Vue.js
vue完美实现el-table列宽自适应
May 08 Vue.js
vue实现锚点定位功能
Jun 29 Vue.js
Vue3.0中Ref与Reactive的区别示例详析
Jul 07 Vue.js
vue项目多环境配置(.env)的实现
Jul 21 Vue.js
vue 实现弹窗关闭后刷新效果
Apr 08 Vue.js
vue css 相对路径导入问题级踩坑记录
Jun 05 Vue.js
vue3 自定义图片放大器效果的示例代码
Jul 23 Vue.js
vue完美实现el-table列宽自适应
关于Vue Router的10条高级技巧总结
May 06 #Vue.js
Vue项目中如何封装axios(统一管理http请求)
May 02 #Vue.js
使用vue-element-admin框架从后端动态获取菜单功能的实现
vue使用v-model进行跨组件绑定的基本实现方法
关于vue中如何监听数组变化
vue实现简单数据双向绑定
Apr 28 #Vue.js
You might like
剧场版动画《PSYCHO-PASS 3 FIRST INSPECTOR》3月27日日本上映!
2020/03/06 日漫
PHP的邮件群发系统phplist配置方法详细总结
2016/03/30 PHP
PHP+Ajax+JS实现多图上传
2016/05/07 PHP
PHP7 参数处理机制修改
2021/03/09 PHP
发现的以前不知道的函数
2006/09/19 Javascript
Javascript-Mozilla和IE中的一个函数直接量的问题
2007/01/09 Javascript
说明你的Javascript技术很烂的五个原因
2011/04/26 Javascript
深入分析jquery解析json数据
2014/12/09 Javascript
jQuery实现单击和鼠标感应事件
2015/02/01 Javascript
jquery插件jquery.confirm弹出确认消息
2015/12/22 Javascript
Vue 父子组件、组件间通信
2017/03/08 Javascript
javascript实现日期三级联动下拉框选择菜单
2020/12/03 Javascript
使用Require.js封装原生js轮播图的实现代码
2017/06/15 Javascript
JS switch判断 三目运算 while 及 属性操作代码
2017/09/03 Javascript
JavaScript函数apply()和call()用法与异同分析
2018/08/10 Javascript
详解Vue.js v-for不支持IE9的解决方法
2018/12/29 Javascript
微信小程序实现分享朋友圈的图片功能示例
2019/01/18 Javascript
vue cli3.0 引入eslint 结合vscode使用
2019/05/27 Javascript
微信小程序基于Taro的分享图片功能实践详解
2019/07/12 Javascript
[00:37]2016完美“圣”典风云人物:AMS宣传片
2016/12/06 DOTA
[53:03]Optic vs TNC 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python语言实现机器学习的K-近邻算法
2015/06/11 Python
python用10行代码实现对黄色图片的检测功能
2015/08/10 Python
详解Python如何生成词云的方法
2018/06/01 Python
python远程连接服务器MySQL数据库
2018/07/02 Python
Python分析最近大火的网剧《隐秘的角落》
2020/07/02 Python
Python创建临时文件和文件夹
2020/08/05 Python
python 带时区的日期格式化操作
2020/10/23 Python
一个非常简单好用的Python图形界面库(PysimpleGUI)
2020/12/28 Python
Kusmi茶美国官网:优质散叶茶和茶包
2019/10/13 全球购物
美国在线面料商店:Fashion Fabrics Club
2020/01/31 全球购物
员工培训邀请函
2014/02/02 职场文书
财务工作失职检讨书
2014/11/21 职场文书
Unity连接MySQL并读取表格数据的实现代码
2021/06/20 MySQL
Redis缓存-序列化对象存储乱码问题的解决
2021/06/21 Redis
苹果M1芯片安装nginx 并且部署vue项目步骤详解
2021/11/20 Servers