ホームページ >ウェブフロントエンド >jsチュートリアル >vue-cli プロジェクトでブートストラップを使用する方法
今回は vue-cli プロジェクトで bootstrap を使用する方法を説明します。 vue-cli プロジェクトで bootstrap を使用する場合の 注意事項 について、実際のケースを見てみましょう。
ブートストラップを HTML ページに追加するには、Link タグと Script タグを介して CSS ファイルと js ファイルを渡すだけで非常に便利です。
それでは、vue-vli で生成されたフロントエンド プロジェクトにそれを追加するにはどうすればよいでしょうか?フレームワークが違うので、少し慣れが必要です。
npm install jquery --save npm install bootstrap --save npm install popper.js --savewebpack.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 サイトの他の関連記事にも注目してください。 推奨読書:
vue.js と element-ui を使用してメニュー ツリー構造を実装する方法
以上がvue-cli プロジェクトでブートストラップを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。