脚本宝典收集整理的这篇文章主要介绍了

vue引入bootstrap——webpack

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p>原文链接:<a href="https://blog.csdn.net/wild46cat/article/details/77662555" rel="nofollow noreferrer" target="_blank">https://blog.csdn.net/wild46c...</a><br />想要在vue中引入bootstrap,引入的时候需要按照如下的步骤进行。<br />1、引入jquery<br />2、引入bootstrap</p> <p>阅读本文前,应该能够搭建环境,使用vue-cli进行项目的创建,可以参考文章:<br /><a href="http://blog.csdn.net/wild46cat/article/details/76360229" rel="nofollow noreferrer" target="_blank">http://blog.csdn.net/wild46ca...</a></p> <p>好,下面上货。<br />1、首先按照上面文章中的内容,新建一个vue工程。</p> <p>2、使用命令npm install jquery --save-dev 引入jquery。</p> <p>3、在webpack.base.conf.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="var webpack = require('webpack') " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code><span class="hljs-keyword">var</span> webpack = <span class="hljs-built_in">require</span>(<span class="hljs-string">'webpack'</span>) </code></pre> <p>和</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=" // 增加一个plugins plugins: [ new webpack.ProvidePlugin({ $: &quot;jquery&quot;, jQuery: &quot;jquery&quot; }) ], " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs groovy"><code> <span class="hljs-comment">// 增加一个plugins</span> <span class="hljs-string">plugins:</span> [ <span class="hljs-keyword">new</span> webpack.ProvidePlugin({ <span class="hljs-symbol"> $:</span> <span class="hljs-string">"jquery"</span>, <span class="hljs-symbol"> <a href="http://www.js-code.com/tag/jquery" title="浏览关于“jQuery”的文章" target="_blank" class="tag_link">jQuery</a>:</span> <span class="hljs-string">"jquery"</span> }) ], </code></pre> <p>添加完成后,文件内容如下:</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="var path = require('path') var fs = require('fs') var utils = require('./utils') var config = require('../config') var vueLoaderConfig = require('./vue-loader.conf') function resolve(dir) { return fs.realpathSync(__dirname + '/' + path.join('..', dir)) } module.exports = { entry: { app: './src/main.js' }, output: { path: config.build.assetsRoot, filename: '[name].js', publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath }, resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'), }, symlinks: false }, module: { rules: [ { test: /.vue$/, loader: 'vue-loader', options: vueLoaderConfig }, { test: /.js$/, loader: 'babel-loader', include: [resolve('src'), resolve('test')] }, { test: /.(png|jpe?g|gif|svg)(?.*)?$/, loader: 'url-loader', options: { limit: 10000, name: utils.assetsPath('img/[name].[hash:7].[ext]') } }, { test: /.(mp4|webm|ogg|mp3|wav|flac|aac)(?.*)?$/, loader: 'url-loader', options: { limit: 10000, name: utils.assetsPath('media/[name].[hash:7].[ext]') } }, { test: /.(woff2?|eot|ttf|otf)(?.*)?$/, loader: 'url-loader', options: { limit: 10000, name: utils.assetsPath('fonts/[name].[hash:7].[ext]') } } ] }, // 增加一个plugins plugins: [ new webpack.ProvidePlugin({ $: &quot;jquery&quot;, jQuery: &quot;jquery&quot; }) ], } " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code><span class="hljs-keyword">var</span> path = <span class="hljs-built_in">require</span>(<span class="hljs-string">'path'</span>) <span class="hljs-keyword">var</span> fs = <span class="hljs-built_in">require</span>(<span class="hljs-string">'fs'</span>) <span class="hljs-keyword">var</span> utils = <span class="hljs-built_in">require</span>(<span class="hljs-string">'./utils'</span>) <span class="hljs-keyword">var</span> config = <span class="hljs-built_in">require</span>(<span class="hljs-string">'../config'</span>) <span class="hljs-keyword">var</span> vueLoaderConfig = <span class="hljs-built_in">require</span>(<span class="hljs-string">'./vue-loader.conf'</span>) <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">resolve</span>(<span class="hljs-params">dir</span>) </span>{ <span class="hljs-keyword">return</span> fs.realpathSync(__dirname + <span class="hljs-string">'/'</span> + path.join(<span class="hljs-string">'..'</span>, dir)) } <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 = { entry: { app: <span class="hljs-string">'./src/main.js'</span> }, output: { path: config.build.assetsRoot, filename: <span class="hljs-string">'[name].js'</span>, publicPath: process.env.NODE_ENV === <span class="hljs-string">'production'</span> ? config.build.assetsPublicPath : config.dev.assetsPublicPath }, resolve: { extensions: [<span class="hljs-string">'.js'</span>, <span class="hljs-string">'.vue'</span>, <span class="hljs-string">'.json'</span>], alias: { <span class="hljs-string">'vue$'</span>: <span class="hljs-string">'vue/dist/vue.esm.js'</span>, <span class="hljs-string">'@'</span>: resolve(<span class="hljs-string">'src'</span>), }, symlinks: <span class="hljs-literal">false</span> }, <span class="hljs-keyword">module</span>: { rules: [ { test: <span class="hljs-regexp">/.vue$/</span>, loader: <span class="hljs-string">'vue-loader'</span>, options: vueLoaderConfig }, { test: <span class="hljs-regexp">/.js$/</span>, loader: <span class="hljs-string">'<a href="http://www.js-code.com/tag/babel" title="浏览关于“babel”的文章" target="_blank" class="tag_link">babel</a>-loader'</span>, include: [resolve(<span class="hljs-string">'src'</span>), resolve(<span class="hljs-string">'test'</span>)] }, { test: <span class="hljs-regexp">/.(png|jpe?g|gif|svg)(?.*)?$/</span>, loader: <span class="hljs-string">'url-loader'</span>, options: { limit: <span class="hljs-number">10000</span>, name: utils.assetsPath(<span class="hljs-string">'img/[name].[hash:7].[ext]'</span>) } }, { test: <span class="hljs-regexp">/.(mp4|webm|ogg|mp3|wav|flac|aac)(?.*)?$/</span>, loader: <span class="hljs-string">'url-loader'</span>, options: { limit: <span class="hljs-number">10000</span>, name: utils.assetsPath(<span class="hljs-string">'media/[name].[hash:7].[ext]'</span>) } }, { test: <span class="hljs-regexp">/.(woff2?|eot|ttf|otf)(?.*)?$/</span>, loader: <span class="hljs-string">'url-loader'</span>, options: { limit: <span class="hljs-number">10000</span>, name: utils.assetsPath(<span class="hljs-string">'fonts/[name].[hash:7].[ext]'</span>) } } ] }, <span class="hljs-comment">// 增加一个plugins</span> plugins: [ <span class="hljs-keyword">new</span> webpack.ProvidePlugin({ $: <span class="hljs-string">"jquery"</span>, jQuery: <span class="hljs-string">"jquery"</span> }) ], } </code></pre> <p>4、在main.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=" import $ from 'jquery' " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code> <span class="hljs-keyword">import</span> $ <span class="hljs-keyword">from</span> <span class="hljs-string">'jquery'</span> </code></pre> <p>添加完成后,可以在home.vue中尝试jquery是否好用。</p> <p>5、修改HelloWorld.vue的内容,一个是尝试添加bootstrap的代码,还有事验证jquery的代码</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></p> <div class=&quot;hello&quot;> <h1>{{ msg }}</h1> <h2>Essential Links</h2> <ul> <li><a href=&quot;https://vuejs.org&quot; target=&quot;_blank&quot;>Core Docs</a></li> <li><a href=&quot;https://forum.vuejs.org&quot; target=&quot;_blank&quot;>Forum</a></li> <li><a href=&quot;https://chat.vuejs.org&quot; target=&quot;_blank&quot;>Community Chat</a></li> <li><a href=&quot;https://twitter.com/vuejs&quot; target=&quot;_blank&quot;>Twitter</a></li> <p></p> <li><a href=&quot;http://vuejs-templates.github.io/webpack/&quot; target=&quot;_blank&quot;>Docs for This Template</a></li> </ul> <h2>Ecosystem</h2> <ul> <li><a href=&quot;http://router.vuejs.org/&quot; target=&quot;_blank&quot;>vue-router</a></li> <li><a href=&quot;http://vuex.vuejs.org/&quot; target=&quot;_blank&quot;>vuex</a></li> <li><a href=&quot;http://vue-loader.vuejs.org/&quot; target=&quot;_blank&quot;>vue-loader</a></li> <li><a href=&quot;https://github.com/vuejs/awesome-vue&quot; target=&quot;_blank&quot;>awesome-vue</a></li> </ul> <div class=&quot;btn-group&quot; role=&quot;group&quot; aria-label=&quot;...&quot;> <button type=&quot;button&quot; class=&quot;btn btn-default&quot;>Left</button><br /> <button type=&quot;button&quot; class=&quot;btn btn-default&quot;>Middle</button><br /> <button type=&quot;button&quot; class=&quot;btn btn-default&quot;>Right</button> </div> <div id=&quot;cc&quot;>cc</div> </p></div> <p></template></p> <p><script> $(function () { alert(123); }); <a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a> default { name: 'hello', data () { return { msg: 'Welcome to Your <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>.js App' } } } </script></p> <p><!-- Add &quot;scoped&quot; attribute to limit CSS to this component only --></p> <style scoped> h1, h2 { font-weight: normal; }</p> <p> ul { list-style-type: none; padding: 0; }</p> <p> li { display: inline-block; margin: 0 10px; }</p> <p> a { color: #42b983; } </style> <p>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><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">"hello"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>{{ msg }}<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>Essential Links<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">ul</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"https://<a href="http://www.js-code.com/tag/vuejs" title="浏览关于“vuejs”的文章" target="_blank" class="tag_link">vuejs</a>.org"</span> <span class="hljs-attr">target</span>=<span class="hljs-string">"_blank"</span>&gt;</span>Core Docs<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"https://forum.vuejs.org"</span> <span class="hljs-attr">target</span>=<span class="hljs-string">"_blank"</span>&gt;</span>Forum<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"https://chat.vuejs.org"</span> <span class="hljs-attr">target</span>=<span class="hljs-string">"_blank"</span>&gt;</span>Community Chat<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"https://twitter.com/vuejs"</span> <span class="hljs-attr">target</span>=<span class="hljs-string">"_blank"</span>&gt;</span>Twitter<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"http://vuejs-templates.github.io/webpack/"</span> <span class="hljs-attr">target</span>=<span class="hljs-string">"_blank"</span>&gt;</span>Docs for This <a href="http://www.js-code.com/tag/template" title="浏览关于“Template”的文章" target="_blank" class="tag_link">Template</a><span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>Ecosystem<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">ul</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"http://router.vuejs.org/"</span> <span class="hljs-attr">target</span>=<span class="hljs-string">"_blank"</span>&gt;</span>vue-router<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"http://vuex.vuejs.org/"</span> <span class="hljs-attr">target</span>=<span class="hljs-string">"_blank"</span>&gt;</span>vuex<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"http://vue-loader.vuejs.org/"</span> <span class="hljs-attr">target</span>=<span class="hljs-string">"_blank"</span>&gt;</span>vue-loader<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"https://github.com/vuejs/awesome-vue"</span> <span class="hljs-attr">target</span>=<span class="hljs-string">"_blank"</span>&gt;</span>awesome-vue<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn-group"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"group"</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"..."</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>&gt;</span>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-default"</span>&gt;</span>Middle<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-default"</span>&gt;</span>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">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"cc"</span>&gt;</span>cc<span class="hljs-tag">&lt;/<span class="hljs-name">div</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-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{ alert(<span class="hljs-number">123</span>); }); <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> { <span class="hljs-attr">name</span>: <span class="hljs-string">'hello'</span>, data () { <span class="hljs-keyword">return</span> { <span class="hljs-attr">msg</span>: <span class="hljs-string">'Welcome to Your <a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a>.js App'</span> } } } </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-comment">&lt;!-- Add "scoped" attribute to limit <a href="http://www.js-code.com/tag/css" title="浏览关于“CSS”的文章" target="_blank" class="tag_link">CSS</a> to <a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a> component only --&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">style</span> <span class="hljs-attr">scoped</span>&gt;</span><span class="css"> <span class="hljs-selector-tag">h1</span>, <span class="hljs-selector-tag">h2</span> { <span class="hljs-attribute">font-weight</span>: normal; } <span class="hljs-selector-tag">ul</span> { <span class="hljs-attribute">list-style-type</span>: none; <span class="hljs-attribute">padding</span>: <span class="hljs-number">0</span>; } <span class="hljs-selector-tag">li</span> { <span class="hljs-attribute">display</span>: inline-block; <span class="hljs-attribute">margin</span>: <span class="hljs-number">0</span> <span class="hljs-number">10px</span>; } <span class="hljs-selector-tag">a</span> { <span class="hljs-attribute">color</span>: <span class="hljs-number">#42b983</span>; } </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span> </code></pre> <p>5、这样,使用npm run dev后,能够在界面上看到,弹出alert,就证明jquery引入成功了。</p> <p>6、安装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 bootstrap --save-dev " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code>npm <span class="hljs-keyword">install</span> bootstrap <span class="hljs-comment">--save-dev</span> </code></pre> <p>7、安装成功后,能够在package.json文件夹中看到bootstrap这个模块。这时候需要在main.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="import 'bootstrap/dist/css/bootstrap.min.css' import 'bootstrap/dist/js/bootstrap.min' " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs scala"><code><span class="hljs-keyword">import</span> <span class="hljs-symbol">'bootstrap</span>/dist/css/bootstrap.min.css' <span class="hljs-keyword">import</span> <span class="hljs-symbol">'bootstrap</span>/dist/js/bootstrap.min' </code></pre> <p>添加完成后,重新启动程序,npm run dev。就能看到界面中的按钮已经是bootstrap的按钮组了。</p> <p>最后,附上整个main.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="// The <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a> build version to load with the `import` command<br /> // (runtime-only or standalone) has been set in webpack.base.conf with an alias.<br /> import Vue from 'vue'<br /> import App from './App'<br /> import router from './router'<br /> import $ from 'jquery'<br /> import 'bootstrap/dist/css/bootstrap.min.css'<br /> import 'bootstrap/dist/js/bootstrap.min'</p> <p>Vue.config.productionTip = false</p> <p>/* eslint-disable no-new */<br /> new Vue({<br /> el: '#app',<br /> router,<br /> template: '<App></span>',<br /> components: {App}<br /> })</p> <p>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code>// The Vue build version to <span class="hljs-keyword">load</span> <span class="hljs-keyword">with</span> the <span class="hljs-string">`import`</span> command // (runtime-<span class="hljs-keyword">only</span> <span class="hljs-keyword">or</span> <span class="hljs-keyword">standalone</span>) has been <span class="hljs-keyword">set</span> <span class="hljs-keyword">in</span> webpack.base.conf <span class="hljs-keyword">with</span> an alias. <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'</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> $ <span class="hljs-keyword">from</span> <span class="hljs-string">'jquery'</span> <span class="hljs-keyword">import</span> <span class="hljs-string">'bootstrap/dist/css/bootstrap.min.css'</span> <span class="hljs-keyword">import</span> <span class="hljs-string">'bootstrap/dist/js/bootstrap.min'</span> Vue.config.productionTip = <span class="hljs-literal">false</span> <span class="hljs-comment">/* eslint-disable no-new */</span> <span class="hljs-keyword">new</span> Vue({ el: <span class="hljs-string">'#app'</span>, router, <span class="hljs-keyword">template</span>: <span class="hljs-string">'&lt;App/&gt;'</span>, components: {App} }) </code></pre>

总结

以上是脚本宝典为你收集整理的

vue引入bootstrap——webpack

全部内容,希望文章能够帮你解决

vue引入bootstrap——webpack

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过