Comment créer un projet vue2.0+boostrap-js tutoriel-php.cn

Comment créer un projet vue2.0+boostrap

php中世界最好的语言

Libérer： 2018-05-25 15:02:15

original

1787 Les gens l'ont consulté

Cette fois je vais vous montrer comment construire un projet vue2.0+boostrap et quelles sont les précautions pour construire un projet vue2.0+boostrap Voici un cas pratique, jetons un oeil. .

1. Initialisation de Vue CLI Projet Vue

Installation globalevue cli

installation npm - -global vue-cli Créer un nouveau projet basé sur le modèle webpack

vue init webpack my-project Entrez le répertoire du projet pour un essai

npm run dev

Copier après la connexion

2 . Va BootStrapAjouter au projet Vue

Installer

JQuery(Car Boostrap dépend de JQuery)

npm install jquery --save-dev

Copier après la connexion

Installez Boostrap

npm install bootstrap --save-dev

Copier après la connexion

Ajoutez jquery, bootstrap.css, bootstrap.js respectivement dans main.js

import 'jquery/dist/jquery.min'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min'

Copier après la connexion

Inspection

Ajoutez le code suivant dans n'importe quel modèle :

<p>
  <button class="btn btn-primary" data-toggle="modal" data-target="#mymodal-data" type="button">点击我</button>
  <p class="modal fade" id="mymodal-data" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
    <p class="modal-dialog">
      <p class="modal-content">
        <p class="modal-header">
          <h4 class="modal-title">模态弹出窗标题</h4>
          <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
        </p>
        <p class="modal-body">
          <p>模态弹出窗主体内容</p>
        </p>
        <p class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
          <button type="button" class="btn btn-primary">保存</button>
        </p>
      </p>
    </p>
  </p>
</p>

Copier après la connexion

Exécutez npm run dev, et la page apparaît :

Button présente le style du bouton bootstrap, prouvant que le La bibliothèque de styles Bootstrap a été ajoutée avec succès

Cliquez sur le bouton pour apparaître :

Le bouton peut répondre correctement à la boîte de dialogue modale contextuelle, ce qui prouve que la bibliothèque JQuery et la bibliothèque js de Bootstrap ont été ajoutées avec succès.

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 Web chinois de php !

Lecture recommandée :

Utilisation élégante des modules CSS dans Vue

Comment écrire un composant personnalisé avec vue

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!