1，bootstrap
創建項目
首先使用腳手架搭出項目基本框架，具體方法可以參考前面的文章。
1，執行命令創建項目：vue init webpack-simple vue-bootstrap
2，下載相關依賴：npm vue-bootstrap
3，啟動項目：npm run dev
出現這個界面就說明項目創建成功了。
引入bootstrap
1，使用之前需要先在項目中下載bootstrap，在項目根目錄執行命令：npm install bootstrap --save
2，下載完成后，在index.html文件中引入相關樣式。
使用bootstrap
當我們把這個樣式文件引入后，就可以正常的通過為元素添加class類來使用這些樣式了。
首先刪除App.vue中的<template>默認頁面元素，再通過按鈕驗證是否引用成功。
此時說明已經成功引入了bootstrap樣式文件了。其他的使用就都是類似的了，需要注意的是，bootstrap是基於jQuery的，所以如果有需要，最好也在項目中引入一下。
代碼下載：點這里
2，elementUI-完整引入
創建項目
這一步就和上面一樣了，就不在重復說明了。
安裝並引入element-ui
在官網http://element.eleme.io上面提出推薦使用npm進行安裝，所以這里也使用npm來安裝。
其中的i是install的簡寫；-S則是--save的簡寫，我們也可以使用-D來代表--save-dev進行安裝。
--save是對生產環境所需依賴的聲明(開發應用中使用的框架，庫) ，比如：jq，react，vue都需要放到這里面 。--save-dev是對開發環境所需依賴的聲明(構建工具，測試工具) ，比如：babel，webpack，都放到當前目錄。在package.json文件中，有兩個存放模塊的對象。–save會存放到”dependencies”，而–save-dev會存放到”devDependencies”。
在項目根目錄執行上面的語句
安裝成功后，在入口文件中進行全局引入，關於如何引入，在官網中也有詳細的說明。只需要按照說明進行引入就可以了。
引入后重新運行項目，會發現報錯了
這一類型的錯誤前面有提到過，前面是不能直接引用css，需要css-loader，這里是不能引入字體圖標，解決辦法是一樣的。引入外部的字體圖標時需要file-loader，因為這個在package.json中已經存在的，所以可以直接在webpack.config.js中進行配置就可以了，如果某些版本中沒有，則需要通過npm進行下載再配置。
然后再重新運行項目就可以了。
使用
刪除App.vue中的<template>默認頁面元素后，復制官網的代碼示例檢測引用是否成功。
這樣，我們就已經在項目中成功引入了element-ui。
代碼下載：點這里
3，elementUI-按需引入
在官網http://element.eleme.io上面還提供了還需引入的方法，這里也簡單的操作一下。
創建項目
這一步就和上面一樣了，就不在重復說明了。
按需引入
關於按需引入，官網上面已經給出了十分詳細的介紹，實際操作時按照介紹一步一步的走就可以了。
1，下載UI組件：npm install element-ui -D
和上面一樣，還需要配置webpack.config.js
2，在項目根目錄安裝 babel-plugin-component：npm install babel-plugin-component -D
3，修改根目錄下的.babelrc 文件
完成上面的步驟以后，我們就可以根據需要來引入相關組件了。還是以上面的按鈕為例。
首先在main.js中引入需要的組件
然后在App.vue中使用組件。
使用
因為是按需引入的，在實際的運用過程中，我們肯定不會單一的值用到某一個組件，那么當組件越來越多的時候，不停的在main.js中添加引入並不是一個很好的行為，更明智的做法是單獨新建一個文件用來引入組件，然后在main.js中引入這個文件就可以了。下面的例子中就是在src文件夾下新建了一個element-ui.js用來引入組件。
代碼下載：點這里
4，Mint-ui
創建項目
同前面一樣，繼續略過。
安裝並引入
同樣，這個UI組件的官網http://mint-ui.github.io上面也有十分詳細的介紹。
按住上面的提示，首先是在項目根目錄執行安裝命令：npm install mint-ui -S，然后在main.js中引入
這樣就ok了。
5， 使用阿里圖標
對於前端來說，阿里圖標庫是一個圖標很全面的網站，我們幾乎能在上面找到所有項目中需要使用的圖標，下面簡單介紹在vue項目中使用阿里圖標的兩種方式。
添加至項目
首先登錄阿里圖標庫網站，然后選擇自己需要的圖標，加入購物車。添加完畢后，點擊網站右側的購物車。
此時可以看到我們選擇的圖標。
選擇下面的添加至項目
可以新建項目，也可以是之前已經存在的項目。確定了項目以后，就會出現下面的界面。
這里我們選擇Font class ，也可以選擇Unicode，主要是使用的時候的差別。
點擊查看在線鏈接，
再繼續點擊，就會生成一條可用的鏈接，復制該鏈接到vue項目的入口文件index.html中。
最后，在需要使用圖標的地方，根據圖標名稱進行應用就可以了。
如果生成鏈接的時候選擇的Font class，就是下面這樣應用：
需要注意的是，在同一個項目中，每次添加了新的圖標以后，一定要重新點擊查看在線鏈接，生成新的鏈接。
下載到本地
和前面的步驟一樣，想需要的圖標加入購物車，然后添加至項目中，再選擇下載至本地
會得到一個壓縮文件夾，打開這個文件，復制里面所有iconfont命名的文件，在vue項目中新建一個文件夾存放這些文件，我這里是在assets文件夾下新建iconfont文件夾。
然后在vue項目的main.js文件中進行引入：
此時，如果直接使用，會報錯，所以還需要安裝css-loader依賴包：
npm install css-loader --save
安裝完成以后，就可以直接在需要使用圖標的頁面直接使用了：
6， 使用Font Awesome圖標
Font Awesome是一個不同於阿里的圖標庫，在項目中用到的也比較多，和阿里圖標庫不同的是，使用這個圖標庫，首先需要進行安裝。
1，安裝
npm install vue-awesome --save
2，引入
安裝完成以后，在vue項目的main.js中進行引入：
官網提供兩種引入方式，上面一個可以適當的減小項目體積。
引入完成以后，還需要注冊全局組件：
3，使用
引入完成以后，就可以直接使用了：
