Comment utiliser bootstrap dans le projet vue-cli

Cette fois, je vais vous montrer comment utiliser bootstrap dans le projet vue-cli, et quelles sont les précautions à prendre pour utiliser bootstrap dans le projet vue-cli. Ce qui suit est un cas pratique, jetons un coup d'œil.

Il est très pratique d'ajouter du bootstrap à une page html Il vous 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

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 articles connexes. sur le site PHP chinois !

Lecture recommandée :

Comment utiliser la couche contextuelle jquery layur dans des projets pratiques

Comment fonctionne express + mock le développement parallèle front et backend

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!