Hướng dẫn install bootstrap-vue - cài đặt bootstrap-vue

Bắt đầu với Bootstrapvue, dựa trên khung phổ biến nhất thế giới - Bootstrap V4, để xây dựng các trang web đầu tiên, phản hồi, sử dụng Vue.js.

Show
  • Các tính năng và API sau đây được sử dụng bởi bootstrapvue:
  • ES6 (ví dụ:
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    79,
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    80,
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    81,
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    82, v.v.)
  • <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    85 (tùy chọn)
  • Cổng thông tin
    import Vue from 'vue'
    import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
    
    
    import 'bootstrap/dist/css/bootstrap.css'
    import 'bootstrap-vue/dist/bootstrap-vue.css'
    
    
    Vue.use(BootstrapVue)
    
    Vue.use(IconsPlugin)
    2 được yêu cầu bởi bánh mì nướng,
    import Vue from 'vue'
    import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
    
    
    import 'bootstrap/dist/css/bootstrap.css'
    import 'bootstrap-vue/dist/bootstrap-vue.css'
    
    
    Vue.use(BootstrapVue)
    
    Vue.use(IconsPlugin)
    3 được khuyến nghị
  • JQuery không bắt buộcnot required

Kiểm tra những gì mới trong phát hành bootstrapvue v2.23.0.

Nếu bạn đang di chuyển từ bản phát hành

import Vue from 'vue'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'


import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'


Vue.use(BootstrapVue)

Vue.use(IconsPlugin)
4 trước đó, vui lòng xem Hướng dẫn di chuyển
import Vue from 'vue'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'


import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'


Vue.use(BootstrapVue)

Vue.use(IconsPlugin)
5.

Phần tài liệu

Tài liệu trực tuyến bao gồm:

  • Các thành phần - Thành phần và tài liệu plugin thành phần
  • Chỉ thị - Chỉ thị và tài liệu plugin chỉ thị
  • ICONS - ICONS và tài liệu plugin biểu tượng v2.2.0+v2.2.0+
  • Tham chiếu - Thông tin và tài liệu tham khảo
  • Sân chơi - Sân chơi trực tuyến
  • Chủ đề - Chủ đề và bảng điều khiển

Điều kiện tiên quyết

Tài liệu bootstrapvue này giả định rằng bạn đã quen thuộc với Vue và Bootstrap V4 CSS. Điểm khởi đầu tốt cho những điều này:

  • Hướng dẫn Vue
  • Vue API
  • Tài liệu Bootstrap v4.6
  • Vue Loader phạm vi phạm vi CSS, nếu sử dụng các kiểu vạch trong SFC (thành phần tệp đơn)
    import Vue from 'vue'
    import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
    
    
    import 'bootstrap/dist/css/bootstrap.css'
    import 'bootstrap-vue/dist/bootstrap-vue.css'
    
    
    Vue.use(BootstrapVue)
    
    Vue.use(IconsPlugin)
    6 Tệp

Thông tin tài liệu

Trong nhiều ví dụ được hiển thị trong tài liệu của Bootstrapvue, bạn có thể thấy việc sử dụng các lớp CSS như

import Vue from 'vue'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'


import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'


Vue.use(BootstrapVue)

Vue.use(IconsPlugin)
7,
import Vue from 'vue'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'


import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'


Vue.use(BootstrapVue)

Vue.use(IconsPlugin)
8, v.v. Bạn có thể tìm thấy thông tin về các lớp này trong phần tham chiếu của các lớp tiện ích.

Nhiều ví dụ trong tài liệu này là trực tiếp và có thể được chỉnh sửa tại chỗ cho trải nghiệm học tập nâng cao (lưu ý một số ví dụ có thể không hoạt động trong IE 11 do sử dụng mã JavaScript ES6 trong phần

import Vue from 'vue'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'


import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'


Vue.use(BootstrapVue)

Vue.use(IconsPlugin)
9).

Bootstrapvue cũng cung cấp một sân chơi tương tác nơi bạn có thể thử nghiệm các thành phần khác nhau và xuất kết quả của bạn sang JSFiddle, CodePen và/hoặc CodeSandbox.

HTML toàn cầu quan trọng

Bootstrap V4 CSS sử dụng một số ít các phong cách và cài đặt toàn cầu quan trọng mà bạn sẽ cần nhận thức được khi sử dụng nó, tất cả đều chỉ hướng đến việc chuẩn hóa các kiểu trình duyệt chéo. Tham khảo các phần phụ sau đây để biết chi tiết.

HTML5 DOCTYPE

Bootstrap yêu cầu sử dụng

$body-bg: #000;
$body-color: #111;


@import 'node_modules/bootstrap/scss/bootstrap.scss';
@import 'node_modules/bootstrap-vue/src/index.scss';
0 doctype. Không có nó, bạn có thể thấy một số kiểu dáng không đầy đủ kỳ lạ.

<!doctype html>
<html lang="en">
  ...
</html>

Thẻ meta đáp ứng

