在前端开发中，界面设计和样式的重要性不言而喻。为了减少重复的工作、提高开发效率，npm 包成为前端工程化的必不可少的工具。at-ui-style 是一个非常优秀的前端 UI 库，本文将介绍 at-ui-style 的详细使用教程。
介绍
at-ui-style 是一款以 Vue.js 作为基础框架的 UI 库。它基于饿了么前端团队的 Element UI 开发而来，但是它的样式更加美观，使用起来更加方便。at-ui-style 并不只是一个简单的 UI 组件库，它也提供了多种工具函数、主题颜色定制等功能。使用 at-ui-style 可以极大地提高我们的开发效率，同时也会让我们的项目更加美观。
安装
可以通过 npm 安装 at-ui-style 包：
$ npm install at-ui-style --save
at-ui-style 是可以直接引用样式文件的，但是为了方便我们在各个组件之间使用，我们需要在 Vue 项目的 main.js 文件中引入该样式：
import 'at-ui-style.css'; import 'at-ui-style/lib/fonts/iconfont.css';
注意，iconfont.css 是必须引入的，如果不引入会导致部分组件无法正常显示。同时，at-ui-style 的样式文件也支持 sass/less，可以根据项目需求进行引入。
组件
at-ui-style 包含了众多实用的 UI 组件，这里只介绍一些常用的组件。更多组件可以查看官方文档。
Button
Button 是 at-ui-style 中最基础的组件之一，通过它可以快速创建一个按钮。使用方式也非常简单，只需要在 Vue 组件中引用即可：
-- -------------------- ---- -------
----------
--------------------------
-----------
--------
------ - -------- - ---- --------------
------ ------- -
----------- -
---------
--
-
---------Icon
at-ui-style 提供了很多常用的图标，可以增强界面的美观性。同样，它也是一个非常基础的组件，使用方法如下：
-- -------------------- ---- -------
----------
-------- -------------------------------
-----------
--------
------ - ------ - ---- --------------
------ ------- -
----------- -
-------
--
-
---------总之，在组件的文档中，我们可以查看到它提供的各种 props、事件等详细信息，如此简单易用的组件，相信每个前端开发者都能掌握。
工具函数
at-ui-style 提供了一些非常实用的工具函数，可以让我们的开发更加方便。这里介绍一些常用的函数：
debounce
debounce 函数可以使一个函数在短时间内多次触发时只执行一次。常见的场景是，我们需要监听用户输入，并在用户停止输入一段时间后才开始搜索，这时就可以使用 debounce 函数。
import { debounce } from 'at-ui-style';
// 在 300ms 内多次调用该函数，只会执行一次
debounce(() => {
console.log("I'm debounce.");
}, 300)();throttle
throttle 函数可以在连续触发的事件中，每隔一段时间取执行一次。举个例子：不断滑动页面时，我们需要动态更新页面的某些状态，这时就可以使用 throttle 函数。
import { throttle } from 'at-ui-style';
// 每 100ms 执行一次该函数
throttle(() => {
console.log("I'm throttle.");
}, 100)();deepClone
在项目中，我们很可能会需要对引用类型进行复制，此时就需要使用 deepClone 函数。这个函数可以深度复制一个对象，并返回一个新的对象。
import { deepClone } from 'at-ui-style';
const originalObj = { b: { c: 4 }, d: [{ e: 5 }] };
const newObj = deepClone(originalObj);isArray
isArray 函数可以判断一个传入的参数是否为数组。
import { isArray } from 'at-ui-style';
console.log(isArray([1, 2, 3])) // true主题定制
at-ui-style 还提供了主题定制的功能，我们可以根据项目需求，修改UI库已经定义好的主题颜色，使得我们的项目与众不同。
使用 at-ui-style 的主题定制功能，我们只需要在项目中手动安装 less 包以及 less-loader 包，并在 webpack 的配置文件中添加 less-loader：
$ npm install less less-loader --save-dev
-- -------------------- ---- -------
-- --------
-------------- - -
------- -
------ -
-
----- ----------
---- -
-------------------
-------------
-------------- -- -------- ---------- --
--
--
--
--
--然后就可以在项目中定义自己的主题颜色了：
@import "~at-ui-style/lib/theme-chalk/base.less"; @primary-color: #409EFF; // button 组件 @button-color: @primary-color;
常见问题
Q: 在使用 at-ui-style 时，按钮组件无法正常显示怎么办？
A: 确认是否正确引入了 iconfont.css 文件。同时，使用样式文件时，记得导入对应的样式文件（.css, .sass, .less）。
Q: 在使用 at-ui-style 的过程中，遇到样式冲突该怎么处理？
A: 可以使用 scoped 属性将样式限制在组件内部。同时，也可以使用 less 变量覆盖对应的样式。
结语
at-ui-style 是一个非常优秀的前端 UI 库，它简化了前端UI组件的开发，提高了开发效率。同时，它的常用工具函数以及主题定制功能也非常实用，方便了我们的开发工作。作为一名前端开发者，掌握了 at-ui-style，才能够更好地进行开发工作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600573ee81e8991b448e9cf6