Vue引入Element-ui组件库

你的名字 2023-09-26 18:04 128阅读 0赞

> 提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

#### 文章目录 ####

*  前言
 *  一、全局引入
 *  二、按需引入

--------------------

## 前言 ##

`提示：这里可以添加本文要记录的大概内容：`

新手使用

--------------------

`提示：以下是本篇文章正文内容，下面案例可供参考`

## 一、全局引入 ##

1.用npm安装Element-ui

npm i element-ui -S

2.在src下的main.js中引入Element-ui

import Vue from 'vue'
    import ElementUI from 'element-ui';             //全局引入element
    import 'element-ui/lib/theme-chalk/index.css';    //全局引入element的样式
    import App from './App.vue'

Vue.config.productionTip = false
    
    Vue.use(ElementUI);     //全局注入element
    new Vue({
        
      render: h => h(App),
    }).$mount('#app')

3.在Helloword.vue中写入你想要的组件

## 二、按需引入 ##

借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。

1.首先，安装 babel-plugin-component：

npm install babel-plugin-component -D  
2.在src下的main.js中引入Element-ui的所需组件

import Vue from 'vue'
    // import ElementUI from 'element-ui';             //全局引入element
    import {
        Button,Radio} from 'element-ui';             //按需引入element-ui的Button和Radio
    import 'element-ui/lib/theme-chalk/index.css';    //全局引入element的样式
    import App from './App.vue'
    
    Vue.config.productionTip = false
    
    // Vue.use(ElementUI);     //全局注入element
    Vue.use(Button);     //按需注入Button
    Vue.use(Radio);     //按需注入Radio
    
    new Vue({
        
      render: h => h(App),
    }).$mount('#app')

3.在bable.config.js中添加plugins插件

"plugins": [
      [
        "component",
        {
        
          "libraryName": "element-ui",
          "styleLibraryName": "theme-chalk"
        }
      ]
    ]

4.在Helloword.vue中写入你想要的组件