vue中使用bootstrap框架

bootstrap依赖于jquery,因此使用时要下载jquery

cnpm install jquery --save-dev ，这样就可以安装jquery

然后修改webpack.base.conf.js(在build文件下)两个地方：

1：加入

?

1

var webpack = require('webpack')

2 在module.exports的里面加入

?

1

2

3

4

5

6

7

plugins: [
   new webpack.optimize.CommonsChunkPlugin('common.js'),
   new webpack.ProvidePlugin({
     jQuery: "jquery",
     $: "jquery"
   })
  ]

最后在main.js中加入import $ form 'jquery',完成jquery的引入

二、引入 bootstrap.css文件：

修改webpack.base.conf.js

?

1

2

3

4

5

6

7

8

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'bootstrap':resolve('src/common/bootstrap-3.3.7-dist')
    }
  }

在main.js中import引入

?

1

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

注意：修改了webpack.base.conf.js里面的内容，一定要重新npm run dev