Rumah > hujung hadapan web > Tutorial Bootstrap > vue如何引入bootstrap

vue如何引入bootstrap

angryTom
Lepaskan: 2019-07-29 16:43:28
asal
3290 orang telah melayarinya

vue如何引入bootstrap

如果你想了解更多关于bootstrap的知识,可以点击:bootstrap教程

一、引入jquery

步骤:

1. 安装jquery

1

$ npm install jquery --save-dev

Salin selepas log masuk

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

+ const webpack = require("webpack");

module.exports = {

    entry: './index.js',

    output: {

        path: path.join(__dirname, './dist'),

        publicPath: '/dist/',

        filename: 'index.js'

    },

  + plugins: [

        new webpack.ProvidePlugin({

            jQuery: 'jquery',

            $: 'jquery'

        })

    ]

}

Salin selepas log masuk

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

1

import $ from 'jquery' ;

Salin selepas log masuk

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

<template>

  <div>

   Hello world!

  </div>

</template>

<script>

$(function () { 

    alert(123); 

 });

export default {

};

</script>

<style>

</style>

Salin selepas log masuk

二、引入bootstrap

1、安装Bootstrap

1

$ npm install --save-dev bootstrap

Salin selepas log masuk

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

1

2

import &#39;./node_modules/bootstrap/dist/css/bootstrap.min.css&#39;;

import &#39;./node_modules/bootstrap/dist/js/bootstrap.min.js&#39;;

Salin selepas log masuk

3、添加一段Bootstrap代码

1

2

3

4

5

<div class="btn-group" role="group" aria-label="..."

     <button type="button" class="btn btn-default">Left</button

     <button type="button" class="btn btn-default">Middle</button

     <button type="button" class="btn btn-default">Right</button

   </div>

Salin selepas log masuk

4、查看效果

boot11.png

Atas ialah kandungan terperinci vue如何引入bootstrap. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan