一、首先确保项目已经使用 vue-cli 脚手架搭建完毕
如果不会搭建,请移步:从零搭建一个vue-cli项目
二、安装jquery
我们都知道 bootstarp 是依赖于 jquery 的,所有要想使用 bootstarp 我们就要先安装 jquery
在命令行打开项目根目录,输入:
npm install jquery --save-dev
安装完成以后修改 build 文件下的 webpack.base.conf.js 文件
在 module.exports 中加入下面代码:
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"windows.jQuery": "jquery"
})
]
修改 module.exports 中 resolve 下的 alias:
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src')
}
改为:
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'assets': path.resolve(__dirname, '../src/assets'),
'jquery': "jquery/src/jquery"
}
然后在 main.js 中引入 jquery
import $ from 'jquery'
到此,jquey就安装完成了!!!
三、引入 bootstarp
先从官网下载 bootstarp 生产环境包:Bootstarp中文网
然后把下载的 bootstarp 的 css、font、js 导入到项目 src/assets 目录下
注意:不导入 fonts 目录可能为报错,别问我怎么知道的!!
在 main.js 中直接引入 bootstarp:
import './assets/css/bootstrap.min.css'
import './assets/js/bootstrap.min'
OK,到此你的项目就能够使用 jquery 和 bootstarp 了,赶快去动手开发吧!