前置知识要求
- 对于 Vue 的组件基础有一定了解
- 掌握 npm 基本使用方法
vushi 简介
vushi 是一款基于 Vue 的 UI 组件库，提供了丰富的 UI 组件和实用的工具函数。该组件库支持按需加载，只引入需要的组件。
vushi 源码托管在 GitHub 上，地址为：https://github.com/foxzhong/vushi
安装
使用 npm 进行安装：
npm install vushi --save
使用方式
引入需要的组件即可使用，例如在 main.js 中引入按钮组件：
import Vue from "vue";
import { VButton } from "vushi";
Vue.use(VButton);在组件中使用 VButton：
-- -------------------- ---- ------- ---------- ----------------------- ----------- -------- ------ ------- - ----- ------------- -- ---------
按需加载
在 vushi 中，使用按需加载可以大大减小打包后的文件大小，提高加载速度，可以使用 babel-plugin-import 插件来实现组件的按需加载。
在项目中安装该插件：
npm install babel-plugin-import --save-dev
修改 babel 配置文件，添加插件：
-- -------------------- ---- -------
-- --------
-
---------- -
-
---------
-
-------------- --------
------------------- ----------------
-
-
-
-然后在需要使用组件的地方引入即可：
import { VButton } from "vushi";
Vue.use(VButton);vushi 组件列表
- VAlert
- VButton
- VIcon
- VInput
- VLoading
- VMessageBox
- VModal
- VPagination
- VSelect
结束语
vushi 提供了很多实用的组件，可以大大提高前端开发效率，同时也兼顾了组件库的轻量级。希望本篇文章对您能有所帮助，谢谢！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005725681e8991b448e86c0