背景
在当今快速发展的前端技术领域，我们每天都在学习新的框架、工具和库。其中一个非常实用的工具就是npm包。npm 是世界上最大的软件注册表，是 JavaScript 开发者的共同平台。在大量前端工作中，我们可以使用数千个组件、插件、库来完成我们的工作，从而让我们更加专注于业务逻辑编写。在这篇文章中，我要介绍的就是一个非常优秀的 npm 包——native-ui。
native-ui 是什么？
native-ui 是一个基于 Web Component 的前端 UI 组件库，它的目标是提供原生的交互体验，让你的用户体验更加顺畅自然。原生体验是什么？举个例子，你在自己的手机上下载了一款 App，在使用过程中你会发现这个 App 就好像是手机自带的功能一样自然、流畅。Native UI 希望在 Web 端实现同样的效果，让用户感觉到自然舒适、无障碍的交互体验。
native-ui 的特点
体积小：native-ui 很小，不需要安装海量的库如 jQuery。
跨平台：虽然是基于 Web Component 的组件库，但它可以轻松的复用到 React、Vue、Angular 等项目中。
易于学习：native-ui 的组件文档详尽且易于阅读，代码实现直观易懂。
可定制：native-ui 提供了很多 CSS 变量，可以方便地覆盖默认样式，做到自己想要的样子。
安装并使用 native-ui
安装
在终端或者命令行中输入命令，即可安装 native-ui：
npm install native-ui
引入
在 HTML 文件中声明样式和脚本的引用即可。
样式引用：
<link rel="stylesheet" href="node_modules/native-ui/dist/native-ui.min.css"/>
脚本引用：
<script src="node_modules/native-ui/dist/native-ui.min.js"></script>
开始使用
在我们的 HTML 中，首先要做的就是声明自定义标签，这样浏览器就可以识别这个元素是由 native-ui 提供的自定义组件。
<n-ui-button></n-ui-button>
在 JavaScript 文件中，我们即可使用如下代码：
const btn = document.querySelector('n-ui-button');
btn.textContent = 'Click Me!';国际化支持
在构建国际化的应用程序时，native-ui 优秀的支持能让这个应用更加地强大。
以下是基于 Redux 应用的 i18next 的示例代码：
-- -------------------- ---- -------
------ - --------- -- ------ - ---- -------------------------
------ - --------- - ---- ----------------
------ - ------- - ---- --------------
----- --------------------- - ------------------------------
----- --------------- - ----- -- --
----------- ---------------------------------
--
----- ------------------ - -------- -- --
-------- -- -- ------------------
--
------ ------- ------------------------ ------------------------------------------总结
通过本篇文章，我们了解了一个基于 Web Component 的自定义 UI 库 — native-ui。它的特点是体积小、易于学习、可复用，可以在任何 Web 应用程序中使用。native-ui 还支持跨平台和国际化开发，让我们的应用程序更加强大和灵活。
在未来的前端开发工作中，选择和使用适当的 npm 工具和库不但能提高开发效率，节约开发时间，也能让我们的应用程序体验更加顺畅自然。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005589f81e8991b448d5eac