Bootstrap được tối ưu hóa cho các thiết bị di động trước và sau đó chia tỷ lệ các thành phần khi cần thiết bằng cách sử dụng các truy vấn phương tiện CSS. Để đảm bảo kết xuất và chạm vào phù hợp cho tất cả các thiết bị, hãy thêm thẻ Meta Viewport đáp ứng vào

$body-bg: #000;
$body-color: #111;


@import 'node_modules/bootstrap/scss/bootstrap.scss';
@import 'node_modules/bootstrap-vue/src/index.scss';
1 của bạn.add the responsive viewport meta tag to your
$body-bg: #000;
$body-color: #111;


@import 'node_modules/bootstrap/scss/bootstrap.scss';
@import 'node_modules/bootstrap-vue/src/index.scss';
1.

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Kích thước hộp CSS

Để có kích thước đơn giản hơn trong CSS, giá trị

$body-bg: #000;
$body-color: #111;


@import 'node_modules/bootstrap/scss/bootstrap.scss';
@import 'node_modules/bootstrap-vue/src/index.scss';
2 toàn cầu được chuyển từ
$body-bg: #000;
$body-color: #111;


@import 'node_modules/bootstrap/scss/bootstrap.scss';
@import 'node_modules/bootstrap-vue/src/index.scss';
3 sang
$body-bg: #000;
$body-color: #111;


@import 'node_modules/bootstrap/scss/bootstrap.scss';
@import 'node_modules/bootstrap-vue/src/index.scss';
4. Điều này đảm bảo
$body-bg: #000;
$body-color: #111;


@import 'node_modules/bootstrap/scss/bootstrap.scss';
@import 'node_modules/bootstrap-vue/src/index.scss';
5 không ảnh hưởng đến chiều rộng được tính toán cuối cùng của một phần tử, nhưng nó có thể gây ra sự cố với một số phần mềm của bên thứ ba như Google Maps và Google Custom Search Engine.

Trong dịp hiếm hoi, bạn cần phải ghi đè nó, sử dụng một cái gì đó như sau:

.selector-for-some-widget {
  box-sizing: content-box;
}

Với đoạn trích ở trên, các phần tử lồng nhau - bao gồm nội dung được tạo thông qua

$body-bg: #000;
$body-color: #111;


@import 'node_modules/bootstrap/scss/bootstrap.scss';
@import 'node_modules/bootstrap-vue/src/index.scss';
6 và
$body-bg: #000;
$body-color: #111;


@import 'node_modules/bootstrap/scss/bootstrap.scss';
@import 'node_modules/bootstrap-vue/src/index.scss';
7 - tất cả sẽ kế thừa
$body-bg: #000;
$body-color: #111;


@import 'node_modules/bootstrap/scss/bootstrap.scss';
@import 'node_modules/bootstrap-vue/src/index.scss';
2 được chỉ định cho
$body-bg: #000;
$body-color: #111;


@import 'node_modules/bootstrap/scss/bootstrap.scss';
@import 'node_modules/bootstrap-vue/src/index.scss';
9 đó.

Tìm hiểu thêm về mô hình hộp và kích thước tại các thủ thuật CSS.

Phong cách khởi động lại

Để kết xuất trình duyệt chéo được cải thiện, Bootstrap V4.6 sử dụng khởi động lại để điều chỉnh sự không nhất quán trên các trình duyệt và thiết bị trong khi cung cấp các thiết lập lại có ý kiến ​​hơn một chút cho các phần tử HTML thông thường.

Sử dụng các gói mô -đun

Nhiều khả năng bạn đang sử dụng các gói mô -đun như WebPack, Parcel hoặc Rollup.js, giúp dễ dàng đưa gói hàng vào dự án của bạn dễ dàng. Để làm điều này, hãy sử dụng

import Vue from 'vue'
import { BootstrapVue } from 'bootstrap-vue'

import './app.scss'

Vue.use(BootstrapVue)
0 hoặc
import Vue from 'vue'
import { BootstrapVue } from 'bootstrap-vue'

import './app.scss'

Vue.use(BootstrapVue)
1 để có được phiên bản mới nhất của Vue.js, Bootstrap V4 và Bootstrapvue:

npm install vue bootstrap bootstrap-vue


yarn add vue bootstrap bootstrap-vue

Sau đó, đăng ký bootstrapvue trong điểm nhập ứng dụng của bạn (thường là

import Vue from 'vue'
import { BootstrapVue } from 'bootstrap-vue'

import './app.scss'

Vue.use(BootstrapVue)
2 hoặc
import Vue from 'vue'
import { BootstrapVue } from 'bootstrap-vue'

import './app.scss'

Vue.use(BootstrapVue)
3):

import Vue from 'vue'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'


import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'


Vue.use(BootstrapVue)

Vue.use(IconsPlugin)

Theo chủ đề bootstrap

Nếu bạn muốn thay đổi các kiểu mặc định của Bootstrap (ví dụ:

import Vue from 'vue'
import { BootstrapVue } from 'bootstrap-vue'

import './app.scss'

Vue.use(BootstrapVue)
4), bạn phải sử dụng các tệp ____65 của Bootstrap và Bootstrapvue.

