全局引入

1.用npm安装Element-ui

npm i element-ui -S

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

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

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

<template><div class="hello"><el-button type="success">成功按钮</el-button><el-radio v-model="radio" label="1">备选项</el-radio></div></template>

按需引入

借助 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'; //全局引入elementimport {Button,Radio} from 'element-ui'; //按需引入element-ui的Button和Radioimport 'element-ui/lib/theme-chalk/index.css';//全局引入element的样式import App from './App.vue'Vue.config.productionTip = false// Vue.use(ElementUI); //全局注入elementVue.use(Button); //按需注入ButtonVue.use(Radio); //按需注入Radionew Vue({render: h => h(App),}).$mount('#app')

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

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

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

<template><div class="hello"><el-button type="success">成功按钮</el-button><el-radio v-model="radio" label="1">备选项</el-radio></div></template>