Comment utiliser bootstrap dans le projet vue-cli

Cette fois, je vais vous montrer comment utiliser bootstrap dans le projet vue-cli Quelles sont les précautions pour utiliser bootstrap dans le projet vue-cli. cas pratique. Jetons un coup d’oeil.

Il est très pratique d'ajouter du bootstrap à une page html Il suffit de passer les fichiers css et js via les balises Link et Script.

Alors comment l'ajouter à un projet front-end généré avec vue-vli ? Parce que le cadre est différent, il faut un peu de temps pour s'y habituer.

Installer le plugin

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

Configurer webpack.base.conf.js

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

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

Ajouter dans main.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>

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres sujets connexes dans l'article du site Web PHP chinois !

Lecture recommandée :

Comment utiliser vue.js et element-ui pour implémenter l'arborescence des menus

Comment utilisez le modificateur vue Inner .sync

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!