How vue-cli introduces the bootstrap tool

This article mainly introduces how vue-cli introduces the bootstrap tool. The editor thinks it is quite good. Now I will share the js with you and give it as a reference. If you are interested in js, please follow the editor to take a look.

This article introduces how vue-cli introduces the bootstrap tool. Share it with everyone and leave a note for yourself.

The following operations are based on the normal installation of the node environment.

1. Introduce jq:

In the npm console, enter the project directory, and then enter the command npm install jquery --save-dev (it is better to replace npm with cnpm , using cnpm to download faster in domestic environment).

2. Modify webpack.base.conf.jsConfiguration file in the build directory:

1) Add webpackobject: var webpack=require('webpack');

2) Add the following configuration to module.exports:

plugins: [ 

 　　　　new webpack.ProvidePlugin({ 

 　　　　　　$:"jquery", 

　　　　　　 jQuery:"jquery", 

　　　　　　 "windows.jQuery":"jquery" 

　　　　 }) 

　　]

3) Add in entry filemain.js: import jquery from 'jquery'

3.Introduce bootstrap:

1) Modify the webpack.base.conf.js file:

alias: { 

　　　　 'vue$': 'vue/dist/vue.esm.js', 

　　　　 '@': resolve('src'), 

　　　　 'assets': path.resolve(dirname, '../src/assets'), 

　　　　 'jquery': "jquery/src/jquery" 

　　 }

2) Add:

　　import './assets/css/bootstrap.min.css' 
　　import './assets/js/bootstrap.min'

to the entry file main.js 3) Copy various bootstrap files in the assets file directory:

The above is the entire content of this article. I hope it will be helpful to everyone's study, and I also hope that everyone will support the PHP Chinese website.

Related recommendations:

Detailed explanation of JS function throttling and anti-shake examples

How to implement modularization in JS

JS simple implementation of sliding loading data instance sharing

The above is the detailed content of How vue-cli introduces the bootstrap tool. For more information, please follow other related articles on the PHP Chinese website!