Detailliertes Tutorial (Schritte) zur Einführung von Bootstrap in Vue

Dieser Artikel bietet Ihnen ein detailliertes Tutorial (Schritte) zur Einführung von Bootstrap in Vue. Ich hoffe, dass es für Freunde hilfreich ist.

Wenn Sie Bootstrap in Vue einführen möchten, müssen Sie bei der Einführung die folgenden Schritte ausführen.

1. Einführung in jquery

2. Einführung in Bootstrap (empfohlene kostenlose Videokurse: Bootstrap-Tutorial)

Bevor Sie diesen Artikel lesen, sollten Sie in der Lage sein Um die Umgebung einzurichten, verwenden Sie vue-cli, um Projekte zu erstellen. Weitere Informationen finden Sie im Artikel:

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

Okay, lasst uns fortfahren.

1. Erstellen Sie zunächst ein neues Vue-Projekt gemäß dem Inhalt des obigen Artikels.

2. Verwenden Sie den Befehl npm install jquery --save-dev, um jquery einzuführen.

3. Fügen Sie den folgenden Inhalt zu webpack.base.conf.js hinzu:

var webpack = require('webpack')

und

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

Nach Abschluss des Hinzufügens lautet der Dateiinhalt wie folgt:

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. Fügen Sie Inhalte in main.js hinzu

import $ from 'jquery'

Nachdem das Hinzufügen abgeschlossen ist, können Sie versuchen, ob jquery zu Hause einfach zu verwenden ist .vue.

5. Ändern Sie den Inhalt von home.vue, und versuchen Sie zum anderen, den JQuery-Code hinzuzufügen

<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>

Auf diese Weise können Sie es nach der Verwendung von npm run dev auf der Benutzeroberfläche sehen und eine Warnung wird angezeigt, die beweist, dass jquery erfolgreich eingeführt wurde.

6. Um Bootstrap zu installieren, verwenden Sie den Befehl npm install bootstrap --save-dev

7. Nach erfolgreicher Installation sehen Sie das Bootstrap-Modul im Ordner package.json. Zu diesem Zeitpunkt müssen Sie den folgenden Inhalt zu main.js hinzufügen:

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

Nachdem das Hinzufügen abgeschlossen ist, starten Sie das Programm neu und führen Sie npm dev aus. Sie können sehen, dass die Schaltflächen in der Benutzeroberfläche bereits Bootstrap-Schaltflächengruppen sind.

Fügen Sie abschließend den Inhalt der gesamten main.js-Datei hinzu:

// 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}
})

Das obige ist der detaillierte Inhalt vonDetailliertes Tutorial (Schritte) zur Einführung von Bootstrap in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!