npm安装babel-plugin-component 按需加载组件 AND umy-ui

使用ESLint与Babel优化Vue项目：按需引入Ummy-UI

最新推荐文章于 2025-09-13 03:11:24 发布

原创最新推荐文章于 2025-09-13 03:11:24 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ui #npm #vue.js

这篇博客介绍了如何在Vue项目中配置和使用ESLint来提升代码质量，同时详细阐述了如何通过Babel-plugin-component实现Ummy-UI的按需引入，以减小项目体积。首先，安装了ESLint及相关插件，然后在babel.config.js中配置按需引入，最后在main.js中导入umy-ui.js，实现了组件的按需加载，优化了项目性能。



npm install eslint-plugin-node --save
 
npm install eslint-plugin-promise --save
 
npm install eslint-plugin-standard --save
 
npm i eslint-plugin-vue -s
 
npm install eslint --save-dev
 
npm i babel-plugin-component -D



=================
 http://www.umyui.com/

npm install  umy-ui    ||    yarn add umy-ui



创建存放umy-ui的文件    umy-ui.js

//完整引入
import Vue from 'vue';
import UmyUi from 'umy-ui'
import 'umy-ui/lib/theme-chalk/index.css';// 引入样式

Vue.use(UmyUi);

======

最好使用按需引入，借助 babel-plugin-component，以达到减小项目体积的目的。

npm install babel-plugin-component

```======
在babel.config.js中进行设置

module.exports = {
  presets: [
    '@vue/app'
  ],
  plugins: [
    ["component", {
      'libraryName': "umy-ui",
      "styleLibraryName": "theme-chalk"
    }, "umy-ui"]
  ]
}

=====
按需引入

import Vue from 'vue';
import {
  UTableColumn,
  UTable,
  UxGrid,
  UxTableColumn
} from 'umy-ui';

Vue.use(UTableColumn);
Vue.use(UTable);
Vue.use(UxGrid);
Vue.use(UxTableColumn);

===
在main.js中导入一下文件即可

import  './plugin/umy-ui.js';