Vue2使用cli脚手架引入ElementUI教程
更新时间：2025年08月26日 09:15:41 作者：xrkhy
本文介绍使用Vue CLI创建项目并集成ElementUI的方法,涵盖完整引入与按需引入（需安装babel-plugin-component及配置）,同时推荐VSCode插件vscode-element-helper辅助开发
使用cli脚手架创建项目
可以参考我之前的博客Vue打包工具(构建工具)和脚手架
整理目录
ElementUI安装并引入
安装
我们打开ElementUI官网
npm i element-ui -S
引入
完整引入
在 main.js 中写入以下内容：
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
Vue.use(ElementUI);
new Vue({
el: '#app',
render: h => h(App)
});
按需引入
借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。
首先，安装 babel-plugin-component：
npm install babel-plugin-component -D
然后，将 .babelrc或者babel.config.js 修改为：
module.exports = {
// presets: [["es2015", { "modules": false }]], // babel-preset-es2015已被官方废弃多年
presets: [
'@vue/cli-plugin-babel/preset' // 使用 Vue CLI 内置的现代预设
],
plugins: [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}
接下来，如果你只希望引入部分组件，比如 Button 和 Select，那么需要在 main.js 中写入以下内容：
import Vue from 'vue';
import { Button, Select } from 'element-ui';
import App from './App.vue';
Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为
* Vue.use(Button)
* Vue.use(Select)
*/
new Vue({
el: '#app',
render: h => h(App)
});
Vscode 提示插件下载
打开插件市场下载插件有提示vscode-element-helper
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
vue手机端input change时,无法执行的问题及解决
这篇文章主要介绍了vue手机端input change时,无法执行的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
本篇文章主要介绍了如何理解Vue的.sync修饰符的使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
这篇文章主要介绍了vue 中 命名视图的用法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧2019-08-08
详解vue2.0 使用动态组件实现 Tab 标签页切换效果（vue-cli）
本篇文章主要介绍了详解vue2.0 使用动态组件实现 Tab 标签页切换效果（vue-cli），具有一定的参考价值，有需要的可以了解下2017-08-08
这篇文章主要介绍了vue router 源码概览的案例分析，本文通过实例代码案例分析给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2018-10-10
这篇文章主要为大家详细介绍了vue实现记事本功能，记事本可以进行添加删除事件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-06-06
这篇文章主要为大家详细介绍了Vue2.0设置全局样式(less/sass和css)，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
本文介绍了三种使用Vue实现动态数字动画的方案：使用Vue的响应式数据与`setInterval`逐步更新数字,通过Vue的动画API和CSS动画效果为数字增加过渡效果,以及使用更高效的`requestAnimationFrame`来提供更加流畅的动画表现,每种方案都详细说明了原理、实现步骤和代码示例2025-02-02
Vite 是一个面向现代浏览器的更轻,更快的web应用开发工具,下面这篇文章主要给大家介绍了关于如何使用vite搭建vue3项目的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-07-07
这篇文章主要为大家详细介绍了Vue如何结合echarts实现水滴图的绘制，文中的示例代码讲解详细，感兴趣的小伙伴可以跟随小编一起学习一下2023-07-07
最新评论