vue引入Element-ui

全局引入

1.用npm安装Element-ui

npm i element-ui -S

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

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

 = false

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

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

<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下的中引入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/';    //全局引入element的样式
import App from './'

 = false

// (ElementUI);     //全局注入element
(Button);     //按需注入Button
(Radio);     //按需注入Radio

new Vue({
  render: h => h(App),
}).$mount('#app')

3.在中添加plugins插件

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

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

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