如何引入iconfont图标与Element-UI组件

1、iconfont图标

iconfont方便又好用，介绍一下如何在vue项目中引入iconfont

一、进入iconfont官网

www.iconfont.cn

二、登陆本身帐户

三、选择图标后下载代码

四、解压后将iconfont.css和字体文件copy到项目中

五、全局引入iconfont.css

四、在须要的模板中使用

<p>
      <i class="icon iconfont icon-zuanshi"></i>
    </p>

注意，icon 和iconfont是通用的，而icon-zuanshi须要在iconfont官网中先保存项目，而后在本身保存的项目里选择Font class，而后在对想要引入的图标复制代码

 

若是要使用webpack打包，须要注意：

打包以后路径不对，把webpack.prod.conf.js 中有一个extract设置成false就能够了。。。参见下图

 

2、Element-UI组件

　　Element官网：

　　http://element-cn.eleme.io/#/zh-CN/component/installation

一、安装

     cnpm install element-ui --save

二、引用

在main.js中引用两个变量：

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'

Vue.use(ElementUI)//全局可用

三、使用ElementUI

<el-row>

<el-col :span=7>

</el-col>

</el-row>