vue按需引入element-ui

最新推荐文章于 2024-09-17 09:15:00 发布

only you502

最新推荐文章于 2024-09-17 09:15:00 发布

阅读量1.6k

点赞数 1

分类专栏： vue 文章标签： vue.js ui javascript

本文链接：https://blog.csdn.net/qq_55949207/article/details/126138327

版权

vue 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了如何通过npm安装babel-plugin-component和element-ui，然后修改.babelrc文件配置按需引入Element-UI。在main.js中，仅导入了Loading组件，并在组件中按需引入了Button。这样可以减少项目的体积，提高加载速度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.下载包

npm i babel-plugin-component -D
npm i element-ui

2.修改.babelrc文件

//按需引入Element-ui的配置
{
  "presets": [[ "env",{ "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

3.main.js

import {Loading} from 'element-ui';
// import 'element-ui/lib/theme-chalk/index.css';

Vue.use(Loading)

4.组件引用

<template>
    <div>
        <el-button>按钮</el-button>
    </div>
</template>

<script>
import {Button} from 'element-ui'
export default {
    name: 'Home',
    components: {
        [Button.name]: Button,
    },

    data() {
        return {
            
        };
    },

    mounted() {
        
    },

    methods: {
        
    },
};
</script>

<style scoped>

</style>