介绍
@any-ui/core 是一款基于 Vue.js 开发的 UI 组件库，提供了一些常用的 UI 组件，同时支持按需导入，减小项目打包体积。
安装
首先，需要使用 npm 安装 @any-ui/core。打开终端并在项目目录下输入以下命令：
npm install @any-ui/core
使用
全局注册
在 main.js 中使用以下代码全局注册组件：
import Vue from 'vue' import AnyUI from '@any-ui/core' Vue.use(AnyUI)
之后就可以在 Vue 单文件组件中使用 @any-ui/core 的组件了。例如：
-- -------------------- ---- -------
----------
-----
----------------- ----------------
------
-----------
--------
------ ------- -
----- -------------
-
---------按需导入
如果你并不需要全部 @any-ui/core 的组件，你可以使用 babel-plugin-import 来只按需引入需要的组件，从而减小项目的打包体积。
首先，需要安装 babel-plugin-import：
npm install babel-plugin-import --save-dev
然后在 babel.config.js 中加入以下配置：
-- -------------------- ---- -------
-------------- - -
-------- -
-
---------
-
------------ ---------------
----------------- ----------- -- ---------- ---
------------------------ ----- -- -------------
-
-
-
-之后就可以在需要使用的组件文件中像这样引入组件：
import { AnyButton } from '@any-ui/core'示例代码
以下是使用 @any-ui/core 的一个示例代码：
-- -------------------- ---- -------
----------
-----
---------- ------------------- ------------------ - ---------------------------------
----------- ---------------------- ------------------
------ -------- -- ----- ------
------
-----------
--------
------ - --------- --------- - ---- --------------
------ ------- -
----- --------------
----------- -
---------
---------
--
------ -
------ -
----------- ---
------ --
-
--
-------- -
----------- -
---------- - ---------------
-
-
-
---------总结
本文介绍了如何使用 @any-ui/core 的组件，并提供了示例代码以方便学习和使用。在实际开发中，建议根据项目实际需求来判断使用全局注册还是按需导入的方式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/143524