Tạo tệp

import Vue from 'vue'
import { BootstrapVue } from 'bootstrap-vue'

import './app.scss'

Vue.use(BootstrapVue)
5 của riêng bạn (ví dụ:
import Vue from 'vue'
import { BootstrapVue } from 'bootstrap-vue'

import './app.scss'

Vue.use(BootstrapVue)
7) chứa cả hai định nghĩa tùy chỉnh của bạn và 2 ____ ____ 68 ở cuối:both your custom definitions and the 2
import Vue from 'vue'
import { BootstrapVue } from 'bootstrap-vue'

import './app.scss'

Vue.use(BootstrapVue)
8's at the end:

$body-bg: #000;
$body-color: #111;


@import 'node_modules/bootstrap/scss/bootstrap.scss';
@import 'node_modules/bootstrap-vue/src/index.scss';

Sau đó nhập tệp

import Vue from 'vue'
import { BootstrapVue } from 'bootstrap-vue'

import './app.scss'

Vue.use(BootstrapVue)
5 đó vào dự án của bạn:

import Vue from 'vue'
import { BootstrapVue } from 'bootstrap-vue'

import './app.scss'

Vue.use(BootstrapVue)

Không nhập riêng các tệp SCSS riêng lẻ vào dự án của bạn, bởi vì các biến và chức năng sẽ không được chia sẻ giữa các tệp.

Để biết thông tin về bootstrap theo chủ đề, hãy xem phần tham chiếu theo chủ đề.

Nhập khẩu Vue Vue

Bootstrapvue và PortalVue yêu cầu truy cập vào tham chiếu toàn cầu ____70 (thông qua

const path = require('path')

module.exports = {
  chainWebpack: config => {
    config.resolve.alias.set(
      'vue$',
      
      path.resolve(__dirname, 'node_modules/vue/dist/vue.runtime.esm.js')
      
      
    )
  }
}
1).

Nếu bạn đang sử dụng một bản dựng Vue cụ thể (tức là chỉ chạy so với trình biên dịch + thời gian chạy), bạn sẽ cần thiết lập bí danh thành

const path = require('path')

module.exports = {
  chainWebpack: config => {
    config.resolve.alias.set(
      'vue$',
      
      path.resolve(__dirname, 'node_modules/vue/dist/vue.runtime.esm.js')
      
      
    )
  }
}
2 trong cấu hình Bundler của bạn để đảm bảo rằng dự án, bootstrapvue và portalvue của bạn đều sử dụng cùng một bản dựng Phiên bản của Vue. Nếu bạn đang thấy một lỗi như
const path = require('path')

module.exports = {
  chainWebpack: config => {
    config.resolve.alias.set(
      'vue$',
      
      path.resolve(__dirname, 'node_modules/vue/dist/vue.runtime.esm.js')
      
      
    )
  }
}
3 hoặc
const path = require('path')

module.exports = {
  chainWebpack: config => {
    config.resolve.alias.set(
      'vue$',
      
      path.resolve(__dirname, 'node_modules/vue/dist/vue.runtime.esm.js')
      
      
    )
  }
}
4, thì bạn sẽ cần phải thiết lập bí danh.

Ví dụ: Bí danh Vue cho Vue CLI trong

const path = require('path')

module.exports = {
  chainWebpack: config => {
    config.resolve.alias.set(
      'vue$',
      
      path.resolve(__dirname, 'node_modules/vue/dist/vue.runtime.esm.js')
      
      
    )
  }
}
5

const path = require('path')

module.exports = {
  chainWebpack: config => {
    config.resolve.alias.set(
      'vue$',
      
      path.resolve(__dirname, 'node_modules/vue/dist/vue.runtime.esm.js')
      
      
    )
  }
}

Ví dụ: Bí danh Vue trong

const path = require('path')

module.exports = {
  chainWebpack: config => {
    config.resolve.alias.set(
      'vue$',
      
      path.resolve(__dirname, 'node_modules/vue/dist/vue.runtime.esm.js')
      
      
    )
  }
}
6

module.exports = {
  
  resolve: {
    alias: {
      
      vue$: 'vue/dist/vue.runtime.esm.js' 
      
      
    }
  }
}

