How to use Bootstrap in Vue projects

This article focuses on "how to use Bootstrap in the Vue project". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Now let the editor take you to learn how to use Bootstrap in Vue projects.

First, install jQuery

Bootstrap depends on jQuery, so reference jQuery before referencing Bootstrap, and use the following command to reference jQuery:

Npm install jquery-- save Note: if you want to see which versions of jquery are available on npm, you can execute the command: npm view jquery versions

Second, introduce Bootstrap1 and use command to install

You can install it using the following command:

Npm install bootstrap-save

2. Download the Bootstrap file

Go directly to Bootstrap to download the bootstrap package, and put the downloaded files in the src/assets directory:

Third, configure to use jQuery1 and add webpack

Add the following code at the top of the build/webpack.base.conf.js file:

Const webpack=require ("webpack") 2. Modify webpack.base.conf.js

In the build/webpack.base.conf.js file, add the plugins configuration at the end of the entire configuration object:

/ / configure global use of jqueryplugins: [new webpack.ProvidePlugin ({$: "jquery", jQuery: "jquery", jquery: "jquery", "window.jQuery": "jquery"})]

The complete code of build/webpack.base.conf.js is as follows:

'use strict'const path = require (' path') const utils = require ('. / utils') const config = require ('.. / config') const vueLoaderConfig = require ('. / vue-loader.conf') const webpack=require ("webpack") function resolve (dir) {return path.join (_ dirname,'., dir)} / / const createLintingRule = () = > ({/ / test: /\. (js | vue) $/, / loader: 'eslint-loader',// enforce:' pre' / / include: [resolve ('src'), resolve (' test')], / / options: {/ / formatter: require ('eslint-friendly-formatter'), / / emitWarning:! config.dev.showEslintErrorsInOverlay//} / /}) module.exports = {context: path.resolve (_ _ dirname,'.. /'), entry: {app:'. / src/main.js'}, output: {path: config.build.assetsRoot Filename:'[name] .js', publicPath: process.env.NODE_ENV = = 'production'? Config.build.assetsPublicPath: config.dev.assetsPublicPath}, resolve: {extensions: ['.js', '.vue', '.json'], alias: {'vue$':' vue/dist/vue.esm.js','@': resolve ('src')} Module: {rules: [/ / turn off eslint coding specification verification / /... (config.dev.useEslint? [createLintingRule ()]: []), {test: /\ .vue $/, loader: 'vue-loader', options: vueLoaderConfig}, {test: /\ .js $/, loader:' babel-loader', include: [resolve ('src'), resolve (' test'), resolve ('node_modules/webpack-dev-server/client')]} {test: /\. (png | jpe?g | gif | svg) (\?. *)? $/, loader: 'url-loader', options: {limit: 10000, name: utils.assetsPath (' img/ [name]. [hash: 7]. [ext]')}}, {test: /\. (mp4 | webm | ogg | mp3 | wav | flac | aac) (\?. *)? $/ Loader: 'url-loader', options: {limit: 10000, name: utils.assetsPath (' media/ [name]. [hash: 7]. [ext]')}, {test: /\. (woff2 | eot | otf) (\?. *)? $/, loader: 'url-loader', options: {limit: 10000 Name: utils.assetsPath ('fonts/ [name]. [hash: 7]. [ext]')}}, node: {/ / prevent webpack from injecting useless setImmediate polyfill because Vue / / source contains it (although only uses it if it's native). SetImmediate: false, / / prevent webpack from injecting mocks to Node native modules / / that does not make sense for the client dgram: 'empty', fs:' empty', net: 'empty', tls:' empty', child_process: 'empty'}, / / configure global use of jquery plugins: [new webpack.ProvidePlugin ({$: "jquery", jQuery: "jquery", jquery: "jquery" "window.jQuery": "jquery"})} IV. Quote / / introduce jQueryimport $from 'jquery'// reference bootstrapimport'. / assets/bootstrap-3.3.7-dist/css/bootstrap.css'import'. / assets/bootstrap-3.3.7-dist/js/bootstrap.js' 5. Test button in main.js

Export default {name: "test",}

Running effect:

At this point, I believe you have a deeper understanding of "how to use Bootstrap in Vue projects". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!