如何引入iconfont圖標與Element-UI組件

一、iconfont圖標

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

1、進入iconfont官網

www.iconfont.cn

2、登錄自己賬戶

3、選擇圖標后下載代碼

4、解壓后將iconfont.css和字體文件copy到項目中

5、全局引入iconfont.css

4、在需要的模板中使用

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

注意，icon 和iconfont是通用的，而icon-zuanshi需要在iconfont官網中先保存項目，然后在自己保存的項目里選擇Font class，然后在對想要引入的圖標復制代碼

 

如果要使用webpack打包，需要注意：

打包之后路徑不對，把webpack.prod.conf.js 中有一個extract設置成false就可以了。。。參見下圖

 

二、Element-UI組件

　　Element官網：

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

1、安裝

     cnpm install element-ui --save

2、引用

在main.js中引用兩個變量：

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

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

3、使用ElementUI

<el-row>

<el-col :span=7>

</el-col>

</el-row>