bootstrap

創建項目

首先使用腳手架搭出項目基本框架，具體方法可以參考前面的文章。

1，執行命令創建項目：vue init webpack-simple vue-bootstrap

2，下載相關依賴：npm vue-bootstrap

3，啟動項目：npm run dev

出現這個界面就說明項目創建成功了。

引入bootstrap

1，使用之前需要先在項目中下載bootstrap，在項目根目錄執行命令：npm install bootstrap

2，下載完成後，在index.html文件中引入相關樣式。

使用bootstrap

當我們把這個樣式文件引入後，就可以正常的通過為元素添加class類來使用這些樣式了。

首先刪除App.vue中的<template>默認頁面元素，再通過按鈕驗證是否引用成功。

此時說明已經成功引入了bootstrap樣式文件了。其他的使用就都是類似的了，需要註意的是，bootstrap是基於jQuery的，所以如果有需要，最好也在項目中引入一下。

代碼下載：點這裏

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

然後再重新運行項目就可以了。

使用

刪除App.vue中的<template>默認頁面元素後，復制官網的代碼示例檢測引用是否成功。

這樣，我們就已經在項目中成功引入了element-ui。

代碼下載：點這裏

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用來引入組件。

代碼下載：點這裏

Mint-ui

創建項目

同前面一樣，繼續略過。

安裝並引入

同樣，這個UI組件的官網http://mint-ui.github.io上面也有十分詳細的介紹。

按住上面的提示，首先是在項目根目錄執行安裝命令：npm install mint-ui -S，然後在main.js中引入

這樣就ok了。

vue配合UI組件