Element入门笔记

最新推荐文章于 2024-10-09 18:12:15 发布

11_bb

最新推荐文章于 2024-10-09 18:12:15 发布

阅读量519

点赞数

分类专栏： javaWeb 文章标签：前端 javascript vue.js

本文链接：https://blog.youkuaiyun.com/bb_111/article/details/127533614

版权

18 篇文章

订阅专栏

本文介绍了基于Vue的Element网站组件库，用于快速构建网页。学习Element主要是从官网拷贝组件到自己页面并修改。还阐述了使用Element的步骤，包括引入文件、创建Vue对象、复制组件代码，同时介绍了Element的两种布局方式：Layout布局和Container布局容器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Element：是饿了么公司前端开发团队提供的一套基于 Vue 的网站组件库，用于快速构建网页。

组件：组成网页的部件，例如：超链接、按钮、图片、表格等。

学习 Element 其实就是学习怎么从官网拷贝组件到我们自己的页面并进行修改，官网网址是https://element.eleme.cn/#/zh-CN

1.使用Element步骤：

1.引入Element的css、js文件和Vue.js

<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">

2.创建Vue核心对象

<script>
  new  Vue({
    el:"#app"
  })
</script>

3.复制官网Element组件代码

2.Element布局：

Element 提供了两种布局方式：

通过基础的 24 分栏，迅速简便地创建布局。也就是默认将一行分为 24 栏，根据页面要求给每一列设置所占的栏数。

在这里插入图片描述

在左菜单栏找到 Layout 布局 ，然后找到自己喜欢的按钮样式，点击 显示代码 ，在下面就会展示出对应的代码，显示出的代码中有样式，有html标签。将样式拷贝我们自己页面的 head 标签内，将html标签拷贝到 <div id="app"></div> 标签内。

在这里插入图片描述
该效果代码中包含了样式、页面标签、模型数据。将里面的样式 <style> 拷贝到我们自己页面的 head 标签中；将html标签拷贝到 <div id="app"></div> 标签中，再将数据模型拷贝到 vue 对象的 data() 中。