ホームページ >ウェブフロントエンド >jsチュートリアル >vue-cli プロジェクトでブートストラップを使用する方法
今回は、vue-cli プロジェクトでブートストラップを使用する方法と、vue-cli プロジェクトでブートストラップを使用する際の注意点について説明します。以下は実際的なケースです。
ブートストラップを HTML ページに追加するには、Link タグと Script タグを介して CSS ファイルと js ファイルを渡すだけで非常に便利です。
それでは、vue-vli で生成されたフロントエンド プロジェクトにそれを追加するにはどうすればよいでしょうか?フレームワークが違うので、少し慣れが必要です。
プラグインをインストールする
npm install jquery --save npm install bootstrap --save npm install popper.js --save
webpack.base.conf.jsを設定する
//在顶部添加 const webpack = require('webpack')
//在module.exports = {}末尾添加下面代码 module.exports = { ... plugins: [ new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery" }) ] }
main.jsを追加する
import $ from 'jquery' import 'bootstrap'
jqueryをテストする
//在vue文件中添加测试代码 <script> $(function () { alert('234') }) export default { name: 'App' } </script>
ブートストラップをテストする
<template> <p class="container"> <p class="row"> <p class="col-md-6"> <button class="btn btn-primary">测试按钮</button> </p> </p> </p> </template>
のケースを読んだ後、方法をマスターしたと思います。この記事は、さらにエキサイティングです。php 中国語 Web サイトの他の関連記事にもご注目ください。
推奨読書:
実践的なプロジェクトでjquerylayurポップアップレイヤーを使用する方法
express +モックフロントエンドとバックエンドの並行開発を操作する方法
以上がvue-cli プロジェクトでブートストラップを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。