contenido
Resumir
1. Introduce estilos, componentes y vue de elementui en la cabeza
2. Establece el mejor selector de id en el div más externo del cuerpo, y otros también pueden
3. Introduce vue en la etiqueta del script, y el vincula la selección de div más externo La clase el nombre debe ser coherente, como id='box', el:'#box'
El código fuente es el siguiente index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--引入 element-ui 的样式,-->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 必须先引入vue, 后使用element-ui -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<!-- 引入element 的组件库-->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<style>
</style>
<body>
<div id="box" class="box">
<i class="el-icon-arrow-left"></i>
<i class="el-icon-arrow-right"></i>
<i class="el-icon-edit"></i>
<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>
<el-row>
<el-button plain>朴素按钮</el-button>
<el-button type="primary" plain>主要按钮</el-button>
<el-button type="success" plain>成功按钮</el-button>
<el-button type="info" plain>信息按钮</el-button>
<el-button type="warning" plain>警告按钮</el-button>
<el-button type="danger" plain>危险按钮</el-button>
</el-row>
<el-row>
<el-button round>圆角按钮</el-button>
<el-button type="primary" round>主要按钮</el-button>
<el-button type="success" round>成功按钮</el-button>
<el-button type="info" round>信息按钮</el-button>
<el-button type="warning" round>警告按钮</el-button>
<el-button type="danger" round>危险按钮</el-button>
</el-row>
<el-row>
<el-button icon="el-icon-search" circle></el-button>
<el-button type="primary" icon="el-icon-edit" circle></el-button>
<el-button type="success" icon="el-icon-check" circle></el-button>
<el-button type="info" icon="el-icon-message" circle></el-button>
<el-button type="warning" icon="el-icon-star-off" circle></el-button>
<el-button type="danger" icon="el-icon-delete" circle></el-button>
</el-row>
</div>
</body>
<script>
new Vue({
// 此处指向vue组件所要渲染的DOM标签 <div id="box"></div> el:'#box' 用id属性标识 也可用class属性
// 如果是class <div class="box"></div> el:'.box'
// 总之最外层div用class或id绑定js ,下面el对应body对外层div选择器名称,绑定之后才可以使用elementui中组件内容
el: '#box',
data() {
return {
}
},
methods: {
}
})
</script>
</html>
El diagrama de efectos es el siguiente
Si siente que el artículo es bueno, recuerde prestar atención, preste atención y recójalo. Corríjame si hay algún error. Si necesita reimprimir, indique la fuente, ¡gracias! ! !