简介
gulu-wang 是一个基于Vue.js的UI组件库，提供了常用的UI组件，可以使得前端页面开发更加高效和方便。使用npm包管理工具可以更方便地安装和使用这个组件库。
安装
通过npm安装gulu-wang非常简单，打开终端（Windows用户需要使用CMD或PowerShell），在要使用的项目目录下执行以下命令：
npm install gulu-wang --save
命令执行完毕后，gulu-wang组件库已经被安装到本地项目中。现在可以使用gulu-wang中的组件了。
使用
全局引入
全局引入gulu-wang非常简单，只需要在项目的入口文件（例如：main.js）中添加以下代码即可：
import 'gulu-wang/dist/gulu-wang.css' import Gulu from 'gulu-wang' import Vue from 'vue' Vue.use(Gulu)
这段代码的作用是引入gulu-wang的CSS文件、创建Gulu对象并输出，最后通过Vue.use()方法将Gulu对象注册为全局组件，这样就可以在任何Vue实例中使用gulu-wang提供的组件了。
按需引入
如果不想全局引入gulu-wang，也可以按需引入。例如：只需要使用Button组件，可以这样写：
import 'gulu-wang/dist/gulu-wang.css'
import { Button } from 'gulu-wang'
export default {
components: {
'g-button': Button
}
}这样就只引入了Button组件，可以按照这个方式引入其他需要的组件。
组件使用
不同的组件有不同的使用方式，以下是一个使用Button组件的示例：
-- -------------------- ---- -------
----------
-----
--------------- --------------
------
-----------
--------
------ - ------ - ---- -----------
------ ------- -
----- --------------
----------- -
----------- ------
-
-
---------这个示例中展示了在组件中使用Button组件，只需要在template标签中添加一个g-button标签即可使用Button组件。当然在script标签中需要先引入Button对象，再注册为局部组件。
总结
通过此篇文章，我们了解了如何使用npm包gulu-wang，安装和使用方法都十分的简单并且方便，可以大大提高前端页面开发的效率。希望本文对你的前端开发工作有指导和帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067359890c4f7277583e5f