Java Web学习 Element

1 概述

Element：是饿了么公司前端开发团队提供的一套基于 Vue 的网站组件库，用于快速构建网页。
//Element 提供了很多组件（组成网页的部件）供我们使用。例如 超链接、按钮、图片、表格等等。

 

2 快速入门

(1) 将资源 element-ui 文件夹直接拷贝到项目的 webapp 下。
(2) 创建页面，并在页面引入Element 的css、js文件 和 Vue.js

<script src="js/vue.js"></script>//必须要导入vue，因为Element是基于Vue的。
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">

(3) 创建Vue核心对象

//Element 是基于 Vue 的，所以使用Element时必须要创建 Vue 对象。
<script>
    new Vue({
        el:"#app"
    })
</script>

 (4) 官网（https://element.eleme.cn/#/zh-CN）复制Element组件代码
//先粘贴html代码，再粘贴所需的数据模型与方法，然后按需修改。

 

3 Element布局

(1) Layout 局部
通过基础的 24 分栏，迅速简便地创建布局。也就是默认将一行分为 24 栏，根据页面要求给每一列设置所占的栏数。
(2) Container 布局容器
用于布局的容器组件，方便快速搭建页面的基本结构。

 

4 准备页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
    
    </div>
    <script src="js/vue.js"></script>
    <script src="element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <script>
        new Vue({
            el: "#app"
        })
    </script>
</body>
</html>

 

posted @ 2023-04-06 11:13  10kcheung  阅读(63)  评论(0)    收藏  举报