How to introduce bootstrap in vue

Two ways to introduce Bootstrap in Vue: Using CDN: Add CSS links to HTML headers, Bootstrap will be automatically applied to all components. Using npm: Install the Bootstrap package and import Bootstrap and jQuery in the Vue file using the import statement.

How to introduce Bootstrap in Vue

There are two main ways to introduce Bootstrap in Vue:

Method 1: Use CDN

1. Add the following link to the HTML header:

 <code class="html"><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"></code>

2. Bootstrap is automatically applied to all components.

Method 2: Use npm

1. Install the Bootstrap package using npm :

 <code class="bash">npm install bootstrap</code>

2. In a Vue file, import Bootstrap using the import statement:

 <code class="javascript">import 'bootstrap';</code>

3. Since Bootstrap relies on jQuery, you also need to import jQuery in the Vue file:

 <code class="javascript">import 'jquery';</code>

Expand in detail

• CDN Method : This method is simple and fast and suitable for rapid prototyping or small projects.
• npm method : This method is more suitable for large projects because it allows versioning and customization of Bootstrap.

Notice:

• Bootstrap version 5.2.3 and above are installed using npm install bootstrap@5.2.3 .
• If you are using old version of Bootstrap (5.1.3 and below), use npm install bootstrap@5.1.3 for installation.

The above is the detailed content of How to introduce bootstrap in vue. For more information, please follow other related articles on the PHP Chinese website!