Explication détaillée des étapes d'utilisation du bootstrap dans le projet vue-cli

Cette fois, je vais vous donner une explication détaillée des étapes d'utilisation de bootstrap dans le projet vue-cli Quelles sont les précautions d'utilisation de bootstrap dans le projet vue-cli ? Voici un cas pratique, jetons un oeil.

[Recommandations vidéo associées : Tutoriel Bootstrap]

Installer le plug-in

npm install jquery --save
npm install bootstrap --save
npm install popper.js --save

Configurer webpack.base .conf. Ajoutez

//在顶部添加
const webpack = require('webpack')

//在module.exports = {}末尾添加下面代码
module.exports = {
...
plugins: [
  new webpack.ProvidePlugin({
   $: "jquery",
   jQuery: "jquery"
  })
 ]
}

à main.js js

import $ from 'jquery'
import 'bootstrap'

Test jquery

//在vue文件中添加测试代码
<script>
$(function () {
 alert('234')
})
export default {
 name: 'App'
}
</script>

Test bootstrap

<template>
<p class="container">
  <p class="row">
    <p class="col-md-6">
      <button class="btn btn-primary">测试按钮</button>
    </p>
  </p>
</p>
</template>

Croyez Après avoir lu le cas dans cet article, vous maîtrisez la méthode. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web PHP chinois !

Lecture recommandée :

JS pour obtenir la position actuelle de l'utilisateur

Comment AngularJs empêche les attaques XSS

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!