什么是 vernal
vernal 是一个基于 Vue 3 的 UI 组件库，提供了一系列优美的 UI 组件，支持按需加载。
vernal 库文件
安装 vernal：
npm i vernal -S
在项目中导入 vernal：
import { Button, Input } from 'vernal';
import 'vernal/dist/vernal.css';组件使用
Button 组件：
-- -------------------- ---- -------
----------
------- ----------------------------
------- ----------------------------
------- ---------------------------
------- ----------------------
------- -------------------
------- --------------------- ------------ -----------------
-----------
--------
------ - ------ - ---- ---------
------ ------- -
----------- - ------ -
-
---------Input 组件：
-- -------------------- ---- -------
----------
------ ----------------- --------- --
------ ------------------- -------- --
------ ------------------- -------- --
------ --------------------- --------------------- --
------ ------------------- --------------- --
------ ------------------- --------------- --------- --
-----------
--------
------ - ----- - ---- ---------
------ ------- -
----------- - ----- -
-
---------按需加载
vernal 支持按需加载组件，减小项目的体积。
在项目中使用 babel-plugin-component 插件，只引入需要的组件，如下：
-- -------------------- ---- -------
-- -----------
-------------- - -
-------- -
------------------------------
--
-------- -
-
------------
-
------------ ---------
------ ------
----------- -----
------- ---
-
-
-
--- -------------------- ---- -------
----------
--------- ------------------------------
-------- ----------------- --------- --
-----------
--------
------ - ------- ----- - ---- ---------
------ ------- -
----------- -
----------- -------
---------- -----
-
-
---------总结
本文介绍了如何使用 vernal 组件库，包括按需加载，建议大家在使用 UI 组件时，选择支持按需加载的库，减小项目的体积。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600554e781e8991b448d21ba