Vue和Bootstrap的整合之路
-
使用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" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" 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="#">Home</a></li> <li><a href="#">Projects</a></li> <li><a href="#">Services</a></li> <li><a href="#">Downloads</a></li> <li><a href="#">About</a></li> <li><a href="#">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程式碼如下:
}</style>
本文轉自 bxst 51CTO部落格,原文連結:
http://blog.51cto.com/13013670/1944034
相關文章
- BootStrap, React, Vue的比較bootReactVue
- 在vue下引入jquery bootstrapVuejQueryboot
- 2.Vue中bootstrap的引用問題Vueboot
- 比Django官方實現更好的分頁元件+Bootstrap整合Django元件boot
- vue升級之路(三)-- vue-router的使用Vue
- Vue整合UeditorVue
- 使用.NET MVC和BootstrapMVCboot
- Bootstrap和ladda.jsbootJS
- (九) SpringBoot起飛之路-整合/整合Swagger 2 And 3Spring BootSwagger
- Vue & Bootstrap 結合學習筆記(二)Vueboot筆記
- Vue & Bootstrap 結合學習筆記(一)Vueboot筆記
- 基於 Bootstrap 和 jQuery 的 checkbox 的應用bootjQuery
- Bootstrap和Tailwind CSS之間的差異?bootAICSS
- 京東到家的持續整合實踐之路
- Flutter持續化整合上的演進之路Flutter
- “整合”革命下,華帝、方太的理想之路
- 孫空空的Vue之路-Day04Vue
- vue整合ideakefu元件VueIdea元件
- vue-學習之路Vue
- Vue 進階之路(十四)Vue
- 談談親歷的WMS、MES與ERP的整合之路
- bootstrap框架基礎和常用元件boot框架元件
- 一個小白的vue之路(一)——關於vue的簡單瞭解Vue
- Vue整合Animate.cssVueCSS
- vue升級之路(四)-- VuexVue
- VUE 3.0 初體驗之路Vue
- netty系列之:Bootstrap,ServerBootstrap和netty中的實現NettybootServer
- vue元件之路之輪播圖的實現Vue元件
- 通用分頁-基於bootstrap和jQuerybootjQuery
- 在Vue專案中使用npm安裝bootstrap以及jqueryVueNPMbootjQuery
- Vue開發之路:資料篇Vue
- Vue開發之路由進階Vue路由
- BootStrap框架的使用boot框架
- Bootstrap 的基本使用boot
- SpringBoot 同時整合thymeleaf html、vue html和jsp-線上助手Spring BootHTMLVueJS
- 基於Bootstrap的標籤頁元件bootstrap-tabboot元件
- jquery和bootstrap獲取checkbox選中的多行資料jQueryboot
- Bootstrap++:bootstrap-select 使用boot
- 後端開發者的Vue學習之路(五)後端Vue