Vue中引入jquery bootstarp

vue

今天用vue-cli创建了一个项目，想要在内部引入bootstarp, 遇见了一些问题，于是为了避免以后继续踩这个坑，来记录一下引入步骤

1，当你用vue-cli创建了项目之后图片显示是项目目录

,2，接下来就要引入jquery，在项目文件夹下打开cmd ，输入 npm install jquery --save-dev ，注意：jquery 一定要小写不然会提示 Please use 'jquery' (all lowercase)

3，找到build文件夹下的webpack.base.conf.js文件，打开，添加： var webpack=require('webpack')

4，还是3中这个文件，在module.exports里输入：

plugins: [

new webpack.ProvidePlugin({

$:"jquery",

jQuery:"jquery",

"windows.jQuery":"jquery"

})

因为这个module.exports内没有plugins，所以需要自己在最后添加进去，如图：

5，在入口文件main.js中输入： import $ from 'jquery'，如图：

到这里，jquery就引入成功了，接下来我们要引入bootstrap了

6，安装bootstrap，在项目文件夹下打开cmd 使用命令 npm install bootstrap --save-dev

7，找到build文件夹下的webpack.base.conf.js文件，打开，在module.exports里找到

resolve:{

　　extensions: ['.js', '.vue', '.json'],

　　alias: {

　　'vue$': 'vue/dist/vue.esm.js',

　　'@': resolve('src')

　　}

改成

resolve:{

　　extensions: ['.js', '.vue', '.json'],

　　alias: {

　　'vue$': 'vue/dist/vue.esm.js',

　　'@': resolve('src'),

　　'bootstrap':resolve('src/assets/bootstrap'),

　　}

8，在main.js中import引入

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

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

同上面引入jquery时位置相同，

我就是这样都引入结束之后去用了 npm run dev 但是报错报错关键字 popper.js，于是接下来，我们要去下载这个popper

9,在项目文件夹下打开cmd ，输入 npm install--save popper.js

10，找到build文件夹下的webpack.base.conf.js文件，打开，在module.exports里找到之前我们添加的plugins,在里面添加

Popper: ['popper.js', 'default']

如图：

到此，运行 npm run dev 就可以正常启动了