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