Home >Web Front-end >Bootstrap Tutorial >Can vue use bootstrap?
If you want to know more about bootstrap, you can click: bootstrap tutorial
1. Introduction of jquery
## Steps:
1. Installation jquery
$ npm install jquery --save-dev
2. Add content in 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 in entry file index.js Content
import $ from 'jquery' ;
4. Test whether the installation is successful and see if '123' pops up
<template> <div> Hello world! </div> </template> <script> $(function () { alert(123); }); export default { }; </script> <style> </style>
2. Introduction of Bootstrap
1. Install Bootstrap
$ npm install --save-dev bootstrap
2. Introduce the relevant
import './node_modules/bootstrap/dist/css/bootstrap.min.css'; import './node_modules/bootstrap/dist/js/bootstrap.min.js';
in the entry file index.js 3. Add a piece of Bootstrap code
<div class="btn-group" role="group" aria-label="..."> <button type="button" class="btn btn-default">Left</button> <button type="button" class="btn btn-default">Middle</button> <button type="button" class="btn btn-default">Right</button> </div>
4. Run and check the effect. The button has become a Bootstrap button group
The above is the detailed content of Can vue use bootstrap?. For more information, please follow other related articles on the PHP Chinese website!