How to use bootstrap in vue

This article is about how to use bootstrap in vue. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

I. introduction of jquery

Steps:

1. Install jquery

$npm install jquery-save-dev

2. Add content to webpack.config.js

+ const webpack = require ("webpack") Module.exports = {entry:'. / index.js', output: {path: path.join (_ _ dirname,'. / dist'), publicPath:'/ dist/', filename: 'index.js'}, + plugins: [new webpack.ProvidePlugin ({jQuery:' jquery', $: 'jquery'})]}

3. Add content to the entry file index.js

Import $from 'jquery'

4. Test whether the installation is successful and see if the '123' can be popped up.

Hello world! $(function () {alert (123);}); export default {}

Second, introduce Bootstrap

1. Install Bootstrap

$npm install-save-dev bootstrap

2. Introduce relevant information into the entry file index.js

Import'. / node_modules/bootstrap/dist/css/bootstrap.min.css';import'. / node_modules/bootstrap/dist/js/bootstrap.min.js'

3. Add a piece of Bootstrap code

Left Middle Right

4. Run to see the effect these buttons have become Bootstrap button groups

Thank you for reading! This is the end of this article on "how to use bootstrap in vue". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!