网上查了好多文章,一个简单的引入boostrap都一直出错,试了无数遍之后终于好了。

1.下载包

 cd 到项目下 下载bootstrap包和jquery包
     cnpm install bootstrap --save-dev
      cnpm install jquery --save-dev
下载成功 项目的node_modules中会有boostrap的文件夹,可以查看boostrap版本

2.在main.js中引入文件,下面的路径在node_modules文件夹中可以找到
import $ from 'jquery'
import 'bootstrap/dist/js/bootstrap.js'
import 'bootstrap/dist/css/bootstrap.css'

vue项目中 引入bootstrap

3.配置jquery
   打开 build文件夹中 webpack.base.conf.js

添加以下代码,
    var webpack = require('webpack')
    plugins: [
    new webpack.optimize.CommonsChunkPlugin('common.js'),
    new webpack.ProvidePlugin({
      jQuery: "jquery",
      $: "jquery"
    })
  ],

vue项目中 引入bootstrap

,重新启动一下项目,cnpm run dev

粘一段boostrap导航条进去 ,实现啦

vue项目中 引入bootstrap

相关文章: