当前位置:Gxlcms > JavaScript > vue中怎么引入bootstrap

vue中怎么引入bootstrap

时间:2021-07-01 10:21:17 帮助过:16人阅读

一、引入jquery

步骤:

1. 安装jquery

  1. $ npm install jquery --save-dev

2.在webpack.config.js 添加内容

  1. + const webpack = require("webpack");
  2. module.exports = {
  3. entry: './index.js',
  4. output: {
  5. path: path.join(__dirname, './dist'),
  6. publicPath: '/dist/',
  7. filename: 'index.js'
  8. },
  9. + plugins: [
  10. new webpack.ProvidePlugin({
  11. jQuery: 'jquery',
  12. $: 'jquery'
  13. })
  14. ]
  15. }

3.在入口文件index.js 里面添加内容

  1. import $ from 'jquery' ;

相关推荐:《bootstrap入门教程》

4.测试一下是否安装成功,看看能否弹出'123'

  1. <template>
  2. <div>
  3. Hello world!
  4. </div>
  5. </template>
  6. <script>
  7. $(function () {
  8. alert(123);
  9. });
  10. export default {
  11. };
  12. </script>
  13. <style>
  14. </style>

二、引入Bootstrap

1.安装Bootstrap

  1. $ npm install --save-dev bootstrap

2.在入口文件index.js里引入相关

  1. import './node_modules/bootstrap/dist/css/bootstrap.min.css';
  2. import './node_modules/bootstrap/dist/js/bootstrap.min.js';

3.添加一段Bootstrap代码

  1. <div class="btn-group" role="group" aria-label="...">
  2. <button type="button" class="btn btn-default">Left</button>
  3. <button type="button" class="btn btn-default">Middle</button>
  4. <button type="button" class="btn btn-default">Right</button>
  5. </div>

4.运行,查看效果这些按钮已经变成Bootstrap按钮组了。

qqq.png

以上就是vue中怎么引入bootstrap的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行