1、引入jquery

1.1、下载依赖

cnpm install jquery --save-dev

1.2、修改 build/webpack.base.conf.js 配置文件

加入 webpack 对象 var webpack = require('webpack')

在 module.exports 里面加入： plugins: [ new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery", jquery: "jquery", "window.jQuery": "jquery", Popper: ['popper.js', 'default'] }) ],

1.3、在入口文件 main.js 中加入：

import $ from 'jquery'

如果遇到 报错 '$' is defined but never used  可参考解决方案：点击这里

2、引入bootstrap

2.1、下载bootstrap依赖

cnpm install bootstrap@3 --save-dev

下载依赖后可能会有提示：peerDependencies WARNING bootstrap@* requires a peer of popper.js@^1.14.7 but none was installed

需要安装 popper.js 1.14.7版本的依赖，执行下面命令下载依赖即可：

如果没有提示则忽略这一步。

cnpm i popper.js@1.14.7 -S # -S表示保存到当前项目的依赖里去

2.2、在入口文件 main.js 中引入bootstrap

import 'bootstrap/dist/css/bootstrap.min.css' import 'bootstrap/dist/js/bootstrap.min.js' //字体根据自己需要引入 import 'bootstrap/dist/fonts/glyphicons-halflings-regular.eot' import 'bootstrap/dist/fonts/glyphicons-halflings-regular.svg' import 'bootstrap/dist/fonts/glyphicons-halflings-regular.ttf' import 'bootstrap/dist/fonts/glyphicons-halflings-regular.woff' import 'bootstrap/dist/fonts/glyphicons-halflings-regular.woff2'

3、测试是否引入成功

从bootstrap官网随便复制一段代码，我这里复制一下分页的代码放到项目中去：

<nav aria-label="Page navigation"> <ul class="pagination"> <li> <a href="#" aria-label="Previous"> <span aria-hidden="true">&laquo;</span> </a> </li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li> <a href="#" aria-label="Next"> <span aria-hidden="true">&raquo;</span> </a> </li> </ul> </nav>

使用 npm run dev 运行项目。

可能会报警告：{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.

请参考解决方式：点击这里

 

最后  如果一切像预料的那样显示，那么说明引入成功了。