windows下vue-cli导入bootstrap样式

1、先安装好vue-cli，如果还没有安装好的可以参考：《》

2、安装好之后Vue的欢迎界面，我们要做个例子导入bootstrap的样式，就先去复制一份bootstrap的导航样式过来替换掉Vue的欢迎页面吧，打开Src文件夹下面的components组件目录，然后打开 Hello.vue文件，把

内容改成

这时候运行vue 显示的页面变成：

现在我们加入的bootstrap导航代码已经可以显示出来了，但是有点丑，是因为我们还没把bootstrap的CSS文件加载过来，接下来我们就是要导入CSS文件和JS文件了。

3、下载Bootstrap文件包，然后把css、js、fonts三个文件夹复制到vue项目的srcassets目录下。

4、让vue支持jQuery需要先安装jquery插件，通过cmd命令进入项目文件夹，然后运行 cnpm install jquery --save-dev 安装插件

接着分别运行

安装支持css的插件。

5、修改build文件夹下面的webpack.base.conf.js文件，让其支持外部的css和js，首先打开文件后在头部加入：

然后在

后面加

把

改成

保存文件

6、接着修改 src文件夹下面的main.js文件，打开文件之后在顶部加入

接着保存之后重启一下服务 npm run dev

如果提示错误

说明bootstrap.js文件格式不匹配不能通过webpack的格式检查，这样我们就需要在webpack的配置文件里面把js文件设置成不检查格式，打开build文件夹下的webpack.base.conf.js文件，找到 preLoaders 下面的

代码，修改成

接着保存之后运行npm run dev

就可以看到导航的效果出来了

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!