Maison > interface Web > js tutoriel > le corps du texte

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

PHPz
Libérer: 2018-10-13 16:14:19
original
6278 Les gens l'ont consulté

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
Copier après la connexion

Configurer webpack.base .conf. Ajoutez

//在顶部添加
const webpack = require('webpack')
Copier après la connexion
//在module.exports = {}末尾添加下面代码
module.exports = {
...
plugins: [
  new webpack.ProvidePlugin({
   $: "jquery",
   jQuery: "jquery"
  })
 ]
}
Copier après la connexion
à main.js js

import $ from 'jquery'
import 'bootstrap'
Copier après la connexion

Test jquery

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

Test bootstrap

<template>
<p class="container">
  <p class="row">
    <p class="col-md-6">
      <button class="btn btn-primary">测试按钮</button>
    </p>
  </p>
</p>
</template>
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal