Home  >  Article  >  Web Front-end  >  Can vue use bootstrap?

Can vue use bootstrap?

angryTom
angryTomOriginal
2019-07-29 09:36:326437browse

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 &#39;./node_modules/bootstrap/dist/css/bootstrap.min.css&#39;;
import &#39;./node_modules/bootstrap/dist/js/bootstrap.min.js&#39;;

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

Can vue use bootstrap?

The above is the detailed content of Can vue use bootstrap?. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article:Is bootstrap responsive?Next article:Is bootstrap responsive?