Vue项目引入bootstrap框架

291 阅读1分钟

基本介绍:

       都知道,bootstrap框架基于jQuery,因此,想使用bootstrap框架,就得先引入jQuery。

第一步,引入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](http://webpack.optimize.commonschunkplugin/)('common.js'),
new webpack.ProvidePlugin({
jQuery: "jquery",
$: "jquery"
})
],

然后在main.js中,引入jQuery

import $ from 'jquery'

然后就可以在helloworld.vue文件中验证jQuery是否安装好。

第二步,引入bootstrap框架: 在项目的根目录下,输入命令:

npm install bootstrap3 -S

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