在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>
运行效果：
