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

• Các tính năng và API sau đây được sử dụng bởi bootstrapvue:
• ES6 [ví dụ:
  79,
  80,
  81,
  82, v.v.]

• 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]

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]

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]

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]

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]

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';

  ...

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';

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


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

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';

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


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

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


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

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


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

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';

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


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

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


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

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


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

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]

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

import './app.scss'

Vue.use[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]

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

import './app.scss'

Vue.use[BootstrapVue]

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]

Tạo tệp

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

import './app.scss'

Vue.use[BootstrapVue]

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

import './app.scss'

Vue.use[BootstrapVue]

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

import './app.scss'

Vue.use[BootstrapVue]

$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]

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']
      
      
    ]
  }
}

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']
      
      
    ]
  }
}

const path = require['path']

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

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 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']
      
      
    ]
  }
}

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']
      
      
    ]
  }
}

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']
      
      
    ]
  }
}

const path = require['path']

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

const path = require['path']

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

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

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

const path = require['path']

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

const path = require['path']

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

const path = require['path']

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

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

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

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]

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

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

import './app.scss'

Vue.use[BootstrapVue]

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

Để 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' 
      
      
    }
  }
}

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

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' 
      
      
    }
  }
}

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' 
      
      
    }
  }
}

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

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' 
      
      
    }
  }
}

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

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

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

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

• @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';

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:

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

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

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';

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

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

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

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

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

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

• WebPack
  06
• WebPack
  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

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

Thêm

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

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

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;
}

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

15 với nuxt.js

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

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

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

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' 
      
      
    }
  }
}

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

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

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

• @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

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

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' 
      
      
    }
  }
}

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

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

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

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ư

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

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

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

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

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

Plugin biểu tượng:

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

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

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

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 [

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

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

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

Nhập thư mục

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

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

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;
}

Để 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

Đ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';

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

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ôngdoes not include BootstrapVue icons support. All other variants listed above do include the

Không

UMD

Trình duyệt

52 hoặc

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

• Các biểu tượng chỉ mô -đun:
• Gói ESMdoes not depend on
  77

• 57

• 58 hoặc
  59

60 hoặc

61

Bản dựng mô-đun

62 và các gói

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

62 so với gói

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

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

Phụ thuộc

Bootstrapvue dựa trên

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:

• 83

• 84
• Xóa tệp
  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

npm install vue bootstrap bootstrap-vue


yarn add vue bootstrap bootstrap-vue

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

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

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

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ợ.