在 Vue 项目中，经常会使用许多第三方 UI 组件库，如 ElementUI、Ant Design、IView 等等。通常我们在项目中使用这些组件库时需要在每个组件的 .vue 文件中都 import 一遍，当我们使用的组件比较多时，这个过程会显得非常繁琐，而且也容易造成代码冗余。
为了解决这个问题，我们可以使用 babel-plugin-import 插件。babel-plugin-import 是一个能够按需加载模块代码，减小项目体积的插件。
安装
首先，我们需要安装这个插件：
npm install babel-plugin-import --save-dev
接下来，我们需要对 babel.config.js 进行配置：
-- -------------------- ---- -------
-------------- - -
-------- -
----------
--
-------- -
---------- -
------------ -------
----------------- -----
------ ----
-- --------
---------- -
------------ -----------------
----------------- -----
------ ----
-- ------------------
---------- -
------------ -------------
----------------- ------
------ ----
-- -------------
-
-其中 libraryName 表示使用的组件库名称，libraryDirectory 表示组件库源代码的位置，style 表示是否需要引入组件样式。
使用
接下来，在组件中使用就好了，比如：
-- -------------------- ---- -------
----------
-----
---------------------------
--------- ---------------------- -----------------
---------------------------
------
-----------
--------
------ ------- -
----- -----
-
---------Vue 会根据上面配置的组件库名称和组件名自动加载相应的组件代码和样式文件，无需手动引入。借助这个插件，我们的代码变得简洁、干净。
总结
使用 babel-plugin-import 插件可以显著减轻前端开发的负担，它可以帮助我们实现按需加载，提高打包效率和页面性能。当我们在项目中需要引入多个第三方组件库时，使用这个插件可以大大简化我们的代码，并且节省我们大量的时间。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e0ae1bf6b2d6eab3be4fdd