Home >Web Front-end >Vue.js >Introduction to the method of introducing bootstrap in Vue cli3
This article introduces the method of introducing bootstrap in Vue cli3. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.
Related recommendations: "vue.js tutorial", "bootstrap tutorial"
in vue project To introduce bootstrap, you must first introduce two dependencies: jQuery and popper
The installation command is as follows:
cnpm install bootstrap --save-dev cnpm install jquery --save-dev cnpm install popper.js --save-dev
The latest version is installed by default. If you want to install the V3 version of bootstrap (depends on less), you can:
cnpm install bootstrap@3 --save-dev
Or, use visual window installation
1. Find: Project > Dependencies > Install Dependencies > Run Dependencies
Search and install jquery and popper.js
2. Find: Project > Dependencies > Install Dependencies > Development Depend on
Search and install bootstrap
In the main.js page, write the following code
// 引入jQuery、bootstrap import $ from 'jquery' import 'bootstrap' // 引入bootstrap样式 import 'bootstrap/dist/css/bootstrap.min.css' import 'bootstrap/dist/js/bootstrap.min.js' // 全局注册 $ Vue.prototype.$ = $
In vue.config.js, write the following code (if there is no vue.config.js, create it manually in the directory of the same level as package.json)
const webpack = require("webpack") module.exports = { // 配置插件参数 configureWebpack: { plugins: [ // 配置 jQuery 插件的参数 new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquery', Popper: ['popper.js', 'default'] }) ] } }
Then, you can use it
Test bootstrap
<template> <div class="container"> <div class="row"> <div class="col-md-6"> <button class="btn btn-primary">测试按钮</button> </div> </div> </div> </template>
For more programming-related knowledge, please visit: Programming Teaching! !
The above is the detailed content of Introduction to the method of introducing bootstrap in Vue cli3. For more information, please follow other related articles on the PHP Chinese website!