element-ui安装与使用

官网地址

npm 安装

安装element-ui

npm i element-ui -S

完整引入

main.js

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

按需引入

1. main.js

这里因为使用了el-button和el-row，所以按需引入Button和Row两资源

import { Row, Button } from 'element-ui';
Vue.use(Button); Vue.use(Row);

2. 安装按需所需依赖

npm install babel-plugin-component -D

3. babelrc.config.js配置

这里官网文档给的是：es2015，但实际上element-ui找不到es2015，所以需更名为@babel/preset-env，解决报错问题

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

演示

App.vue

<template>
  <div id="app">
    <el-row>
      <el-button>默认按钮</el-button>
      <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-button type="danger">危险按钮</el-button>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "App",
  components: {},
};
</script>

<style>
</style>

</script>

效果

按需引入和完整引入区别

在npm run build打包上线时
完整引入方式：打包后体积大，可能存在很多未使用到的资源，浏览器模式下影响项目加载速度，但很方便
按需引入方式：体积小，但配置麻烦，需要用到某个资源时就要在入口文件main.js配置一次