Lưu ý: Nếu dự án của bạn có nhiều tệp cấu hình webpack (tức là

const path = require('path')

module.exports = {
  chainWebpack: config => {
    config.resolve.alias.set(
      'vue$',
      
      path.resolve(__dirname, 'node_modules/vue/dist/vue.runtime.esm.js')
      
      
    )
  }
}
6,
const path = require('path')

module.exports = {
  chainWebpack: config => {
    config.resolve.alias.set(
      'vue$',
      
      path.resolve(__dirname, 'node_modules/vue/dist/vue.runtime.esm.js')
      
      
    )
  }
}
8,
const path = require('path')

module.exports = {
  chainWebpack: config => {
    config.resolve.alias.set(
      'vue$',
      
      path.resolve(__dirname, 'node_modules/vue/dist/vue.runtime.esm.js')
      
      
    )
  }
}
9,
module.exports = {
  
  resolve: {
    alias: {
      
      vue$: 'vue/dist/vue.runtime.esm.js' 
      
      
    }
  }
}
0,
module.exports = {
  
  resolve: {
    alias: {
      
      vue$: 'vue/dist/vue.runtime.esm.js' 
      
      
    }
  }
}
1, v.v.), bạn sẽ cần đặt bí danh thích hợp trong tất cả chúng.
If your project has multiple webpack config files (i.e.
const path = require('path')

module.exports = {
  chainWebpack: config => {
    config.resolve.alias.set(
      'vue$',
      
      path.resolve(__dirname, 'node_modules/vue/dist/vue.runtime.esm.js')
      
      
    )
  }
}
6,
const path = require('path')

module.exports = {
  chainWebpack: config => {
    config.resolve.alias.set(
      'vue$',
      
      path.resolve(__dirname, 'node_modules/vue/dist/vue.runtime.esm.js')
      
      
    )
  }
}
8,
const path = require('path')

module.exports = {
  chainWebpack: config => {
    config.resolve.alias.set(
      'vue$',
      
      path.resolve(__dirname, 'node_modules/vue/dist/vue.runtime.esm.js')
      
      
    )
  }
}
9,
module.exports = {
  
  resolve: {
    alias: {
      
      vue$: 'vue/dist/vue.runtime.esm.js' 
      
      
    }
  }
}
0,
module.exports = {
  
  resolve: {
    alias: {
      
      vue$: 'vue/dist/vue.runtime.esm.js' 
      
      
    }
  }
}
1, etc.), you will need to set the appropriate alias in all of them.

Xem Hướng dẫn Vue.js để biết chi tiết đầy đủ về việc thiết lập các bí danh cho Webpack, Rollup.js, Parcel, ETC.

Cách sử dụng Bundler mô -đun nâng cao

Hỗ trợ WebPack và bưu kiện chi tiêu các mô -đun

import Vue from 'vue'
import { BootstrapVue } from 'bootstrap-vue'

import './app.scss'

Vue.use(BootstrapVue)
5 với các đường dẫn Tilde (
module.exports = {
  
  resolve: {
    alias: {
      
      vue$: 'vue/dist/vue.runtime.esm.js' 
      
      
    }
  }
}
3) khi nhập từ tệp
import Vue from 'vue'
import { BootstrapVue } from 'bootstrap-vue'

import './app.scss'

Vue.use(BootstrapVue)
5:

@import '~bootstrap';
@import '~bootstrap-vue';

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
0

Để biết thêm chi tiết về cách định cấu hình tải tài sản và cách giải quyết các mô -đun, vui lòng tham khảo tài liệu của các gói mô -đun.

Notes::

  • Cấu hình webpack để tải tệp CSS (Hướng dẫn chính thức)
  • Trình tải webpack cho các tệp SASS/SCSS (Hướng dẫn chính thức)
  • Bưu kiện CSS (Hướng dẫn chính thức)
  • Parcel SCSS (Hướng dẫn chính thức)

Cây lắc với các gói mô -đun

Khi sử dụng Bundler mô -đun, bạn chỉ có thể nhập các nhóm thành phần cụ thể (plugin), các thành phần và/hoặc chỉ thị. Lưu ý rằng việc lắc cây chỉ áp dụng cho mã JavaScript và không phải CSS/SCSS.

LƯU Ý: Lắc cây tối ưu chỉ hoạt động khi WebPack 4 ở chế độ

module.exports = {
  
  resolve: {
    alias: {
      
      vue$: 'vue/dist/vue.runtime.esm.js' 
      
      
    }
  }
}
5 và Minifict JavaScript được bật. Optimal tree shaking only works when webpack 4 is in
module.exports = {
  
  resolve: {
    alias: {
      
      vue$: 'vue/dist/vue.runtime.esm.js' 
      
      
    }
  }
}
5 mode and javascript minification is enabled.

Các nhóm thành phần và chỉ thị dưới dạng các plugin Vue

Bạn có thể nhập các nhóm thành phần và chỉ thị dưới dạng các plugin Vue bằng cách nhập từ

module.exports = {
  
  resolve: {
    alias: {
      
      vue$: 'vue/dist/vue.runtime.esm.js' 
      
      
    }
  }
}
6:

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
1

Khi nhập dưới dạng plugin, tất cả các thành phần con và các chỉ thị liên quan được nhập trong hầu hết các trường hợp. tức là khi nhập

module.exports = {
  
  resolve: {
    alias: {
      
      vue$: 'vue/dist/vue.runtime.esm.js' 
      
      
    }
  }
}
7, tất cả các thành phần phụ
module.exports = {
  
  resolve: {
    alias: {
      
      vue$: 'vue/dist/vue.runtime.esm.js' 
      
      
    }
  }
}
8 cũng được bao gồm, cũng như tất cả các thành phần phụ thả xuống. Các bí danh tốc ký thành phần (nếu có) cũng được bao gồm trong plugin. Tham khảo tài liệu thành phần và chỉ thị để biết chi tiết.

