当前位置:首页 » 《随便一记》 » 正文

VSCode前端Vue项目引入Element-ui组件,三步简单操作即可

24 人参与  2024年03月07日 13:01  分类 : 《随便一记》  评论

点击全文阅读


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 = falseVue.use(ElementUI);new Vue({  render: h => h(App),}).$mount('#app')
3.测试效果

引入后测试Element-ui组件是否生效,在vue项目App.vue文件里加入Element组件按钮
在这里插入图片描述
保存后页面显示按钮,说明已生效,引入Element-ui组件成功:
在这里插入图片描述


点击全文阅读


本文链接:http://zhangshiyu.com/post/75276.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

关于我们 | 我要投稿 | 免责申明

Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1