1. 程式人生 > >在vue-cli專案中引入jQuery和bootstrap

在vue-cli專案中引入jQuery和bootstrap

        最近想用vue+jquery+bootstrap做一個專案,剛開始不知道怎麼引入jQuery和bootstrap,弄了小半天,終於弄好了,特此記載一下過程

        1、首先,安裝jQuery

            npm install jquery --save

        2、 然後在build/webpack.base.config.js中新增以下程式碼

            var webpack = require('webpack')

        3、然後在module中新增以下程式碼

            plugins: [
                new webpack.ProvidePlugin({
                  $: "jquery",
                  jQuery: "jquery",
                  jquery: "jquery",
                  "window.jQuery": "jquery"
                })

             ]

            

        4、在main.js中引入jQuery

            import $ from 'jquery'

        5、安裝bootstrap

            npm install bootstrap --save

        6、在main.js中引入bootstrap相關檔案

            import 'bootstrap/dist/css/bootstrap.min.css'

            import 'bootstrap/dist/js/bootstrap.min.js'

            

        最後,重啟伺服器

        注意:我重啟伺服器之後,有報錯,提示安裝popper.js,安裝即可,然後就可以正常啟動了