在前端开发中，我们经常需要使用 UI 框架来构建用户界面。在 Vue.js 项目中，office-ui-fabric-vue 就是一个非常流行的 UI 组件库，它提供了很多常用组件的实现并符合 Microsoft 的设计风格，非常适合开发企业级应用。
在本文中，我们将介绍如何使用 npm 包 office-ui-fabric-vue 来构建 Vue.js 项目中的用户界面。
安装 office-ui-fabric-vue
首先，我们需要在项目中安装 office-ui-fabric-vue。我们可以使用 npm 包管理器来完成这个任务：
npm install office-ui-fabric-vue --save
导入和使用组件
安装完毕后，我们就可以在 Vue.js 项目中使用组件了。Office-UI-Fabric-Vue 组件库提供了很多常见组件，比如按钮、输入框、面包屑等等。我们将列举其中几个组件的使用方法。
按钮组件
按钮组件能够让用户与应用交互。Office-UI-Fabric-Vue 提供了多种按钮样式，比如默认按钮、主按钮、警告按钮等等。下面是一个示例代码：
-- -------------------- ---- -------
----------
-----
-----------------------------------
-------------- ---------------------------
-------------- -------------------------
-------------- ----------------------------------------
------
-----------
--------
------ - ------------ - ---- -----------------------
------ ------- -
----------- -
-------------
--
--
---------注意，上面的示例代码中，我们使用了组件库的 OfficeButton 组件，并设置了 primary 和 warn 属性以显示不同的样式。我们还使用了 icon 属性将一个图标放在按钮上。
还有一些其他的属性可以设置，比如 disabled 属性能够禁用按钮，split 属性能够让按钮变成一个下拉菜单等等。详情请查看文档。
文本输入框组件
文本输入框组件能够让用户输入文本。Office-UI-Fabric-Vue 提供了多种样式的输入框，比如文本框、密码框、多行文本框等等。下面是一个示例代码：
-- -------------------- ---- -------
----------
-----
------------------ ----------- -------------- --
------------------ ----------- --------------- ------------------ --
------------------ ------------- --------- ------------------ --
------
-----------
--------
------ - --------------- - ---- -----------------------
------ ------- -
----------- -
----------------
--
------ -
------ -
----- ---
--------- ---
--------- ---
--
--
--
---------上面的示例代码中，我们使用了组件库的 OfficeTextField 组件，并设置了 label 属性以显示标签文字。我们还使用了 v-model 指令将输入的文本绑定到了组件的属性上。
还有一些其他的属性可以设置，比如 disabled 属性能够禁用输入框，placeholder 属性能够设置默认提示文字等等。详情请查看文档。
面包屑组件
面包屑组件能够显示当前页面的路径。Office-UI-Fabric-Vue 提供了面包屑组件。下面是一个示例代码：
-- -------------------- ---- -------
----------
-----
------------------ -------------- --
------
-----------
--------
------ - ---------------- - ---- -----------------------
------ ------- -
----------- -
-----------------
--
------ -
------ -
------ -
- ----- ----- ----- --- --
- ----- ----- ----- --- --
- ----- ------------- ----- --- --
- ----- -------- -------------- ---- --
--
--
--
--
---------上面的示例代码中，我们使用了组件库的 OfficeBreadcrumb 组件，并设置了 items 属性以显示面包屑的路径。我们使用了 text 属性来设置面包屑的文字，使用 href 属性来设置链接地址，使用 isCurrentItem 属性来告诉组件这是当前所在的页面。
还有一些其他的属性可以设置，比如 maxDisplayedItems 属性能够控制显示的最大面包屑长度，onItemClicked 属性能够设置点击面包屑时的回调函数等等。详情请查看文档。
总结
通过本文的介绍，我们了解到了如何使用 npm 包 office-ui-fabric-vue 构建 Vue.js 项目中的用户界面。我们学习了该组件库的三个常用组件的使用方法，并了解了它们各自的属性和用途。希望本文对正在寻找 Vue.js UI 组件库的你们有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066fae3d1de16d83a67265