文章目录
ElementUI
ElementUI官网: https://element.eleme.io/
1. 安装elementui
- 第一种方法是npm 安装:
npm i element-ui -S
- 第二种方法是CDN 引入 Element:
<!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <!-- 引入组件库 --> <script src="https://unpkg.com/element-ui/lib/index.js"></script>
2. 修改main.js 引入 elementui
3. 使用ElementUI的标签
首先定义了Car.vue组件,在Car.vue里进行测试,vue组件创建引入的步骤在文章最后
<template>
<!-- 组件只能有一个根元素-->
<div>
<h1>{
{msg}}</h1>
<!-- 开始使用ElementUI的组件,本质上就是一些标签 -->
<!-- 2. icon图标,使用i组件,class的值是图标的样式-->
<i class="el-icon-edit"></i>
<i class="el-icon-s-operation"></i>
<!-- Layout布局,默认一行是24个分格 el-row是行,el-col是列-->
<el-row>
<el-col :span="3">品牌</el-col>
<el-col :span="3">价格</el-col>
<el-col :span="18">描述</el-col>
</el-row>
<!-- 3. 按钮el-button组件 -->
<el-row>
<el-button>普通按钮</el-button>
<el-button type="primary" round>主要按钮</el-button>
<el-button type="primary" icon="el-icon-edit" circle></el-button>
</el-row>
<!-- 4.输入框el-input -->
<el-col :span="6">
<el-input v-model="msg"