如何引入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>