<p><code></p> <p><a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a> 中使用 <a href="http://www.js-code.com/tag/jquery" title="jQuery" target="_blank">jQuery</a> 和 Bootstrap 不是特别符合 <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a> 原生的写法,但是有时候又要用,所以放上我的引入设置,供大家参考。</p> <p>在 <a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a> CLI2.0 中引入 <a href="http://www.js-code.com/tag/jquery" title="jQuery" target="_blank">jQuery</a> 和 Bootstrap 需要设置很多配置项,网上有很多方法法,这里不重复写了。直接上 Vue CLI3.0 配置步骤。</p> <h1 id="articleHeader0">第一步:安装 <a href="http://www.js-code.com/tag/jquery" title="浏览关于“jQuery”的文章" target="_blank" class="tag_link">jQuery</a>、 Bootstrap、popper.js依赖。</h1> <p>其中popper.js 用于在 Bootstrap 中显示弹窗、提示、下拉菜单,所以需要引入。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="npm install jquery bootstrap@3 popper.js --save" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript" style="word-break: break-word; white-space: initial;">npm install jquery bootstrap@<span class="hljs-number">3</span> popper.js --save</code></pre> <p>注意:上面的 bootstrap@3 指的是安装 Bootstrap 第三版,如果不加 @3 符号,默认安装第四版。</p> <h1 id="articleHeader1">第二步:配置 main.js</h1> <p>引入 Boostrap 请看配置文件。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="//main.js import Vue from &quot;vue&quot;; import App from &quot;./App.vue&quot;; import router from &quot;./router&quot;; import store from &quot;./store&quot;; //在这里引入 bootstrap。默认只引入 bootstrap 中的 js,css 需要另外引入,我的 bootstrap.ss 在APP.vue中引入的 import &quot;bootstrap&quot;; //也可以在这里引入 bootstrap.css ; //import &quot;bootstrap/dist/css/bootstrap.css&quot;; Vue.config.productionTip = false; new Vue({ router: router, store: store, render: h => h(App)<br /> }).$mount(&quot;#app&quot;);" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"><span class="hljs-comment">//main.js</span> <span class="hljs-keyword">import</span> Vue <span class="hljs-keyword">from</span> <span class="hljs-string">"vue"</span>; <span class="hljs-keyword">import</span> App <span class="hljs-keyword">from</span> <span class="hljs-string">"./App.vue"</span>; <span class="hljs-keyword">import</span> router <span class="hljs-keyword">from</span> <span class="hljs-string">"./router"</span>; <span class="hljs-keyword">import</span> store <span class="hljs-keyword">from</span> <span class="hljs-string">"./store"</span>; <span class="hljs-comment">//在这里引入 bootstrap。默认只引入 bootstrap 中的 js,css 需要另外引入,我的 bootstrap.ss 在APP.vue中引入的</span> <span class="hljs-keyword">import</span> <span class="hljs-string">"bootstrap"</span>; <span class="hljs-comment">//也可以在这里引入 bootstrap.css ;</span> <span class="hljs-comment">//import "bootstrap/dist/css/bootstrap.css";</span> Vue.config.productionTip = <span class="hljs-literal">false</span>; <span class="hljs-keyword">new</span> Vue({ <span class="hljs-attr">router</span>: router, <span class="hljs-attr">store</span>: store, <span class="hljs-attr">render</span>: <span class="hljs-function"><span class="hljs-params">h</span> =&gt;</span> h(App) }).$mount(<span class="hljs-string">"#app"</span>);</code></pre> <p>我的 APP.vue 的配置,只是引入 bootstrap.css,代码仅供参考。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" <style> // 因为我的 bootstrap 文件经过了我自己的调整,所以单独放在 assets 文件夹中做单独引入。 //如果你只是想使用原生的 bootstrap,直接在 main.js 中引入 css 文件即可。 @import &quot;./assets/css/bootstrap.css&quot;; </style> <p>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript">&lt;style&gt; <span class="hljs-comment">// 因为我的 bootstrap 文件经过了我自己的调整,所以单独放在 assets 文件夹中做单独引入。</span> <span class="hljs-comment">//如果你只是想使用原生的 bootstrap,直接在 main.js 中引入 css 文件即可。</span> @<span class="hljs-keyword">import</span> <span class="hljs-string">"./assets/css/bootstrap.css"</span>; <span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span></span></code></pre> <h1 id="articleHeader2">第三步:配置 vue.config.js 文件</h1> <p>Vue CLI3.0 中的所有配置都在 vue.config.js 文件,你在这里配置好,脚手架自动使用你的配置覆盖掉默认的配置。<br />如果你的项目中没有 vue.config.js 文件,请你在 package.json 文件的同级目录新建一个 vue.config.js 文件。文件内具体的配置如下:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="const webpack = require(&quot;webpack&quot;); module.exports = { //configureWebpack 是Vue CLI3.0 中用于配置 webpack 插件参数的地方,你在这里设置,会新建或者覆盖 webpack 默认配置。 //webpack ProvidePlugin 的含义是创建一个全局的变量,使这个变量在 webpack 各个模块内都可以使用。这里的配置含义是创建 '$'、'jQuery'、'window.jQuery' 三个变量指向 jquery 依赖,创建 'Popper' 变量指向 popper.js 依赖。 configureWebpack: { plugins: [ new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquery', Popper: ['popper.js', 'default'] }) ] } }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"><span class="hljs-keyword"><a href="http://www.js-code.com/tag/const" title="浏览关于“const”的文章" target="_blank" class="tag_link">const</a></span> webpack = <span class="hljs-built_in">require</span>(<span class="hljs-string">"webpack"</span>); <span class="hljs-built_in">module</span>.<a href="http://www.js-code.com/tag/export" title="浏览关于“export”的文章" target="_blank" class="tag_link">export</a>s = { <span class="hljs-comment">//configureWebpack 是Vue CLI3.0 中用于配置 webpack 插件参数的地方,你在这里设置,会新建或者覆盖 webpack 默认配置。</span> <span class="hljs-comment">//webpack ProvidePlugin 的含义是创建一个全局的变量,使这个变量在 webpack 各个模块内都可以使用。这里的配置含义是创建 '$'、'jQuery'、'window.jQuery' 三个变量指向 jquery 依赖,创建 'Popper' 变量指向 popper.js 依赖。</span> configureWebpack: { <span class="hljs-attr">plugins</span>: [ <span class="hljs-keyword">new</span> webpack.ProvidePlugin({ <span class="hljs-attr">$</span>: <span class="hljs-string">'jquery'</span>, <span class="hljs-attr">jQuery</span>: <span class="hljs-string">'jquery'</span>, <span class="hljs-string">'window.jQuery'</span>: <span class="hljs-string">'jquery'</span>, <span class="hljs-attr">Popper</span>: [<span class="hljs-string">'popper.js'</span>, <span class="hljs-string">'default'</span>] }) ] } }</code></pre> <h1 id="articleHeader3">第四步:具体使用范例</h1> <p>我做了一个 tooltip 的示例,鼠标放上去会出现 tooltip 提示</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="//template <template></p> <div class=&quot;content-wrap&quot;> <button type=&quot;button&quot; class=&quot;btn btn-default&quot; data-toggle=&quot;tooltip&quot; data-placement=&quot;left&quot; title=&quot;Tooltip on left&quot;>Tooltip on left</button><br /> <button type=&quot;button&quot; class=&quot;btn btn-primary&quot; data-toggle=&quot;tooltip&quot; data-placement=&quot;top&quot; title=&quot;Tooltip on top&quot;>Tooltip on top</button><br /> <button type=&quot;button&quot; class=&quot;btn btn-warning&quot; data-toggle=&quot;tooltip&quot; data-placement=&quot;bottom&quot; title=&quot;Tooltip on bottom&quot;>Tooltip on bottom</button><br /> <button type=&quot;button&quot; class=&quot;btn btn-danger&quot; data-toggle=&quot;tooltip&quot; data-placement=&quot;right&quot; title=&quot;Tooltip on right&quot;>Tooltip on right</button> </div> <p></template></p> <p><script> <a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a> default { name: &quot;componentsTooltips&quot;, mounted: function() { //在页面加载完毕后初始化 tooltip, 相当于$(function(){ $('[data-toggle=&quot;tooltip&quot;]').tooltip(); } $('[data-toggle=&quot;tooltip&quot;]').tooltip(); } }; </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html">//template <span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name"><a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a></span> <span class="hljs-attr">class</span>=<span class="hljs-string">"content-wrap"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-default"</span> <span class="hljs-attr">data-toggle</span>=<span class="hljs-string">"tooltip"</span> <span class="hljs-attr">data-placement</span>=<span class="hljs-string">"left"</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Tooltip on left"</span>&gt;</span>Tooltip on left<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-primary"</span> <span class="hljs-attr">data-toggle</span>=<span class="hljs-string">"tooltip"</span> <span class="hljs-attr">data-placement</span>=<span class="hljs-string">"top"</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Tooltip on top"</span>&gt;</span>Tooltip on top<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-warning"</span> <span class="hljs-attr">data-toggle</span>=<span class="hljs-string">"tooltip"</span> <span class="hljs-attr">data-placement</span>=<span class="hljs-string">"bottom"</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Tooltip on bottom"</span>&gt;</span>Tooltip on bottom<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-danger"</span> <span class="hljs-attr">data-toggle</span>=<span class="hljs-string">"tooltip"</span> <span class="hljs-attr">data-placement</span>=<span class="hljs-string">"right"</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Tooltip on right"</span>&gt;</span>Tooltip on right<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"> <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> { <span class="hljs-attr">name</span>: <span class="hljs-string">"componentsTooltips"</span>, <span class="hljs-attr">mounted</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{ <span class="hljs-comment">//在页面加载完毕后初始化 tooltip, 相当于$(function(){ $('[data-toggle="tooltip"]').tooltip(); }</span> $(<span class="hljs-string">'[data-toggle="tooltip"]'</span>).tooltip(); } }; </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <p>如果 eslint 报误,请设置 .eslintrc.js 文件。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="module.exports = { env: { node: true, jquery: true } };" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"><span class="hljs-built_in">module</span>.exports = { <span class="hljs-attr">env</span>: { <span class="hljs-attr"><a href="http://www.js-code.com/tag/node" title="浏览关于“node”的文章" target="_blank" class="tag_link">node</a></span>: <span class="hljs-literal">true</span>, <span class="hljs-attr">jquery</span>: <span class="hljs-literal">true</span> } };</code></pre> <p>本人测试结果如下:<br /><span class="img-wrap"><img data-src="/img/bVbo3hB?w=508&amp;h=95" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"></span></p> <p>欢迎大家批评指正。<br />参考文档:<br />Vue CLI3.0: <a href="https://cli.vuejs.org/zh/guide/webpack.html" rel="nofollow noreferrer" target="_blank">https://cli.vuejs.org/zh/guid...</a><br />Bootstrap tooltip :<a href="https://v3.bootcss.com/javascript/#tooltips" rel="nofollow noreferrer" target="_blank">https://v3.bootcss.com/javasc...</a><br />Stackoverflow: <a href="https://stackoverflow.com/questions/42684661/adding-bootstrap-to-vue-cli-project" rel="nofollow noreferrer" target="_blank">https://stackoverflow.com/que...</a></p> <p></code></p>

本文固定链接: http://www.js-code.com/vue-js/vue-js_26517.html