Element-UI - Vue项目整合Element-UI & Icon图标 & 自定义Icon图标
Element-UI - Vue项目整合Element-UI & Icon图标 & 自定义Icon图标博主很久之前就想使用Element-UI,总是因为学习后端的技术鸽了很久(博主目前是偏后端),这里博主通过Vue来整合Element-UI(不是Vue项目整合Element-UI,Vue项目整合Element-UI不久就会有的,因为最近博主有一个项目需要)。引入Element-UI
Element-UI - Vue项目整合Element-UI & Icon图标 & 自定义Icon图标
博主很久之前就想使用Element-UI,总是因为需要学习后端技术鸽了很久(博主目前是偏后端),这里博主通过Vue项目来整合Element-UI。
引入Element-UI
npm安装
Vue项目整合Element-UI会用到,这里博主介绍一下。
npm i element-ui -S
i
:是install
的简写。-S
:即--save
(保存),包会被注册到package.json
的dependencies
里面。
E:\workspace\WebStorm\blog\project>
E:\workspace\WebStorm\blog\project>npm i element-ui -S
...
+ element-ui@2.14.1
added 6 packages from 6 contributors in 7.474s
在Vue项目入口文件main.js
中添加:
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
这样就可以在Vue项目中使用Element-UI了。
修改App.vue
:
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view/>
<i class="el-icon-platform-eleme"></i>
<i class="el-icon-delete-solid"></i>
<i class="el-icon-loading"></i>
<p class="el-icon-folder-add"></p>
<el-button type="primary" icon="el-icon-search">搜索</el-button>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
很明显Element-UI使用成功了。
CDN
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
建议使用CDN引入Element-UI时锁定版本,以免将来Element-UI升级时受到非兼容性更新的影响。
如版本2.14.1
:
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui@2.14.1/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui@2.14.1/lib/index.js"></script>
引入这些文件后,就可以使用Element-UI了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>images</title>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui@2.14.1/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="../js/vue.js"></script>
<script src="https://unpkg.com/element-ui@2.14.1/lib/index.js"></script>
</head>
<body>
<div id="app">
<i class="el-icon-platform-eleme"></i>
<i class="el-icon-delete-solid"></i>
<i class="el-icon-loading"></i>
<p class="el-icon-folder-add"></p>
<el-button type="primary" icon="el-icon-search">搜索</el-button>
</div>
</body>
</html>
<script>
var vue = new Vue({
el: '#app'
})
</script>
效果和上面是一样的,Element-UI使用成功了。
Javascript文件引入顺序如下,因为Element-UI是基于Vue2的,所以要先引入Vue。
<script src="../js/vue.js"></script>
<script src="https://unpkg.com/element-ui@2.14.1/lib/index.js"></script>
Icon图标
Element-UI提供了一套常用的图标集合。直接通过设置类名为el-icon-iconName
来使用即可,上面的代码中也有涉及。
<i class="el-icon-platform-eleme"></i>
<i class="el-icon-delete-solid"></i>
<i class="el-icon-loading"></i>
<p class="el-icon-folder-add"></p>
查看有哪些图标:
自定义Icon图标
Element-UI提供的图标还是有限的,所以需要自定义Icon
图标,通过下面代码就可以自定义Icon
图标,很简单吧(知道CSS即可)。
<style>
.el-icon-dog{
background: url(../img/dog.png) center no-repeat; /*使用自己的图片来替换*/
background-size: contain;
}
.el-icon-dog:before{
content: "dog"; /*before属性中的content文本是用来占位的,必须有*/
font-size: 50px; /*可以设置字体大小来确定图标大小*/
visibility: hidden; /*使用visibility: hidden;来隐藏文字*/
}
</style>
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>images</title>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui@2.14.1/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="../js/vue.js"></script>
<script src="https://unpkg.com/element-ui@2.14.1/lib/index.js"></script>
</head>
<body>
<div id="app">
<i class="el-icon-platform-eleme"></i>
<i class="el-icon-delete-solid"></i>
<i class="el-icon-loading"></i>
<p class="el-icon-folder-add"></p>
<p class="el-icon-dog"></p>
<el-button type="primary" icon="el-icon-search">搜索</el-button>
</div>
</body>
</html>
<style>
.el-icon-dog{
background: url(../img/dog.png) center no-repeat; /*使用自己的图片来替换*/
background-size: contain;
}
.el-icon-dog:before{
content: "dog"; /*before属性中的content文本是用来占位的,必须有*/
font-size: 50px; /*可以设置字体大小来确定图标大小*/
visibility: hidden; /*使用visibility: hidden;来隐藏文字*/
}
</style>
<script>
var vue = new Vue({
el: '#app'
})
</script>
效果如下图所示:
很明显效果符合预期。
Vue项目整合Element-UI、Icon图标以及自定义Icon图标就介绍到这里。
写博客是博主记录自己的学习过程,如果有错误,请指正,谢谢!
更多推荐
所有评论(0)