Tutoriel détaillé (étapes) pour introduire le bootstrap dans vue-js tutoriel-php.cn

Tutoriel détaillé (étapes) pour introduire le bootstrap dans vue

不言

Libérer： 2018-10-13 16:07:48

avant

10114 Les gens l'ont consulté

Ce que cet article vous apporte est un tutoriel détaillé (étapes) sur l'introduction du bootstrap dans Vue. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Si vous souhaitez introduire bootstrap dans vue, vous devez suivre les étapes suivantes lors de son introduction.

1. Présentez jquery

2. Présentez le bootstrap (cours vidéo gratuits recommandés : tutoriel bootstrap)

Avant de lire cet article, vous devriez pouvoir pour configurer l'environnement, utilisez vue-cli pour créer des projets, vous pouvez vous référer à l'article :

//m.sbmmt.com/js-tutorial-411565.html

D'accord, passons aux marchandises.

1. Tout d'abord, créez un nouveau projet vue selon le contenu de l'article ci-dessus.

2. Utilisez la commande npm install jquery --save-dev pour introduire jquery.

3. Ajoutez le contenu suivant à webpack.base.conf.js :

var webpack = require(&#39;webpack&#39;)

Copier après la connexion

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

Copier après la connexion

Une fois l'ajout terminé, le contenu du fichier est comme suit :

var path = require(&#39;path&#39;)
var fs = require(&#39;fs&#39;)
var utils = require(&#39;./utils&#39;)
var config = require(&#39;../config&#39;)
var vueLoaderConfig = require(&#39;./vue-loader.conf&#39;)
function resolve(dir) {
  return fs.realpathSync(__dirname + &#39;/&#39; + path.join(&#39;..&#39;, dir))
}
module.exports = {
  entry: {
    app: &#39;./src/main.js&#39;
  },
  output: {
    path: config.build.assetsRoot,
    filename: &#39;[name].js&#39;,
    publicPath: process.env.NODE_ENV === &#39;production&#39;
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
  resolve: {
    extensions: [&#39;.js&#39;, &#39;.vue&#39;, &#39;.json&#39;],
    alias: {
      &#39;vue$&#39;: &#39;vue/dist/vue.esm.js&#39;,
      &#39;@&#39;: resolve(&#39;src&#39;),
    },
    symlinks: false
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: &#39;vue-loader&#39;,
        options: vueLoaderConfig
      },
      {
        test: /\.js$/,
        loader: &#39;babel-loader&#39;,
        include: [resolve(&#39;src&#39;), resolve(&#39;test&#39;)]
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: &#39;url-loader&#39;,
        options: {
          limit: 10000,
          name: utils.assetsPath(&#39;img/[name].[hash:7].[ext]&#39;)
        }
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: &#39;url-loader&#39;,
        options: {
          limit: 10000,
          name: utils.assetsPath(&#39;media/[name].[hash:7].[ext]&#39;)
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: &#39;url-loader&#39;,
        options: {
          limit: 10000,
          name: utils.assetsPath(&#39;fonts/[name].[hash:7].[ext]&#39;)
        }
      }
    ]
  },
  // 增加一个plugins
  plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery"
    })
  ],
}

Copier après la connexion

4. Ajouter du contenu dans main.js

import $ from &#39;jquery&#39;

Copier après la connexion

Une fois l'ajout terminé, vous pouvez essayer jquery dans home.vue Facile à utiliser.

5. Modifier le contenu de home.vue L'une consiste à essayer d'ajouter le code bootstrap, et l'autre consiste à vérifier le code jquery

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

Copier après la connexion

De cette façon, après avoir utilisé npm run dev, vous pouvez le voir sur l'interface et l'alerte apparaît, ce qui prouve que jquery a été introduit avec succès.

6. Pour installer bootstrap, utilisez la commande npm install bootstrap --save-dev

7. Après une installation réussie, vous pouvez voir le module bootstrap dans le dossier package.json. À ce stade, vous devez ajouter le contenu suivant à main.js :

import &#39;bootstrap/dist/css/bootstrap.min.css&#39;import &#39;bootstrap/dist/js/bootstrap.min&#39;

Copier après la connexion

Une fois l'ajout terminé, redémarrez le programme et npm exécutez dev. Vous pouvez voir que les boutons de l'interface sont déjà des groupes de boutons d'amorçage.

Enfin, joignez le contenu de l'intégralité du fichier main.js :

// 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 &#39;jquery&#39;
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}
})

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!