vue中引入bootstrap的詳細(xì)教程（步驟）

var webpack = require('webpack')

// 增加一個
pluginsplugins: [ 
new webpack.ProvidePlugin({ 
$: "jquery", 
jQuery: "jquery" 
})],

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({
 $: "jquery",
 jQuery: "jquery"
 })
 ],
}

import $ from 'jquery'

<template>
 <div class="hello">
 <h1>{{ msg }}</h1>
 <h2>Essential Links</h2>
 <ul>
 <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
 <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
 <li><a href="https://chat.vuejs.org" target="_blank">Community Chat</a></li>
 <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
 <br>
 <li><a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This Template</a></li>
 </ul>
 <h2>Ecosystem</h2>
 <ul>
 <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
 <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
 <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
 <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
 </ul>
 <div class="btn-group" role="group" aria-label="...">
 <button type="button" class="btn btn-default">Left</button>
 <button type="button" class="btn btn-default">Middle</button>
 <button type="button" class="btn btn-default">Right</button>
 </div>
 <div id="cc">cc</div>
 </div>
</template>
 
<script>
 $(function () {
 alert(123);
 });
 export default {
 name: 'hello',
 data () {
 return {
 msg: 'Welcome to Your Vue.js App'
 }
 }
 }
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
 h1, h2 {
 font-weight: normal;
 }
 
 ul {
 list-style-type: none;
 padding: 0;
 }
 
 li {
 display: inline-block;
 margin: 0 10px;
 }
 
 a {
 color: #42b983;
 }
</style>

import 'bootstrap/dist/css/bootstrap.min.css'import 'bootstrap/dist/js/bootstrap.min'

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import $ from 'jquery'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
 el: '#app',
 router,
 template: '<App/>',
 components: {App}
})