NUI 是一款基于 Vue.js 的企业级 UI 组件库，提供丰富的组件和样式，能够满足大部分企业级应用的前端需求。本文将详细介绍如何使用 NUI 包，并给出相关示例代码。
安装 NUI
在开始使用 NUI 之前，需要先安装 NUI 包。可以使用 npm 或 yarn 进行安装。在控制台中执行以下命令即可安装：
npm install @nui/nui
或
yarn add @nui/nui
引入 NUI
在安装 NUI 包后，需要在项目的 Vue 组件中引入 NUI。在需要使用 NUI 的组件中，可以通过以下方式引入：
-- -------------------- ---- -------
------ --- ---- ----------
------ -----------------------
------ ------- -
---
----------- -
-------
--
---
-通过这种方式引入 NUI，可以按需引入所需要的组件，减少冗余代码的量。
组件使用
基本使用
基于 NUI 的组件可以像 Vue 组件一样进行使用，只需要在需要使用组件的页面中声明并使用即可。例如，使用 NUI 中的 Button 组件：
<template> <n-button>点击我！</n-button> </template>
按需加载
在需要引入大量组件的页面中，为了避免因为加载大量组件导致打包文件过大的问题，我们可以使用按需加载的方式。在 Vue.js 2.x 中，可以使用 es6 的动态 import 语法来实现按需加载。具体的实现方式如下：
-- -------------------- ---- -------
------ --- ---- -----
------ ------- --
----- ----
----- -------
---------- -- -- ------------------------------------------------- -- --------------
-- -
----- ---------
------ --------
----------- -- -- ------------------------------------------------- -- -------------
-覆盖样式
NUI 提供的组件都有默认的样式，如果需要更改组件的样式，可以通过覆盖的方式来实现。我们可以通过局部样式或全局样式来实现。举个例子，我们想要覆盖 Button 组件中的文字颜色：
全局样式
全局样式会作用于所有的组件中，通过一个样式文件来实现。我们通过在 main.js 文件中引入 NUI 样式文件，并在样式文件中覆盖 Button 组件中的文字颜色。
-- -------------------- ---- ------- -- ------- ------ --- ---- ----- ------ --- ---- ----------- ------ ----------------------- ------ ------------- --- ----- --- ------- ------- - -- ------ --
/* style.css */
.n-button {
color: red;
}局部样式
局部样式只会作用于当前组件中，并且需要通过 scoped 标记来标记样式是局部样式。我们在组件中通过添加 scoped 属性后，来实现局部覆盖。修改 Button 组件中的文字颜色：
-- -------------------- ---- ------- ---------- --------- --------------------------------- ----------- ------ ------- ---------- - ------ ---- - --------
自定义组件
如果 NUI 提供的组件不能满足我们的需求，我们可以通过自定义组件来实现。以下是一个简单的示例，演示如何自定义一个搜索框组件：
-- -------------------- ---- -------
----------
---- -----------------------
------
-----------
--------------------------
--------------------
----------------------------
--
--------- ---------------------- ------------
------
-----------
--------
------ ------- ---- ---------------------------------
------ ------- -
----- -----------------
------ -
------ -
------ ---
-
--
------ -
------------ -
----- -------
-------- ---
--
--
-------- -
-------------- -
---------- - --------------
--
------------- -
-------------------- -----------
--
------------- -
-------------------- -----------
--
--
----------- -
--------
--
-
---------
------ -------
--------------- -
-------- -----
------------ -------
---------------- ---------
---- -----
-
--------使用自定义组件：
-- -------------------- ---- -------
----------
--------------- --------------------- ---------------------- --
-----------
--------
------ ------------ ---- --------------------
------ ------- -
----------- -
----------------- -------------
--
-------- -
------------------- -
-------------------- ------
--
--
-
---------结语
本文详细介绍了如何使用 NUI 包，并提供了示例代码，希望对大家有所帮助。在使用 NUI 组件库时，我们应该以用户体验为出发点，丰富组件库的表现力，创造更加灵活、强大、易用的组件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f923d1de16d83a66b42