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 ,启动成功后,会出现访问项目地址,点开这样就是成功啦!!

相关推荐
2501_94452642几秒前
Flutter for OpenHarmony 万能游戏库App实战 - 设置功能实现
android·javascript·flutter·游戏·harmonyos
愚公移码18 分钟前
蓝凌EKP产品:关联机制浅析
java·服务器·前端
汉堡go1 小时前
python_chapter6
前端·数据库·python
wusp19941 小时前
v-model 和 :value 的深度解析
前端·javascript·vue.js
2501_944424121 小时前
Flutter for OpenHarmony游戏集合App实战之记忆翻牌表情图案
开发语言·javascript·flutter·游戏·harmonyos
Code知行合壹1 小时前
Vue项目中SVG图标
前端·vue.js
SJLoveIT1 小时前
【安全研发】CSRF (跨站请求伪造) 深度复盘与防御体系
前端·安全·csrf
pas1361 小时前
34-mini-vue 更新element的children-双端对比diff算法
javascript·vue.js·算法
小二·1 小时前
Python Web 开发进阶实战:数字孪生平台 —— 在 Flask + Vue 中构建实时物理世界镜像
前端·vue.js·python
CHU7290351 小时前
安心陪伴,便捷就医:陪诊代办小程序的温暖设计
前端·小程序·php