element-ui的基本使用

1.基本介绍element-ui是基于vue.js的后台组件库，方便进行页面的快速布局和构建element-ui网站element-ui组件库element-ui、bootstrap和ant design的关系都是成熟的第三方组件库区别在于组件库，element-ui和ant design是Vue写的原生组件库，而Bootstrap的组件库是用jQuery开发2.安装npm i element-u

是草莓味的啊

1130人浏览 · 2021-09-30 10:08:03

是草莓味的啊 · 2021-09-30 10:08:03 发布

1.基本介绍

element-ui是基于vue.js的后台组件库，方便进行页面的快速布局和构建
element-ui网站
 element-ui组件库

element-ui、bootstrap和ant design的关系
都是成熟的第三方组件库
区别在于组件库，element-ui和ant design是Vue写的原生组件库，而Bootstrap的组件库是用jQuery开发

2.安装

npm i element-ui -S

3.基本使用

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <title>Document</title>
   <!-- 引入样式 -->
   <link rel="stylesheet" href="./index.css">
</head>

<body>
   <div id="app">
   		<!-- 从element-ui的官网上面复制你想使用的组件即可 -->
        <el-row>
            <el-button>默认按钮</el-button>
            <el-button type="primary">主要按钮</el-button>
            <el-button type="success">成功按钮</el-button>
            <el-button type="info">信息按钮</el-button>
            <el-button type="warning">警告按钮</el-button>
            <el-button type="danger">危险按钮</el-button>
        </el-row>
   </div>
   <!-- 如果想使用element-ui必须引入vue.js -->
   <script src="./vue.min.js"></script>
   <!-- 引入组件库 -->
   <script src="./index.js"></script>
   <script>
       new Vue({
           el:'#app',
           data:{},
       })
   </script>
</body>
</html>

View Design

基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。

更多推荐

Element UI组件介绍

简介element ui 就是基于vue的一个ui框架,该框架基于vue开发了很多相关组件,方便我们快速开发页面。1、安装Element UI，通过vue脚手架创建项vue init webpack element(项目名)2、在vue脚手架项目中安装elementui# 1.下载elementui的依赖npm i element-ui -S# 2.指定当前项目中使用elementuiimport