介绍
在前端开发中，我们经常需要使用各种第三方库来解决问题。npm是前端社区最常用的包管理工具，它支持对前端各种工具和库的安装、管理和发布。
nui-platform-browser是一个非常实用的npm包，它是一个基于浏览器使用的 NUI（Native User Interface）平台。它提供了完整的 NUI 功能，可以轻松实现平台化的前端开发。
安装
在使用这个npm包之前，我们需要先安装它。使用npm命令即可实现：
npm install nui-platform-browser --save
安装完成后，我们就可以开始使用 nui-platform-browser 进行前端开发了。
使用
NUI控件
nui-platform-browser 主要提供了一些常用的NUI组件，包括按钮、复选框、输入框、单选框等。
我们可以通过下列方式引入一个按钮控件：
-- -------------------- ---- -------
--------- -----
----- ----------
------
--------- -----------
------- -----------------------------------------------------------------
-------
------
------- ----------------- ------------------- ------------
-------
-------这个例子中，我们引入了nui-platform-browser的代码，并且在button标签中添加了nui-btn和nui-size属性来指定按钮的样式和大小。
NUI主题
由于 nui-platform-browser 是一个基于浏览器的 NUI 平台，它提供了多种主题，可以让我们方便地自定义界面风格。
示例代码：
-- -------------------- ---- -------
--------- -----
----- ----------
------
--------- -----------
------- -----------------------------------------------------------------
----- ---------------- ----------------------------------------------------------
-------
------
------- ----------------- ------------------- -----------
-------
-------这个例子中，我们引入了nui-platform-browser的CSS文件，这样可以让我们自定义界面风格。同时，我们也可以在CSS文件中修改主题。
/* 自定义主题 */
.nui-btn-primary {
background-color: #f90;
color: #fff;
}NUI布局
nui-platform-browser 还提供了一些常用的布局控件，包括表格、网格、表单等。我们可以使用这些控件来快速搭建我们的界面。
示例代码：
-- -------------------- ---- -------
--------- -----
----- ----------
------
--------- -----------
------- -----------------------------------------------------------------
----- ---------------- ----------------------------------------------------------
-------
------
---- --------
---- ------------
------
-------
----- -----
------ ----------- -------------
--------
-------
---- -----
------ ----------- -------------
--------
------- ----------------- -----------------------------
-------
------
---- ------------
---- -------------- --- ----- ----- -------- -------
------- --------------
------
------
------
-------
-------这个例子中，我们使用 nui-row 和 nui-col 来实现网格式布局。其中， nui-row 和 nui-col 分别表示行和列。nui-col 的值表示列宽的百分比，这里我们设置左侧表单占用8列，右侧内容占用4列。
NUI交互
在前端开发中，与用户的交互是非常重要的。nui-platform-browser 提供了一些常用的交互控件，包括弹窗、下拉框、提示框等。这些控件可以帮助我们快速实现交互效果。
示例代码：
-- -------------------- ---- -------
--------- -----
----- ----------
------
--------- -----------
------- -----------------------------------------------------------------
----- ---------------- ----------------------------------------------------------
-------
------
------- -------------------------- --------------- ------------
-------
-------这个例子中，我们使用 nui.alert() 方法显示一个弹窗。nui-alert() 方法的参数是弹窗的内容。
除了 nui.alert() 方法， nui-confirm() 和 nui-prompt() 方法也常常用到。对于下拉框和提示框等控件，可以参考官方文档。
总结
nui-platform-browser 是一个非常实用的npm包，提供了一系列NUI控件、主题、布局和交互控件。引入它可以方便快捷地实现平台化的前端开发。在使用中需要注意引入CSS文件和控件的调用方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562d581e8991b448e0285