elementUI相关知识及搭建使用过程

​​​​​​

目录

​​​​​​

一.elementUI相关的知识

1.什么是elementUI

2.如何在创建的项目中使用elementUI的组件(1)安装

​ (2)在项目的main.js中引入elementUI

(3)使用elementui里的组件


一.elementUI相关的知识

1.什么是elementUI

Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组
件库. 官网地址
如图有各种丰富的组件提供给我们使用,使得我们写前端代码时不必每个组件都有我们写,可以在elementUI中拿到我们要写的相关的组件代码改成我们想要的效果即可。

2.如何在创建的项目中使用elementUI的组件

(1)安装

将如下代码在创建的项目终端中

复制代码
npm install element-ui -save

如图执行此代码后出现如下图进度条即可:

(2)在项目的main.js中引入elementUI

在 main.js 中写入以下内容:
import ElementUI from 'element-ui' ;
import 'element-ui/lib/theme-chalk/index.css' ;
Vue.use(ElementUI);
new Vue({
render: h => h(App),
}).$mount('#app');
如下图所示:

(3)使用elementui里的组件

如图在组件中找到想要的然后点击显示代码即可找到

如图将此组件的代码直接拿到自己创建的vue文件中,要使用的留下不用的删除或者修改

结果如图所示:

注意:后面每创建一个项目都要如上述流程执行一遍。

相关推荐
子兮曰18 小时前
async/await高级模式:async迭代器、错误边界与并发控制
前端·javascript·github
恋猫de小郭19 小时前
2026 Flutter VS React Native ,同时在 AI 时代 VS Native 开发,你没见过的版本
android·前端·flutter
GIS之路21 小时前
ArcGIS Pro 中的 Notebooks 入门
前端
IT_陈寒1 天前
React状态管理终极对决:Redux vs Context API谁更胜一筹?
前端·人工智能·后端
Kagol1 天前
TinyVue 支持 Skills 啦!现在你可以让 AI 使用 TinyVue 组件搭建项目
前端·agent·ai编程
柳杉1 天前
从零打造 AI 全球趋势监测大屏
前端·javascript·aigc
simple_lau1 天前
Cursor配置MasterGo MCP:一键读取设计稿生成高还原度前端代码
前端·javascript·vue.js
睡不着先生1 天前
如何设计一个真正可扩展的表单生成器?
前端·javascript·vue.js
天蓝色的鱼鱼1 天前
模块化与组件化:90%的前端开发者都没搞懂的本质区别
前端·架构·代码规范
明君879971 天前
Flutter 如何给图片添加多行文字水印
前端·flutter