关于Element,Vant, Ant-Design按需引入及坑

最新推荐文章于 2025-09-11 23:24:48 发布

原创

最新推荐文章于 2025-09-11 23:24:48 发布 · 1.3k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #elementui #anti-design-vue

本文详细介绍了如何在Vue项目中按需引入ElementUI、Vant和Ant-design-vue库，包括安装方法、babel配置和按需引入的实现步骤，以及遇到的问题和解决方案，如babel插件的选择和less配置。

一.按需引入Element

1.安装Element

npm i element-ui -S

2.按需引入
按需引入借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。
element-ui官网 https://element.eleme.cn/#/zh-CN/component/quickstart

在这里插入图片描述

先安装 babel-plugin-component：

npm install babel-plugin-component -D

然后把 .babelrc改为

注意找不到.babelrc文件可以找babel.config.js文件，初始文件是这样
在这里插入图片描述
按照文档修改

module.exports = {
   
   
  presets: [
	  "@vue/cli-plugin-babel/preset",
	  ["es2015", {
   
    "modules": false }]
  ],
  "plugins": [
      [
        "component",
        {
   
   
          "libraryName": "element-ui",
          "styleLibraryName": "theme-chalk"
        }
      ]
   ]
};

新建一个element.js文件，我创建在components文件夹下

import Vue from "vue";
import {
   
    Button } from 'element-ui';
const list = [
	Button
]
//循环注册组件
list.forEach(ele => {
   
    
  Vue.use(ele)
})

然后在main.js中引入

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

Vue.config.productionTip = false<

最低0.47元/天解锁文章

关于Element,Vant, Ant-Design按需引入及坑

目录

一.按需引入Element