Maison >interface Web >Tutoriel d'amorçage >Comment introduire le bootstrap dans le projet vue
Introduire
bootstrap dans le projet vue ? L’article suivant vous le présentera. 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.
Recommandations de didacticiel associées : "tutoriel bootstrap"
Pour introduire le bootstrap dans le projet vue, vous devez d'abord introduire deux dépendances : jQuery et popper
La commande d'installation est la suivante :
cnpm install bootstrap --save-dev cnpm install jquery --save-dev cnpm install popper.js --save-dev
La dernière version est installée par par défaut. Si vous souhaitez installer la version bootstrap V3 (moins les dépendances), vous pouvez :
cnpm install bootstrap@3 --save-dev
Ou utiliser la fenêtre visuelle pour installer
Recherchez les dépendances et gt; installer bootstrap
Dans la page main.js, écrivez le code suivant
// 引入jQuery、bootstrap import $ from 'jquery' import 'bootstrap' // 引入bootstrap样式 import 'bootstrap/dist/css/bootstrap.min.css' import 'bootstrap/dist/js/bootstrap.min.js' // 全局注册 $ Vue.prototype.$ = $
dans vue.config.js , écrivez le code suivant (s'il n'y a pas de vue.config.js, créez-le manuellement dans le répertoire du même niveau que package.json)
const webpack = require("webpack") module.exports = { // 配置插件参数 configureWebpack: { plugins: [ // 配置 jQuery 插件的参数 new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquery', Popper: ['popper.js', 'default'] }) ] } }
pour tester bootstrap
<template> <p class="container"> <p class="row"> <p class="col-md-6"> <button class="btn btn-primary">测试按钮</button> </p> </p> </p> </template>
Pour plus de connaissances liées à la programmation, veuillez visiter :
Enseignement de la 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!