ElementUI搭建使用过程

1.ElementUI概述

Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库,相当于是css的框架

2.安装ElementUI

第一步:创建一个vue-cil项目

!!!(上篇文章已详细讲述搭建过程)

vue-cli搭建过程-CSDN博客

第二步:npm 安装

推荐使用 npm 的方式安装,它能更好地和 webpack打包工具配合使用

命令:npm i element-ui -S

第三步:导入ElementUI

在src目录下面找到main.js文件,导入ElementUI

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

第四步:测试是否成功

在ElementUI官方网址随便复制一个样式组件,粘贴到我们自己的组件上去

在控制台启动项目命令:npm run serve ,启动成功后,会出现访问项目地址,点开这样就是成功啦!!

相关推荐
3A Cloud13 小时前
Huashu Design:把 AI Agent 变成一间以 HTML 为画布的设计工作室
前端·人工智能·html
你别说话了13 小时前
Webpack 如何迁移重构到 Vite
前端·webpack·重构
catastrophe_zy13 小时前
如何用 WebCodecs 在浏览器里实现高清录屏 —— 无插件、无水印、直接导出 MP4
前端·javascript·录屏
芳心粽伙饭13 小时前
HTML第七章 表格标签
前端·html
我就是DaLing呀!13 小时前
vue3 + 独立的数据管理 Store实现视频剪辑功能
前端·typescript·vue3·canvas·store
吃杠碰小鸡13 小时前
Wps常用功能介绍
前端·wps
恋猫de小郭13 小时前
聊个比较有意思的 Flutter Web 问题
android·前端·flutter
IT_陈寒13 小时前
Redis持久化配置漏了这一步,线上数据丢了5小时
前端·人工智能·后端
梦曦i13 小时前
create-uni-app v1.2.0:交互体验优化
前端·uni-app
Moment13 小时前
太好了!NestJS 12 大版本转向 ESM,新项目默认构建换 Rspack
前端·javascript·后端