Có hai plugin trợ giúp bổ sung để cung cấp các lần tiêm

module.exports = {
  
  resolve: {
    alias: {
      
      vue$: 'vue/dist/vue.runtime.esm.js' 
      
      
    }
  }
}
9 và
@import '~bootstrap';
@import '~bootstrap-vue';
0 (nếu bạn không sử dụng các plugin
@import '~bootstrap';
@import '~bootstrap-vue';
1 hoặc
@import '~bootstrap';
@import '~bootstrap-vue';
2) có sẵn để nhập từ
@import '~bootstrap';
@import '~bootstrap-vue';
3:

  • @import '~bootstrap';
    @import '~bootstrap-vue';
    4 - Cung cấp tiêm
    module.exports = {
      
      resolve: {
        alias: {
          
          vue$: 'vue/dist/vue.runtime.esm.js' 
          
          
        }
      }
    }
    9 để tạo hộp thông báo.
  • @import '~bootstrap';
    @import '~bootstrap-vue';
    6 - Cung cấp tiêm
    @import '~bootstrap';
    @import '~bootstrap-vue';
    0 để tạo ra bánh mì nướng theo yêu cầu.

Khi nhập nhiều plugin nhóm thành phần và/hoặc nhóm chỉ thị, bao gồm tất cả các nhập khẩu trong một câu lệnh

@import '~bootstrap';
@import '~bootstrap-vue';
8 để lắc cây tối ưu.

Các thành phần và chỉ thị riêng lẻ

Nếu bạn chỉ muốn kéo vào một thành phần hoặc tập hợp các thành phần cụ thể, bạn có thể làm điều này bằng cách nhập trực tiếp các thành phần đó.

Để chọn một thành phần/chỉ thị, hãy bắt đầu bằng cách nhập nó vào tệp nơi nó đang được sử dụng:

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
2

Sau đó, thêm nó vào định nghĩa thành phần của bạn:

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
3

Hoặc đăng ký chúng trên toàn cầu:

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
4

VUE cho phép các cú pháp tên thành phần và chỉ thị khác nhau ở đây, vì vậy hãy thoải mái sử dụng thùng Kebab (hiển thị), Camelcasing, Pascalcasing và/hoặc đối tượng Shorthand (chỉ các thành phần).

Sử dụng mã nguồn bootstrapvue cho các gói nhỏ hơn

Khi sử dụng các gói mô-đun, chúng thường sẽ mặc định sử dụng bản dựng mô-đun

@import '~bootstrap';
@import '~bootstrap-vue';
9, được Babel được truyền trước cho các trình duyệt được hỗ trợ của chúng tôi.

Bạn có thể ghi đè lên việc sử dụng bản dựng

@import '~bootstrap';
@import '~bootstrap-vue';
9 bằng phương đề
@import '~bootstrap';
@import '~bootstrap-vue';
3 để sử dụng các tệp nguồn bootstrapvue và danh sách trắng ____102 để chuyển đổi bởi quy trình xây dựng của bạn, trong cấu hình Bundler mô -đun của bạn. Điều này sẽ cho phép bạn chuyển đổi bootstrapvue cho các trình duyệt/môi trường mục tiêu của bạn và có khả năng giảm kích thước bó (và sẽ chỉ bao gồm các công cụ trợ giúp Babel một lần) với chi phí thời gian xây dựng dài hơn một chút.

Ví dụ Webpack.config.js cho việc chuyển đổi Babel:

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
5

Bạn có thể cần cài đặt

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
03,
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
04 và
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
05:

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6

Để biết thêm chi tiết, xem:

  • WebPack
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    06
  • WebPack
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    07
  • rollup.js
  • Bưu kiện

Mô -đun Nuxt.js

BootStrapVue cung cấp mô -đun Nuxt.js để dễ dàng nhập bootstrapvue (hoặc các phần của bootstrapvue) vào ứng dụng Nuxt.js của bạn.

Bắt đầu với Nuxt.js

Phiên bản nuxt.js

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
08 (hoặc lớn hơn) được khuyến nghị.

Cài đặt phụ thuộc:

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7

Thêm

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
09 vào phần mô -đun trong tệp
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
10 của bạn.
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
10
file.

Điều này sẽ bao gồm cả CSS được biên dịch sẵn

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
11 và
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
12.

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
8

Lưu ý rằng điều này sẽ không cài đặt các thành phần biểu tượng. Để xem làm thế nào để bao gồm các biểu tượng thông qua mô -đun Nuxt.js, hãy tham khảo phần biểu tượng bên dưới.not install the Icons components. To see how to include icons via the Nuxt.js module, refer to the Icons section below.

Sử dụng SCSS Bootstrap tùy chỉnh

Nếu bạn đang sử dụng SCSS Bootstrap tùy chỉnh, bạn có thể vô hiệu hóa việc bao gồm tự động các tệp CSS được biên dịch sẵn Bootstrap và BootstrapVue bằng cách đặt (các) tùy chọn sau thành

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
13:

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
9

