vite 如何使用 element-ui

vue2 vite 如何使用 element-ui

项目版本如下

{
  "dependencies": {
    "element-ui": "^2.15.13",
    "vue": "^2.7.7"
  },
  "devDependencies": {
    "@vitejs/plugin-legacy": "^2.0.0",
    "@vitejs/plugin-vue2": "^1.1.2",
    "babel-plugin-component": "^1.1.1",
    "terser": "^5.14.2",
    "vite": "^3.0.2"
  }
}

我发现跟着官网配置出错。我就自己写一份总结一下吧。

首先 npm i element-ui -S

一般都是 全局按需引入，每个 vc 引入一遍也挺麻烦的，比如 <button></button> 标签，常用的就没必要了。

按照官网教程

借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。

首先，安装 babel-plugin-component：

npm i babel-plugin-component -D

然后，在项目中创建 .babelrc 文件，将 .babelrc 修改为：

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

老实说我也不太清楚这东西的按需打包生效没，回头检查一下，没生效的话在 vite 中再配置一下

然后全局按需引入

// 在 main.js 中
import Vue from 'vue';
import { Button, Select } from 'element-ui'; // 这一句引入 elementui
import App from './App.vue';

Vue.use(Button) //将组件挂在每个 vc 上
Vue.use(Select) // 同

new Vue({ //对象式写法
  el: '#app',
  render: h => h(App)
});

// 在 App.vue 的 <template></template>标签中
<template>
  <el-button type="success">成功按钮</el-button>
</template>

然后 yarn dev 看是否配置成功，这是全部配置

应该不会成功。会看到目标标签没有style样式。
在 main.js 中加上import 'element-ui/lib/theme-chalk/index.css'; 引入css即可成功。