什么是 nightshirt
nightshirt 是一个基于 Vue.js 的 UI 组件库，主要用于快速搭建前端界面和交互。它支持按需引入和自定义主题，同时附带了一些常用的工具类和常量，可以大大提升开发效率。
安装和使用
安装
使用 npm 安装：
npm install nightshirt --save
使用
-- -------------------- ---- -------
----------
-----
---------- -----------------------------------
--------- -----------------------------
--- ----------------------
-----------
---- --------------
---------- -------------------- - ---------------------
---------- -----------------------------
------
-----------
------
-----------
--------
------ - ------- ----- - ---- ------------
------ ------- -
----------- -
------------ -------
----------- -----
--
---- -- -
------ -
------------- -----
-
--
-------- -
--------- -- -
----------------- - ----
-
-
-
---------
------ ------------
-- -- ---------- --
------- ----------------------------------
--------按需引入
如果只需要使用部分组件，可以使用 babel-plugin-import 进行按需引入。首先安装 babel-plugin-import：
npm install babel-plugin-import -D
修改 .babelrc，添加以下内容：
-- -------------------- ---- -------
-
---------- -
---------- -
-------------- -------------
------------------- -----
-------------------------- -----
--
-
-然后在代码中按需引入组件：
-- -------------------- ---- -------
----------
-----
-------------------------
------
-----------
--------
------ - ------ - ---- ------------
------ ------- -
----------- -
------------ ------
-
-
---------可以发现，只引入了 Button 组件相关的样式和代码。
自定义主题
nightshirt 提供了一些默认主题，可以在 .scss 文件中引入：
-- -------------------- ---- ------- -- -- ---------- -- ------- ---------------------------------- -- ------ --------------- -------- -- ------- ------- --------- -- ---- ------- ----------------------------------
也可以覆盖默认样式：
-- -------------------- ---- ------- -- ------ --------------- -------- -- ---- ---------------- - ----------------- --------------- - ------------------ - ------ ----- ----------------- --------------- -
工具类和常量
nightshirt 除了 UI 组件外，还提供了一些实用的工具类和常量。
Breakpoints
export const Breakpoints = {
xs: { maxWidth: 575 },
sm: { minWidth: 576, maxWidth: 767 },
md: { minWidth: 768, maxWidth: 991 },
lg: { minWidth: 992, maxWidth: 1199 },
xl: { minWidth: 1200 }
}Styles
import { Styles } from 'nightshirt'
const color = Styles.color('#666')
console.log(color) // => {'color': '#666'}包含一些实用的样式处理方法，例如 color, background, border, box-shadow 等。
Mixins
@import '~nightshirt/dist/mixins.scss';
.test {
@include ns-flex-center;
}包含一些实用的 SCSS mixin，例如 ns-flex-center, ns-text-ellipsis, ns-hide-text 等。
总结
nightshirt 是一个非常实用的前端 UI 组件库，可以大大提升开发效率。我们介绍了它的安装和使用方法，包括按需引入和自定义主题，同时也介绍了一些实用的工具类和常量。希望本文能够帮助大家更好地使用和理解 nightshirt。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005520081e8991b448cf855