Element-ui 的全局引入和按需引入

最新推荐文章于 2025-02-28 05:00:00 发布

xuefine

最新推荐文章于 2025-02-28 05:00:00 发布

阅读量887

点赞数 1

分类专栏：前端学习文章标签： ui vue.js elementui

本文链接：https://blog.youkuaiyun.com/ruixuefine/article/details/122492305

版权

本文介绍了如何在Vue项目中引入Element-ui，包括通过npm安装后，在main.js文件中进行全局和按需引入的详细步骤。全局引入时需在main.js写入特定代码，而按需引入则需要先安装babel-plugin-component，然后修改.babelrc配置，并在main.js中指定所需组件。

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

1.通过npm安装element-ui模块

npm i element-ui -S

2.在代码中引入

完整引入

在main.js中写入以下内容

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';//样式文件一定要引入
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
el: '#app',
render: h => h(App)
});

按需引入

首先，安装 babel-plugin-component:

npm install babel-plugin-component -D

然后，将 .babelrc 修改为：

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",