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即可成功。