初识 vue（15）—— element-ui 的引入与使用

ゞ浴缸里的玫瑰 2022-11-08 14:08 72阅读 0赞

**一、安装**

> npm i element-ui -S

**二、完整引入**

**1、在 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)
    });

**2、使用：**

点击组件，找到你所需要的，然后点击显示代码，复制代码粘贴到页面即可  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70]

**3、例如：**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 1]

**三、按需引入**

**1、先安装 babel-plugin-component**

> npm install babel-plugin-component -D

**2、将 .babelrc 修改为**

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

**3、在 main.js 中引入所需组件**

import {  Button } from 'element-ui';
    
    Vue.use(Button)

**4、使用方法同完整引入**  
![在这里插入图片描述][20210313173602962.png]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70]: /images/20221023/713d013b8ac048a39da71763a32b2655.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 1]: /images/20221023/429ecb2d484b4f49963cde328241b960.png
[20210313173602962.png]: /images/20221023/54d80efcefc741f786a9f9c594966886.png