您现在的位置:首页 >> 前端 >> 内容

如何在vue-cli使用bootstrap框架

时间:2017/10/8 10:14:00 点击:

  核心提示:一般来说,如果你只使用bootstrap框架的样式,就直接把js那个文件夹删掉,再把它们放进一个文件夹下,如src/assets,当然你也可以自己建立一个放置共用东西的文件夹。然后在src/main....

一般来说,如果你只使用bootstrap框架的样式,就直接把js那个文件夹删掉,再把它们放进一个文件夹下,如src/assets,当然你也可以自己建立一个放置共用东西的文件夹。

然后在src/main.js里面把它import进去就行了,如:import './assets/bootstrap/css/bootstrap.min.css'。这是最简单的解决方案了。

但是你要使用里面的一些特效,就会使用JS。bootstrap框架的js来源于jq框架,所以你还得安装支持jq语法的依赖,在命令行输入(c)npm install JQuery --save-dev,推荐使用cnpm国内淘宝镜像,下载速度快,不要翻墙。当然你也可以直接写进package.json,直接npm install。然后在bulid文件下找到webpack.base.conf.js。在上面加var webpack = require('webpack')。在下面的module.exports里面加入:

plugins: [
new webpack.ProvidePlugin({
$:"jquery",
jQuery:"jquery",
"windows.jQuery":"jquery"
})
]

然后在main.js里面import进来就行了,如import $ from 'jquery'。如果是局部安装的直接用相对路径。

如果有使用eslint语法检测,找到eslintigore文件夹,把bootstrap里的JS文件夹忽略掉。

Tags:如何 何在 在V VU 
作者:网络 来源:Emperor灬fl