Vue引入element组件

全部引入 

　　安装：npm i element-ui     

main.js:

//引入element
import ElementUI from 'element-ui';
//引入element全部样式
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

App.vue:

<el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="info">信息按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-date-picker
      v-model="value1"
      type="date"
      placeholder="选择日期">
</el-date-picker>

babel.config.js:

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
    ["es2015", { "modules": false }]
  ],
  plugins: [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

局部引入：

　　安装：npm install babel-plugin-component

main.js:

import { Button, DatePicker } from 'element-ui';
Vue.component('myButton', Button);
Vue.component('myDatePicker', DatePicker);
//App中的日期组件标签名要换成myDatePicker

App.vue:

<myButton type="primary">主要按钮</myButton>
<myButton type="success">成功按钮</myButton>
<myButton type="info">信息按钮</myButton>
<myButton type="warning">警告按钮</myButton>
<myButton type="danger">危险按钮</myButton>
<myDatePicker v-model="value1" type="date" placeholder="选择日期">
</myDatePicker>

babel.config.js:

presets: [
    '@vue/cli-plugin-babel/preset',
    ["@babel/preset-env", { "modules": false }]
  ],
//其余不变