什么是 @notadd/foundation？
@notadd/foundation 是一个基于 Vue.js 和 Element UI 的 UI 组件库，适用于 Notadd 框架的前端开发。它提供了丰富的组件和工具，可以帮助开发者快速搭建美观且高效的界面。
如何安装 @notadd/foundation？
我们可以通过 npm install 命令来安装 @notadd/foundation，只需要在终端中运行如下命令：
npm install @notadd/foundation
如何使用 @notadd/foundation？
安装完以后，我们就可以在项目中引入 @notadd/foundation 组件了。比如，我们可以在 App.vue（或其他需要使用组件的组件）中这样引入：
-- -------------------- ---- -------
----------
---- ---------
--------------
-----------
-----------------------
------------
---------
---------------------------
----------
-----------
-----------------------
------------
---------------
------
-----------
--------
------ - --------- -------- - ---- --------------------
------ ------- -
----- ------
----------- -
---------
--------
-
-
---------这里我们使用了组件库中的 NaHeader 和 NaFooter 组件，这两个组件都是基于 Element UI 构建的。
组件列表
@notadd/foundation 中提供了众多常用的组件，以下是其中一部分：
- na-button
- na-divider
- na-icon
- na-scroll
- na-steps
- na-ellipsis
以上仅是部分组件，完整列表请查看官方文档。
代码示例
下面是一个表单验证的示例，我们可以通过引入 @notadd/foundation 中的 Form 和 Validator 来快速实现表单验证：
-- -------------------- ---- -------
----------
-----
-------- ------------- ---------------
------------- ----------- ----------------
--------- ----------------------- --------------------------------
---------------
------------- ---------- ----------------
--------- --------------- ----------------------- -------------------------------
---------------
--------------
---------- -------------- ----------------------------------
---------------
----------
------
-----------
--------
------ - ------- ----------- -------- -------- - ---- ------------
------ - --------- - ---- --------------------
------ ------- -
----------- -
-------
-----------
--------
--------
--
------ -
------ -
----- -
--------- ---
--------- --
--
------ -
--------- -
- --------- ----- -------- --------- -------- ------ -
--
--------- -
- --------- ----- -------- -------- -------- ------ --
- ---- -- ---- --- -------- ----------------- -------- ------ -
-
-
-
--
-------- -
------------ -
------------------------------ -- -
-- ------- -
-- --------------
- ---- -
------------------------------------------
-
--
-
-
-
---------这里我们使用了 ElForm、ElFormItem、ElInput 和 ElButton 组件，这些组件都是基于 Element UI 构建的。同时，我们也引入了 Validator 组件，它提供了用于表单验证的方法和自定义验证规则的功能，相比于 Element UI 自带的表单验证，更加灵活和方便。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056c7581e8991b448e5f36