介绍
pure-vue是一个基于Vue.js的UI组件库，提供了很多高质量的UI组件。本文就是一个帮助初学者快速学习和使用pure-vue的教程。
安装
pure-vue是一个npm包，可以使用npm或yarn进行安装。
npm install pure-vue --save
或者
yarn add pure-vue
使用
安装完毕后，在Vue组件中引入所需的组件。例如，如果需要使用pure-vue提供的Button组件，可以按照下面这样的方式引入：
-- -------------------- ---- -------
----------
-----
------------- -----------
------
-----------
--------
------ - ------ - ---- -----------
------ ------- -
----------- -
------
-
-
---------配置好组件后，就可以在页面中使用了。
组件列表
pure-vue提供了很多的UI组件，以下是常用的一些：
Button
提供了多种样式的按钮，支持设置大小、禁用状态等。
<Button>Default</Button> <Button type="primary">Primary</Button> <Button type="success">Success</Button> <Button type="warning">Warning</Button> <Button type="danger">Danger</Button> <Button type="info">Info</Button> <Button disabled>Disabled</Button> <Button icon="star">With icon</Button>
Input
文本输入框，支持数字、邮箱、密码等验证。
<Input type="text" placeholder="请输入"/> <Input type="number" placeholder="请输入数字"/> <Input type="password" placeholder="请输入密码"/> <Input type="email" placeholder="请输入邮箱地址"/>
Checkbox
单选和多选框，支持反选和禁用状态。
<Checkbox v-model="checked">Checkbox</Checkbox> <Checkbox v-model="checked" true-value="Yes" false-value="No">Checkbox with value</Checkbox> <Checkbox v-model="checked" disabled>Disabled</Checkbox>
Radio
单选框，支持禁用状态。
<Radio v-model="checked" value="1">Option 1</Radio> <Radio v-model="checked" value="2">Option 2</Radio> <Radio v-model="checked" value="3" disabled>Disabled</Radio>
Select
下拉菜单，支持搜索、多选、禁用等操作。
<Select v-model="selected" placeholder="请选择">
<Option v-for="(item, index) in options" :key="index" :value="item.value">{{ item.label }}</Option>
</Select>以上仅是pure-vue提供的一些基础组件，还有很多其他组件，可以查看文档来进一步了解。
深度和学习以及指导意义
pure-vue提供了很多的高质量UI组件，可以快速地构建出漂亮、易用的网站。虽然它的使用方法和其他UI库类似，但对于初学者来说，还是需要多看文档，多练习，才能熟练掌握。
另外，pure-vue的作者Sergey Brukh也是一个值得学习的人，他在Github上分享了很多高质量的项目，可以去看看学习一下。除此之外，我们还应该积极参与开源社区，为开源做出自己的贡献，这也是提高技术水平的一种有效途径。
示例代码
最后附上一个使用pure-vue的示例代码，供大家参考：
-- -------------------- ---- -------
----------
-----
------ -------------------- -------------------
------- -------------- -------------------------- -----------
----
--- ------------- ------ -- ----- --------------- ---- -------
-----
------
-----------
--------
------ - ------- ----- - ---- -----------
------ ------- -
----------- -
-------
-----
--
------ -
------ -
----------- ---
----- --
-
--
-------- -
------------- -
-- ------------------------- -------
--------------------------------
--------------- - ---
-
-
-
---------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d1f81e8991b448daca2