Maison >interface Web >Voir.js >Une brève discussion sur l'utilisation de npm pour installer bootstrap et jquery dans les projets Vue

Une brève discussion sur l'utilisation de npm pour installer bootstrap et jquery dans les projets Vue

青灯夜游
青灯夜游avant
2021-05-31 17:34:102250parcourir

Cet article vous expliquera comment utiliser npm pour installer bootstrap et jquery dans un projet Vue. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Une brève discussion sur l'utilisation de npm pour installer bootstrap et jquery dans les projets Vue

[Recommandation associée : "tutoriel vue.js"]

Utilisez npm pour installer bootstrap dans le projet Vue et jquery

Après de nombreuses enquêtes et expériences, j'ai résumé l'utilisation du framework bootstrap dans les projets vue. Faites attention à l'installation de npm.

Le plug-in js dans bootstrap dépend de jquery. , donc dans jquery doit être installé avant cela.

Installation de jquery

1. Ajoutez une ligne de code dans package.json : "jquery": "^2.2.3"

"dependencies": {
   "element-ui": "^2.0.5",
   "vue": "^2.5.2",
   "vue-router": "^3.0.1",
   "jquery": "^2.2.3"
 }

2. . Ajoutez une ligne de données au fichier de build webpack.base.conf.js :

//注:...代表省略自有的,
//必定事先声明webpack,不然下面会不识别webpack
const webpack = require('webpack')
...
module.exports = {
    resolve: {
        ...
        alias: {
          ...
          'jquery': 'jquery' 
        }
    },
    plugins: [
        new webpack.ProvidePlugin({
          $: "jquery",
          jQuery: "jquery",
          "windows.jQuery": "jquery"
        })
    ],
    ...
}

3 Ajoutez à main.js : importez $ from 'jquery'

4. jquery@ 2.2.3 –save-dev

Une brève discussion sur lutilisation de npm pour installer bootstrap et jquery dans les projets Vue

De cette façon, jquery est installé.

Installation de bootstrap :

1. Utilisez npm install bootstrap@3.3.0 –save-dev

Une brève discussion sur lutilisation de npm pour installer bootstrap et jquery dans les projets Vue

2. Présentez

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

à la page requise et enfin npm exécutez dev pour démarrer le projet, et tout ira bien.

Pour plus de connaissances sur la programmation, veuillez visiter : Vidéo de programmation ! !

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!

Déclaration:
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer