什么是 nightshirt
nightshirt 是一个基于 Vue.js 的 UI 组件库，主要用于快速搭建前端界面和交互。它支持按需引入和自定义主题，同时附带了一些常用的工具类和常量，可以大大提升开发效率。
安装和使用
安装
使用 npm 安装：
--- ------- ---------- ------
使用
----------
-----
---------- -----------------------------------
--------- -----------------------------
--- ----------------------
-----------
---- --------------
---------- -------------------- - ---------------------
---------- -----------------------------
------
-----------
------
-----------
--------
------ - ------- ----- - ---- ------------
------ ------- -
----------- -
------------ -------
----------- -----
--
---- -- -
------ -
------------- -----
-
--
-------- -
--------- -- -
----------------- - ----
-
-
-
---------
------ ------------
-- -- ---------- --
------- ----------------------------------
--------按需引入
如果只需要使用部分组件，可以使用 babel-plugin-import 进行按需引入。首先安装 babel-plugin-import：
--- ------- ------------------- --
修改 .babelrc，添加以下内容：
-
---------- -
---------- -
-------------- -------------
------------------- -----
-------------------------- -----
--
-
-然后在代码中按需引入组件：
----------
-----
-------------------------
------
-----------
--------
------ - ------ - ---- ------------
------ ------- -
----------- -
------------ ------
-
-
---------可以发现，只引入了 Button 组件相关的样式和代码。
自定义主题
nightshirt 提供了一些默认主题，可以在 .scss 文件中引入：
-- -- ---------- -- ------- ---------------------------------- -- ------ --------------- -------- -- ------- ------- --------- -- ---- ------- ----------------------------------
也可以覆盖默认样式：
-- ------ --------------- -------- -- ---- ---------------- - ----------------- --------------- - ------------------ - ------ ----- ----------------- --------------- -
工具类和常量
nightshirt 除了 UI 组件外，还提供了一些实用的工具类和常量。
Breakpoints
------ ----- ----------- - - --- - --------- --- -- --- - --------- ---- --------- --- -- --- - --------- ---- --------- --- -- --- - --------- ---- --------- ---- -- --- - --------- ---- - -
Styles
------ - ------ - ---- ------------ ----- ----- - -------------------- ------------------ -- -- --------- -------
包含一些实用的样式处理方法，例如 color, background, border, box-shadow 等。
Mixins
------- ------------------------------- ----- - -------- --------------- -
包含一些实用的 SCSS mixin，例如 ns-flex-center, ns-text-ellipsis, ns-hide-text 等。
总结
nightshirt 是一个非常实用的前端 UI 组件库，可以大大提升开发效率。我们介绍了它的安装和使用方法，包括按需引入和自定义主题，同时也介绍了一些实用的工具类和常量。希望本文能够帮助大家更好地使用和理解 nightshirt。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005520081e8991b448cf855