如何在HTML项目中使用ElementUI组件

最新推荐文章于 2024-04-28 13:53:27 发布

小飞成长研习社

最新推荐文章于 2024-04-28 13:53:27 发布

阅读量4.9k

点赞数 22

文章标签： html elementui 前端

本文链接：https://blog.csdn.net/m0_46330462/article/details/135230658

版权

在HTML项目中使用ElementUI组件

1. 下载资源文件
2. 将资源文件放入libs目录下
3. 创建icon.css文件
4. 在HTML文件中引用资源文件
5. 引入Vue
6. 使用Element UI组件进行开发

1. 下载资源文件

在HTML项目中完整使用ElementUI组件至少需要下载以下内容

vue.js
element.js
element.css
element-icons.ttf
element-icons.woff

大家可以从Element和Vue的官网下载对版本的文件，本文以Vue2、Element2版本为例，使用此版本的可以直接通过顶部链接下载全部资源文件。

2. 将资源文件放入libs目录下

在libs目录下创建文件夹element，并放入下载的资源文件。

3. 创建icon.css文件

此步骤是让我们可以在项目中直接使用ElementUI的Icon资源。
我们可以在element资源文件夹中创建icon.css文件，并填写以下内容。

@font-face {
  font-family: element-icons;
  src: url(./element-icons.woff) format('woff'), url(./element-icons.ttf) format('truetype');
  font-weight: 400;
  font-style: normal;
}

4. 在HTML文件中引用资源文件

引用element文件夹中的js和css文件，注意引用顺序，需要先引用vue.js。

<script src="libs/element/vue.js"></script>
<script src="libs/element/element.js"></script>
<link href="libs/element/element.css" rel="stylesheet">
<link href="libs/element/icon.css" rel="stylesheet">

5. 引入Vue

因为element是基于Vue的组件，需要需要引入Vue，如果是非vue脚手架创建的项目，需要在body里的最外层增加一个id为app的div标签

<body>
  <div id='app'>
    xxxxxx
  </div>
</body>
<script>
  new Vue({
    el: '#app'
    //此处的app的命名不是固定定，只需要与body中的最外层div标签id一致即可
    //后面可以继续写VUE的钩子函数
  })
</script>

6. 使用Element UI组件进行开发

现在可以使用ElementUI组件进行开发了，具体的组件用法可以参考官网Element UI V2.0官网
示例：

<el-button type="primary" round>主要按钮</el-button>
<el-button type="danger" icon="el-icon-delete" circle></el-button>

运行效果：