SCSS tùy chỉnh của BootStrapVue dựa trên các biến và mixin của Bootstrap SCSS và bất kỳ sự ghi đè biến nào bạn có thể đã đặt. Bạn có thể bao gồm Bootstrap và Bootstrapvue SCSS trong tệp SCSS tùy chỉnh của dự án:

.selector-for-some-widget {
  box-sizing: content-box;
}
0

Trong ứng dụng của bạn, điểm nhập chính bao gồm tệp SCSS tùy chỉnh duy nhất (khi sử dụng

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
14):

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">15 với nuxt.js

Mô -đun plugin nuxt bootstrapvue sẽ tự động thêm vào hình ảnh cụ thể bootstrapvue

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
15
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
17 Cấu hình prop cho bạn.

Cây lắc với nuxt.js

Nếu bạn muốn giảm kích thước gói sản xuất của mình vì bạn chỉ sử dụng một tập hợp con của các plugin bootstrapvue có sẵn, bạn có thể định cấu hình danh sách bootstrapvue

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
18 hoặc
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
19 bạn muốn cài đặt toàn cầu trong dự án Nuxt.js của mình. Lưu ý Tree Shaking chỉ áp dụng cho mã JavaScript và không phải CSS/SCSS.

.selector-for-some-widget {
  box-sizing: content-box;
}
1

Có hai plugin trợ giúp bổ sung để cung cấp các lần tiêm

module.exports = {
  
  resolve: {
    alias: {
      
      vue$: 'vue/dist/vue.runtime.esm.js' 
      
      
    }
  }
}
9 và
@import '~bootstrap';
@import '~bootstrap-vue';
0 (nếu bạn không sử dụng các plugin
@import '~bootstrap';
@import '~bootstrap-vue';
1 hoặc
@import '~bootstrap';
@import '~bootstrap-vue';
2) có sẵn trong tùy chọn
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
18:

  • @import '~bootstrap';
    @import '~bootstrap-vue';
    4 - Cung cấp tiêm
    module.exports = {
      
      resolve: {
        alias: {
          
          vue$: 'vue/dist/vue.runtime.esm.js' 
          
          
        }
      }
    }
    9 để tạo hộp thông báo.
  • @import '~bootstrap';
    @import '~bootstrap-vue';
    6 - Cung cấp tiêm
    @import '~bootstrap';
    @import '~bootstrap-vue';
    0 để tạo ra bánh mì nướng theo yêu cầu.

Bạn cũng có thể nhập tùy ý nhập các thành phần và/hoặc chỉ thị riêng lẻ, bằng cách định cấu hình danh sách bootstrapvue

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
29 hoặc
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
30 bạn muốn cài đặt toàn cầu trong dự án Nuxt.js của mình.

.selector-for-some-widget {
  box-sizing: content-box;
}
2

Hãy thoải mái trộn và kết hợp nhập khẩu plugin với các thành phần riêng lẻ và nhập khẩu chỉ thị.

Tham khảo phần tham chiếu ở dưới cùng của mỗi tài liệu thành phần và chỉ thị để biết chi tiết về tên plugin có sẵn (và các thành phần và chỉ thị nào được bao gồm trong mỗi plugin) và thành phần và/hoặc tên nhập chỉ thị.

Lưu ý rằng khi nhập các thành phần riêng lẻ, bất kỳ bí danh thành phần sẽ không có sẵn.not be available.

LƯU Ý: Lắc cây tối ưu chỉ hoạt động khi ứng dụng Nuxt.js của bạn ở chế độ

module.exports = {
  
  resolve: {
    alias: {
      
      vue$: 'vue/dist/vue.runtime.esm.js' 
      
      
    }
  }
}
5. Bạn có thể nhận thấy kích thước gói lớn hơn khi không ở chế độ
module.exports = {
  
  resolve: {
    alias: {
      
      vue$: 'vue/dist/vue.runtime.esm.js' 
      
      
    }
  }
}
5 (tức là chế độ
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
33).
Optimal tree shaking only works when your Nuxt.js app is in
module.exports = {
  
  resolve: {
    alias: {
      
      vue$: 'vue/dist/vue.runtime.esm.js' 
      
      
    }
  }
}
5 mode. You may notice larger bundle sizes when not in
module.exports = {
  
  resolve: {
    alias: {
      
      vue$: 'vue/dist/vue.runtime.esm.js' 
      
      
    }
  }
}
5 mode (i.e.
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
33 mode).

Nếu bạn muốn nhập các thành phần bootstrapvue riêng lẻ vào các trang cụ thể và/hoặc các thành phần của ứng dụng Nuxt của bạn, bạn có thể muốn bỏ qua mô -đun Nuxt.js và thay vào đó, hãy theo các gói mô -đun và lắc cây với các phần của các gói mô -đun ở trên. Ngoài ra, bạn có thể muốn chỉ nhập một vài plugin (chẳng hạn như

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
34) trong cấu hình mô -đun nuxt.js của bạn, sau đó nhập các thành phần hoặc plugin bổ sung trong các trang khi cần.

Biểu tượng

