java加载bootstrap,Vue中如何引入BootStrap？

cd D:/VueProjects/helloworld cd到项目根目录

npm install jquery -S 下载jquery

找到 build 目录下的 webpack.base.conf.js 文件

加入以下语句： var webpack = require('webpack')

和

// 增加一个plugins

plugins: [

new webpack.ProvidePlugin({

$: "jquery",

jQuery: "jquery"

})

],

添加后文件如下： 'use strict'

const path = require('path')

const utils = require('./utils')

const config = require('../config')

const vueLoaderConfig = require('./vue-loader.conf')

var webpack = require('webpack')

function resolve (dir) {

return path.join(__dirname, '..', dir)

}

module.exports = {

context: path.resolve(__dirname, '../'),

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'),

}

},

module: {

rules: [

{

test: /\.vue$/,

loader: 'vue-loader',

options: vueLoaderConfig

},

{

test: /\.js$/,

loader: 'babel-loader',

include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]

},

{

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"

})

],

node: {

// prevent webpack from injecting useless setImmediate polyfill because Vue

// source contains it (although only uses it if it's native).

setImmediate: false,

// prevent webpack from injecting mocks to Node native modules

// that does not make sense for the client

dgram: 'empty',

fs: 'empty',

net: 'empty',

tls: 'empty',

child_process: 'empty'

}

}

再 找到 main.js 文件，加入以下语句： import $ from 'jquery'

测试 Jquery 是否安装成功?

在HelloWorld.vue中添加:

export default {

name: 'HelloWorld',

data () {

return {

msg: 'Welcome to Your Vue.js App HelloWorld'

}

},

created(){

console.log($)

}

}

启动项目

结果：