在vue项目中引入bootstrap框架

第一步，引入jQuery。

在项目的根目录下，使用命令：

npm install jquery -S

打开项目下的文件夹build中的webpack.base.conf.js文件，在文件开头添加以下代码：

var webpack = require('webpack')

然后在webpack.base.conf.js文件中，找到 module.exports={}，在其中插入以下代码：

plugins: [

    new webpack.optimize.CommonsChunkPlugin('common.js'),

    new webpack.ProvidePlugin({

      jQuery: "jquery",

      $: "jquery"

    })

  ],

然后在main.js中，引入jQuery

import $ from 'jquery'

 . 第二步，引入bootstrap框架：

在项目的根目录下，输入命令：

npm install bootstrap3 -S

在这里我选择bootstrap3版本的

然后在main.js文件中引入bootstrap

import Vue from 'vue'

import App from './App'

import router from './router'

import fastClick from 'fastClick'

import '@/assets/style/reset.css'

import '@/assets/style/border.css'

import '@/assets/style/reset.css'

import $ from 'jquery'

import 'bootstrap3/dist/css/bootstrap.css'

import 'bootstrap3/dist/js/bootstrap.js'

Vue.config.productionTip = false

new Vue({

  el: '#app',

  router,

  components: { App },

  template: '<App/>'

})