Plugin biểu tượng không được tự động cài đặt khi sử dụng mô -đun Nuxt.js. Bạn phải kích hoạt rõ ràng

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
35 hoặc chỉ định các thành phần biểu tượng nào bạn muốn nhập.not automatically installed when using the Nuxt.js module. You must either explicitly enable the
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
35, or specify which icon components you wish to import.

Tất cả các biểu tượng:

.selector-for-some-widget {
  box-sizing: content-box;
}
3

Biểu tượng cụ thể:

.selector-for-some-widget {
  box-sizing: content-box;
}
4

Plugin biểu tượng:

.selector-for-some-widget {
  box-sizing: content-box;
}
5

Vượt qua cấu hình bootstrapvue tùy chỉnh với nuxt.js

Nếu bạn cần vượt qua cấu hình Bootstrapvue tùy chỉnh, bạn có thể làm như vậy bằng cách đặt thuộc tính

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
36 trong
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
10 của bạn:

.selector-for-some-widget {
  box-sizing: content-box;
}
6

Sử dụng phiên bản trước của bootstrapvue cho nuxt.js

Mô-đun Nuxt.js sử dụng các phiên bản bootstrapvue được transpvue trước để xây dựng phát triển nhanh hơn và nguồn (

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
38) của bootstrapvue cho các bản dựng sản xuất chất lượng cao hơn và nhỏ hơn.

Bạn có thể ghi đè tùy chọn này bằng tùy chọn

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
39. Cài đặt thành
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
40 luôn sử dụng các phiên bản được giao dịch trước, trong khi đặt nó thành
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
13 sẽ luôn sử dụng
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
38. Theo mặc định,
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
39 chỉ được kích hoạt trong chế độ phát triển. Bạn không cần phải sử dụng tùy chọn này vì mặc định là tối ưu nhất cho hiệu suất.

Vue cli 3

Không giống như V2, Vue CLI 3 không sử dụng các mẫu.

Tạo một dự án mới trong thư mục

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
44:

.selector-for-some-widget {
  box-sizing: content-box;
}
7

Nhập thư mục

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
44 và cài đặt
module.exports = {
  
  resolve: {
    alias: {
      
      vue$: 'vue/dist/vue.runtime.esm.js' 
      
      
    }
  }
}
6:

.selector-for-some-widget {
  box-sizing: content-box;
}
8

Dưới mui xe, Vue CLI sử dụng webpack, vì vậy chúng tôi có thể đăng ký plugin Bootstrapvue như với các hướng dẫn webpack.

.selector-for-some-widget {
  box-sizing: content-box;
}
9

Để biết cấu hình bổ sung cho Vue CLI 3 để sử dụng các đường dẫn tương đối dự án cho các đạo cụ SRC hình ảnh trên các thành phần bootstrapvue khác nhau, hãy tham khảo phần Vue CLI 3 của trang tham chiếu giải quyết hình ảnh SRC.

Plugin Vue CLI 3

Thay vào đó, bạn có thể sử dụng plugin Bootstrap-Vue Vue CLI 3 để giúp bạn định cấu hình ứng dụng của mình.

npm install vue bootstrap bootstrap-vue


yarn add vue bootstrap bootstrap-vue
0

Điều này sẽ tạo ra một ứng dụng mới với các cài đặt bootstrapvue cơ bản để bắt đầu dự án của bạn.

Trong tương lai plugin này sẽ cung cấp các tùy chọn cho các cấu hình và mẫu nâng cao hơn.

Đối với hỗ trợ biểu tượng, bạn có thể cần chỉnh sửa tệp cấu hình kết quả.

Trình duyệt

Nếu không sử dụng quy trình Bundler hoặc biên dịch mô -đun, thay vào đó, bạn có thể thêm URL CSS Bootstrap và Bootstrapvue vào phần HTML

$body-bg: #000;
$body-color: #111;


@import 'node_modules/bootstrap/scss/bootstrap.scss';
@import 'node_modules/bootstrap-vue/src/index.scss';
1 của bạn, theo sau là các tệp JavaScript cần thiết.

Khi hỗ trợ các trình duyệt cũ hơn (xem hỗ trợ trình duyệt bên dưới), bạn sẽ cần bao gồm một polyfill để xử lý các tính năng JavaScript hiện đại trước khi tải các tệp JavaScript Vue và Bootstrapvue.

npm install vue bootstrap bootstrap-vue


yarn add vue bootstrap bootstrap-vue
1

Xây dựng các biến thể

Chọn biến thể tốt nhất cho môi trường xây dựng / gói của bạn giúp giảm kích thước gói. Nếu Bundler của bạn hỗ trợ các mô -đun ESM, nó sẽ tự động thích nó hơn CommonJS.

Khác nhauMôi trườngCây lắcĐường dẫn gói
Mô -đun ESM Webpack 2+ / rollup.jsĐúng
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
48
Gói ESMWebpack 2+ / rollup.jsĐúng
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
48
Gói ESM
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
49
CommonJS2Webpack 1 / ...
Không
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
50 hoặc
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
51
CommonJS2Webpack 1 / ...

