VSCode前端Vue项目引入Element-ui组件三步简单操作方法
更新时间：2024年07月20日 14:01:08 作者：Lucky1311
elementui相当于一个库,封装好的内容,我们引入到vue项目中,就可用库中的内容,这篇文章主要给大家介绍了关于VSCode前端Vue项目引入Element-ui组件的三步简单操作方法,需要的朋友可以参考下
1.安装命令
推荐使用npm安装，没有下载node.js的可以前往官网下载，node.js自带npm，如果已经有下载安装过node.js的，在VSCode终端输入以下命令，回车即可安装：
npm i element-ui -S
在package.json文件上有添加"element-ui"，就表示已经安装成功，如果安装失败，需要查看安装的vue脚手架vue/cli版本是否与Element-ui版本冲突了。
2.全局引入
安装Element-ui后，需要引入才可以使用，这里完整引入，在main.js文件里加入红色框里的代码：
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.config.productionTip = false
Vue.use(ElementUI);
new Vue({
render: h => h(App),
}).$mount('#app')
3.测试效果
引入后测试Element-ui组件是否生效，在vue项目App.vue文件里加入Element组件按钮
保存后页面显示按钮，说明已生效，引入Element-ui组件成功：
总结
到此这篇关于VSCode前端Vue项目引入Element-ui组件的文章就介绍到这了,更多相关VSCode Vue引入Element-ui组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章:
相关文章
vue3+vite:src使用require动态导入图片报错的最新解决方法
这篇文章主要介绍了vue3+vite:src使用require动态导入图片报错和解决方法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-04-04
这篇文章主要介绍了vue框架实现将侧边栏完全隐藏，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要介绍了vue-cli4.0如何配置CDN加速问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】
这篇文章主要介绍了vue自定义键盘信息、监听数据变化的方法,结合实例形式分析了vue.js基于vm.$watch进行事件监听相关操作技巧,需要的朋友可以参考下2019-03-03
组件是有name属性的,匹配的就是组件的name,下面这篇文章主要给大家介绍了关于vue中组件的name属性含义和用法的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-12-12
vue提供了mixin、extends配置项,最近使用中发现很好用,下面这篇文章主要给大家介绍了关于Vue中Mixin&extends的详细使用方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-02-02
这篇文章主要介绍了vue watch内部调用methods方法报错的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
今天小编就为大家分享一篇Vue退出登录时清空缓存的实现，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
这篇文章主要为大家详细介绍了vue实现下拉菜单效果，运用了hover显示与隐藏以及定位，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-09-09
这篇文章主要介绍了vue $attrs的使用全面解析，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
最新评论