ldlood同學推薦 element ui(餓了么基于vue出品)也不錯, github地址:https://github.com/ElemeFE/element. 大家也可以關注一下
我是一個剛剛接觸前端開發的新手，所以有必要記錄如何將Bootstrap和Vue進行整合。 如果你是老手，請直接繞道而過。作為一個新手，里面的步驟，過程或者專業術語未必正確，如果你發現哪里錯誤了，請發郵件至ztao8607@gmail.com
Vue官方不建議新手直接使用vue-cli，但我不這么看。 先使用cli跳過繁瑣的環境配置，直接看到demo效果能增強點自信心。如果上手就被一大堆的環境配置搞亂了心情，那才是得不償失呢。 恩. 至少我是這么認為的。
使用vue-cli
如果是使用國內網絡安裝，官方建議使用淘寶或者cnpmjs的鏡像。我感覺淘寶的鏡像速度不如cnpmjs的快，因為我使用的cnpmjs鏡像。
npm --registry http://r.cnpmjs.org install --global vue-cli //安裝vue-clivue init webpack <project name> //創建項目，一般情況使用默認配置就可以cd <project name>npm --registry http://r.cnpmjs.org install //安裝packagenpm run dev
正常的話，你應該能看到一個vue的初始化頁面。
整合bootstrap
你可以選擇下載bootstrap zip包，然后將包里面的內容放到工程的static目錄中。也可以選擇使用bootstrap cdn資源，我建議使用cdn資源。
1.修改index.html頁面
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>testproject</title> <!-- 將bootstrap cdn url放到這里 --> <link rel="stylesheet" rel="external nofollow" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <link rel="stylesheet" rel="external nofollow" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"></head><body> <div id="app"></div> <!-- built files will be auto injected --></body></html>
你可以訪問bootstrap官方網站獲取到最新的cdn資源地址。
2.創建布局
我們創建一個使用bootstrap 柵格布局的例子。 在src/components目錄中創建一個Root.vue文件。在Root.vue文件中，我們先編輯template，創建一個container，然后放入一些導航欄。
里面布局代碼來自于bootstrap官方提供的demo
<template> <div id="root"> <div class="container"> <div class="masthead"> <h3 class="text-muted">Look for it!</h3> <nav> <ul class="nav nav-justified"> <li class="active"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Home</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Projects</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Services</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Downloads</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >About</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Contact</a></li> </ul> </nav> </div> </div> <mfooter></mfooter> </div></template>
添加script代碼
<script>export default { name: 'root'}</script>添加css樣式
因為是從bootstrap拷貝的css樣式，所以直接將css拷貝過來。
<style>body { padding-top: 20px;}.footer { padding-top: 40px; padding-bottom: 40px; margin-top: 40px; border-top: 1px solid #eee;}/* Main marketing message and sign up button */.jumbotron { text-align: center; background-color: transparent;}.jumbotron .btn { padding: 14px 24px; font-size: 21px;}/* Customize the nav-justified links to be fill the entire space of the .navbar */.nav-justified { background-color: #eee; border: 1px solid #ccc; border-radius: 5px;}.nav-justified > li > a { padding-top: 15px; padding-bottom: 15px; margin-bottom: 0; font-weight: bold; color: #777; text-align: center; background-color: #e5e5e5; /* Old browsers */ background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#e5e5e5)); background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #e5e5e5 100%); background-image: -o-linear-gradient(top, #f5f5f5 0%, #e5e5e5 100%); background-image: linear-gradient(to bottom, #f5f5f5 0%,#e5e5e5 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */ background-repeat: repeat-x; /* Repeat the gradient */ border-bottom: 1px solid #d5d5d5;}.nav-justified > .active > a,.nav-justified > .active > a:hover,.nav-justified > .active > a:focus { background-color: #ddd; background-image: none; -webkit-box-shadow: inset 0 3px 7px rgba(0,0,0,.15); box-shadow: inset 0 3px 7px rgba(0,0,0,.15);}.nav-justified > li:first-child > a { border-radius: 5px 5px 0 0;}.nav-justified > li:last-child > a { border-bottom: 0; border-radius: 0 0 5px 5px;}@media (min-width: 768px) { .nav-justified { max-height: 52px; } .nav-justified > li > a { border-right: 1px solid #d5d5d5; border-left: 1px solid #fff; } .nav-justified > li:first-child > a { border-left: 0; border-radius: 5px 0 0 5px; } .nav-justified > li:last-child > a { border-right: 0; border-radius: 0 5px 5px 0; }}/* Responsive: Portrait tablets and up */@media screen and (min-width: 768px) { /* Remove the padding we set earlier */ .masthead, .marketing, .footer { padding-right: 0; padding-left: 0; }}</style>修改router
注釋原先的Hello模塊，使用剛才添加的Root模塊
import Vue from 'vue'import Router from 'vue-router'import Root from '@/components/Root'Vue.use(Router)export default new Router({ routes: [ { path: '/', name: 'Header', component: Root } ]})完整的Root.vue代碼如下:
<template> <div id="root"> <div class="container"> <div class="masthead"> <h3 class="text-muted">Look for it!</h3> <nav> <ul class="nav nav-justified"> <li class="active"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Home</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Projects</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Services</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Downloads</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >About</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Contact</a></li> </ul> </nav> </div> </div> </div></template><script>export default { name: 'root'}</script><style>body { padding-top: 20px;}.footer { padding-top: 40px; padding-bottom: 40px; margin-top: 40px; border-top: 1px solid #eee;}/* Main marketing message and sign up button */.jumbotron { text-align: center; background-color: transparent;}.jumbotron .btn { padding: 14px 24px; font-size: 21px;}/* Customize the nav-justified links to be fill the entire space of the .navbar */.nav-justified { background-color: #eee; border: 1px solid #ccc; border-radius: 5px;}.nav-justified > li > a { padding-top: 15px; padding-bottom: 15px; margin-bottom: 0; font-weight: bold; color: #777; text-align: center; background-color: #e5e5e5; /* Old browsers */ background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#e5e5e5)); background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #e5e5e5 100%); background-image: -o-linear-gradient(top, #f5f5f5 0%, #e5e5e5 100%); background-image: linear-gradient(to bottom, #f5f5f5 0%,#e5e5e5 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */ background-repeat: repeat-x; /* Repeat the gradient */ border-bottom: 1px solid #d5d5d5;}.nav-justified > .active > a,.nav-justified > .active > a:hover,.nav-justified > .active > a:focus { background-color: #ddd; background-image: none; -webkit-box-shadow: inset 0 3px 7px rgba(0,0,0,.15); box-shadow: inset 0 3px 7px rgba(0,0,0,.15);}.nav-justified > li:first-child > a { border-radius: 5px 5px 0 0;}.nav-justified > li:last-child > a { border-bottom: 0; border-radius: 0 0 5px 5px;}@media (min-width: 768px) { .nav-justified { max-height: 52px; } .nav-justified > li > a { border-right: 1px solid #d5d5d5; border-left: 1px solid #fff; } .nav-justified > li:first-child > a { border-left: 0; border-radius: 5px 0 0 5px; } .nav-justified > li:last-child > a { border-right: 0; border-radius: 0 5px 5px 0; }}/* Responsive: Portrait tablets and up */@media screen and (min-width: 768px) { /* Remove the padding we set earlier */ .masthead, .marketing, .footer { padding-right: 0; padding-left: 0; }}</style>以上所述是小編給大家介紹的Vue和Bootstrap的整合思路詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
