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 [email protected] -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">«</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">»</span>
</a>
</li>
</ul>
</nav>
使用 npm run dev 运行项目。
可能会报警告:{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.
请参考解决方式:点击这里
最后 如果一切像预料的那样显示,那么说明引入成功了。