首页
前端开发
Webpack
在Vue CLI 3中使用jQuery和Bootstrap的方法

在Vue CLI 3中使用jQuery和Bootstrap的方法

0 次浏览 0 条评论
pdf
pdf

Vue CLI3 里的 jQuery 和 Bootstrap 怎么用？说实话，这俩东西在 Vue 生态里不算主流，但有时候项目老、设计没得选，照样得上。这篇就是分享下我怎么在 Vue CLI3 项目里愉快地引入它们，踩坑少，效率还行。

jQuery 的引入没啥新鲜的，还是老三样：npm install jquery装好，在vue.config.js或者main.js里搞定全局引入。想全局用$，那就得在webpack配置里用ProvidePlugin声明一下。

Bootstrap 3要搭的话，除了主包bootstrap@3，还得带上popper.js。它是用来搞弹窗、提示这些的，没有它，UI 一堆警告不说，还不好用。

安装命令是：

npm install jquery bootstrap@3 popper.js --save

装完后，样式和 JS 分别引就完事了：

import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/js/bootstrap.js';
import 'popper.js';
import $ from 'jquery';
window.$ = $;

注意下，这套方法比较适合“有历史包袱”的项目，或者你只是临时加点 Bootstrap 组件。如果你是纯 Vue 新项目，建议还是用原生组件库，比如Vant、Element 那些，配合 Vue 用起来更顺。

如果你对vue.config.js不熟，可以参考下路径别名配置详解，或者想看下多页配置也有文章戳这。

嗯，方法不难，注意引入顺序和插件兼容性就行。如果你也卡在 Vue CLI3 里用 jQuery+Bootstrap，不妨试试这个套路，挺稳的。

pdf 文件大小：61.29KB