Khôngdoes not include BootstrapVue icons support. All other variants listed above do include the

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
54 (
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
35) plugin (note the icons plugin is not automatically installed, and must explicitly installed via
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
56. See the Icons usage section for more details.

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
50 hoặc
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
51

Khác nhauMôi trườngCây lắcĐường dẫn gói
Mô -đun ESM Webpack 2+ / rollup.jsĐúng
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
48
Gói ESM
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
49
CommonJS2Webpack 1 / ...
Không
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
50 hoặc
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
51
CommonJS2Webpack 1 / ...

Không

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
50 hoặc
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
51

UMD

Trình duyệt

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">52 hoặc <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">53

Lưu ý biến thể UMD (Trình duyệt) không bao gồm hỗ trợ biểu tượng bootstrapvue. Tất cả các biến thể khác được liệt kê ở trên đều bao gồm plugin

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
54 (
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
35) (lưu ý plugin biểu tượng không được tự động cài đặt và phải cài đặt rõ ràng qua
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
56. Xem phần sử dụng biểu tượng để biết thêm chi tiết.

  • Các biểu tượng chỉ mô -đun:
  • Gói ESMdoes not depend on
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    77
  • <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    57
  • <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    58 hoặc
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    59

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">60 hoặc <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">61

Bản dựng mô-đun <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">62 và các gói <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">62 (tệp đơn) có thể có được cây, nhưng bạn sẽ trải nghiệm các kích thước gói cuối cùng nhỏ hơn khi sử dụng mô-đun <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">62 so với gói <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">62.

Tất cả các biến thể xây dựng được liệt kê ở trên đã được giao dịch trước nhắm mục tiêu các trình duyệt được hỗ trợ bởi bootstrapvue. Tuy nhiên, nếu bạn chỉ nhắm mục tiêu các trình duyệt hiện đại, bạn có thể muốn nhập

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
66 từ
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
67, (bằng phương đề
module.exports = {
  
  resolve: {
    alias: {
      
      vue$: 'vue/dist/vue.runtime.esm.js' 
      
      
    }
  }
}
6 đến
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
69) và liệt kê trắng
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
70 để chuyển đổi thông qua dự án của riêng bạn. Điều này có khả năng làm giảm kích thước gói dự án cuối cùng. Xem bằng cách sử dụng mã nguồn bootstrapvue cho phần các gói nhỏ hơn ở trên để biết thêm chi tiết.

Phụ thuộc

Bootstrapvue dựa trên

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
71 (đối với định vị công cụ, popover và thả xuống),
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
72 (cho bánh mì nướng) và
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
73 (được sử dụng bởi các thành phần chức năng của chúng tôi). Ba phụ thuộc này được bao gồm trong gói bootstrapvue
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
74, trong khi các biểu tượng UMD (Trình duyệt) chỉ bao gồm
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
73. Tất cả các bản dựng khác không bao gồm các phụ thuộc này.

Di chuyển một dự án đã sử dụng bootstrap

  • Nếu bạn đã sử dụng Bootstrap V4, có một vài điều chỉnh bạn có thể cần thực hiện cho dự án của mình:
  • <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    83
  • <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    84
  • Xóa tệp
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    76 khỏi các tập lệnh trang của bạn hoặc xây dựng đường ống

Nếu bootstrap là thứ duy nhất dựa vào

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
77, bạn có thể loại bỏ nó một cách an toàn - bootstrapvue không phụ thuộc vào
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
77

npm install vue bootstrap bootstrap-vue


yarn add vue bootstrap bootstrap-vue
2

Chuyển đổi đánh dấu html bootstrap gốc của bạn thành đánh dấu thành phần tùy chỉnh bootstrapvue đơn giản

npm install vue bootstrap bootstrap-vue


yarn add vue bootstrap bootstrap-vue
3

Bắt đầu bằng cách chỉ chuyển đổi các điều khiển tương tác yêu cầu JavaScript của Bootstrap trước tiên.

npm install vue bootstrap bootstrap-vue


yarn add vue bootstrap bootstrap-vue
4

Chuyển đổi đánh dấu html bootstrap gốc của bạn thành đánh dấu thành phần tùy chỉnh bootstrapvue đơn giản

npm install vue bootstrap bootstrap-vue


yarn add vue bootstrap bootstrap-vue
5

Bắt đầu bằng cách chỉ chuyển đổi các điều khiển tương tác yêu cầu JavaScript của Bootstrap trước tiên.

Hỗ trợ trình duyệt

CSS

Bootstrapvue sẽ được sử dụng với Bootstrap v4.6 CSS/SCSS. Vui lòng xem trình duyệt và thiết bị để biết thêm thông tin về trình duyệt hiện được hỗ trợ bởi Bootstrap V4.

JS

Bootstrapvue được viết bằng Vue.js! Vì vậy, tùy thuộc vào dự án của bạn và Bundler mà các trình duyệt được hỗ trợ.

Tải thêm tài liệu liên quan đến bài viết Hướng dẫn install bootstrap-vue - cài đặt bootstrap-vue