Detailed tutorial (steps) for introducing bootstrap into vue

This article brings you a detailed tutorial (steps) on introducing bootstrap into vue. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

If you want to introduce bootstrap into vue, you need to follow the following steps when introducing it.

1. Introduce jquery

2. Introduce bootstrap (Related free video course recommendations: bootstrap tutorial)

Before reading this article, you should be able to set up the environment , use vue-cli to create projects, you can refer to the article:

http://www.php.cn/js-tutorial-411565.html

Okay, let’s proceed goods.

1. First, create a new vue project according to the content in the above article.

2. Use the command npm install jquery --save-dev to introduce jquery.

3. Add the following content to webpack.base.conf.js:

var webpack = require('webpack')

and

// 增加一个
pluginsplugins: [  
new webpack.ProvidePlugin({    
$: "jquery",    
jQuery: "jquery"  
})],

After the addition is completed, the file content is as follows:

var path = require('path')
var fs = require('fs')
var utils = require('./utils')
var config = require('../config')
var vueLoaderConfig = require('./vue-loader.conf')
function resolve(dir) {
  return fs.realpathSync(__dirname + '/' + path.join('..', dir))
}
module.exports = {
  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'),
    },
    symlinks: false
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test')]
      },
      {
        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|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }
    ]
  },
  // 增加一个plugins
  plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery"
    })
  ],
}

4. Add content in main.js

import $ from 'jquery'

After the addition is completed, you can try whether jquery is easy to use in home.vue.

5. Modify the content of home.vue. One is to try to add the bootstrap code, and the other is to verify the jquery code

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <ul>
      <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
      <li><a href="https://chat.vuejs.org" target="_blank">Community Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
      <br>
      <li><a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This Template</a></li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
      <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
      <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
    </ul>
    <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>
    <div id="cc">cc</div>
  </div>
</template>
 
<script>
  $(function () {
    alert(123);
  });
  export default {
    name: &#39;hello&#39;,
    data () {
      return {
        msg: &#39;Welcome to Your Vue.js App&#39;
      }
    }
  }
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  h1, h2 {
    font-weight: normal;
  }
 
  ul {
    list-style-type: none;
    padding: 0;
  }
 
  li {
    display: inline-block;
    margin: 0 10px;
  }
 
  a {
    color: #42b983;
  }
</style>

This way, After using npm run dev, you can see it on the interface and an alert pops up, which proves that jquery was successfully introduced.

6. To install bootstrap, use the command npm install bootstrap --save-dev

7. After successful installation, you can see the bootstrap module in the package.json folder. At this time, you need to add the following content to main.js:

import 'bootstrap/dist/css/bootstrap.min.css'import 'bootstrap/dist/js/bootstrap.min'

After the addition is completed, restart the program and npm run dev. You can see that the buttons in the interface are already bootstrap button groups.

Finally, attach the contents of the entire main.js file:

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import $ from 'jquery'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '',
  components: {App}
})

The above is the detailed content of Detailed tutorial (steps) for introducing bootstrap into vue. For more information, please follow other related articles on the PHP Chinese website!