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组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章:
相关文章
这篇文章主要为大家详细介绍了Vue.JS入门教程之列表渲染,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
Vue3.2是一款非常流行的JavaScript框架,它让在前端领域开发变得更加的便捷,下面这篇文章主要给大家介绍了关于VUE3.2项目使用Echarts5.4的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-06-06
这篇文章主要为大家介绍了vue阻止重复请求实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
本文主要介绍了vue中el-cascader三级联动懒加载回显问题解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-06-06
这篇文章主要介绍了浅谈Vue.js中如何实现自定义下拉菜单指令，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-01-01
这篇文章主要介绍了vue.js数据加载完成前显示原代码{{代码}}问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-07-07
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。这篇文章主要介绍了vuex与组件联合使用的方法,需要的朋友可以参考下2018-05-05
从0搭建Vue3组件库如何使用 glup 打包组件库并实现按需加载
这篇文章主要介绍了从0搭建Vue3组件库如何使用 glup 打包组件库并实现按需加载，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-03-03
Vue 使用高德地图添加点标记 + 点击地图获取坐标 + 带搜索(即地
这篇文章主要介绍了Vue 使用高德地图添加点标记 + 点击地图获取坐标 + 带搜索(即地理编码 + 逆地理编码) 附完整示例,本文结合示例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧2024-01-01
这篇文章主要介绍了vue-cli axios请求方式及跨域处理问题,文中还给大家提到了vue中axios解决跨域问题和拦截器使用，非常不错，具有参考借鉴价值，需要的朋友参考下吧2018-03-03
最新评论