简介
weui-sketch 是一个基于 weui 样式库的 Sketch 工具包。该工具包提供了一系列 UI 设计元素以及相关的符号库，方便用户在 Sketch 中快速地创建基于 weui 样式的 UI 设计。本文将详细介绍 weui-sketch 的使用方法。
安装
weui-sketch 是一个 npm 包，可以通过 npm 在项目中安装。在终端中运行以下命令安装 weui-sketch：
npm install weui-sketch
安装完成后，可以在项目的 node_modules 目录中找到 weui-sketch 的相关文件。
引用
在 Sketch 中使用 weui-sketch 需要先引用相关的 Sketch 文件。在下载的 weui-sketch 文件夹中，有一个 weui.sketch 文件，即为我们需要引用的文件。
打开 Sketch，点击菜单栏中的 Sketch -> Preferences... -> Libraries。在 Libraries 中点击 Add Library...，选择刚下载的 weui.sketch 文件，即可将 weui-sketch 引入到 Sketch 中。
使用
引入 weui-sketch 后，我们可以开始使用其中的 UI 元素来设计我们的 UI 界面。在 Sketch 的左侧工具栏中，选择 Insert -> Symbol，即可找到 weui-sketch 中提供的所有 UI 元素和符号库。
例如，我们要使用 weui 中的按钮元素来设计 UI 界面。首先在 Sketch 中创建一个新的画板，然后在左侧工具栏中选择 Insert -> Symbol -> WeUI -> Button，即可快速地添加一个 weui 样式的按钮元素。
除了 UI 元素之外，weui-sketch 还提供了一些常用的符号库。例如，在项目中需要经常使用到的 logo 元素。此时，可以在左侧工具栏中选择 Insert -> Symbol -> WeUI Symbol，即可找到 weui-sketch 提供的符号库。其中包括了 weui 中常用的一些图标，以及 weui 官方 logo 等元素。
示例代码
<div class="weui-btn-area"> <a class="weui-btn weui-btn_primary" href="javascript:" id="showTooltips">确定</a> </div>
上面代码中，我们使用了 weui-sketch 中提供的按钮元素，并将其样式名设置为了 weui-btn weui-btn_primary。这样设置之后，该按钮就具有了 weui 中的基本按钮样式，并且显示为蓝色。当我们需要对按钮的样式进行更加详细的设置时，可以在 CSS 文件中选择更加详细的样式名进行设置。
总结
weui-sketch 是一个非常实用的 Sketch 工具包，它提供了丰富的 UI 元素和符号库，方便用户在 Sketch 中进行基于 weui 样式的 UI 设计。本文对 weui-sketch 进行了详细的介绍和使用方法的说明，希望能够帮助到大家在日常的 UI 设计中更加方便地运用 weui 样式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671088dd3466f61ffdef3