Vue - element-ui

---

一、使用element-ui

1. 安装

npm i element-ui

2. 引入Element

在main.js引入

import Vue from 'vue'
import App from './App.vue'
// 引入ElementUI组件库
import ElementUI from 'element-ui';
// 引入ElementUI全部样式
import 'element-ui/lib/theme-chalk/index.css';

Vue.config.productionTip = false
Vue.use(ElementUI)

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

然后就可以在组件里面使用elementUI提供的样式了
例如

<template>
  <div id="app">
    <button>我是普通按钮</button>
    // elementUI提供的button
    <el-button type="primary">主要按钮</el-button>
  </div>
</template>

二、按需引入

借助 babel-plugin-component，我们可以只引入需要的组件

1. 安装babel-plugin-component

npm install babel-plugin-component -D

2. 将babel.config.js修改为

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

3. 按需引入

import Vue from 'vue'
import App from './App.vue'
import { Button, Select } from 'element-ui';

Vue.config.productionTip = false

Vue.component(Button.name, Button);
Vue.component(Select.name, Select);

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

4. 启动时遇到的错误

Error: Cannot find module 'babel-preset-es2015'

解决 : npm install babel-preset-es2015 -D

然后又报了一个错误

解决 : 修改babel.config.js 为