发新贴  快速回复

vue 中引入 bootstrap 的问题

  KevinBlack
2018-06-04 10:26

老师您好,我想在 vue 中引入 bootstrap 框架,因为 bootstrap 是基于 JQ 的,所以还要引入 JQ 先,可是我写完要么就是没效果,要么就是报错,完全蒙掉了!

我是按照这个网址来做的,https://blog.csdn.net/guorui_cara/article/details/78616281

可是结果完全不行!现将代码打包发上,求教老师!

 
2017年2月8日

你直接在index.html的头部引入jq和bootstrap试试效果,不一定需要在vue里面配置的。

2018-06-04 14:00  回复本帖
 
KevinBlack

这个就是我另一个奇怪之处了,我也尝试了在页面中引入的方式,可是路径怎么写都不对!包括图片的路径也是!

2018-06-04 14:16  回复本帖
 
KevinBlack

现上传附件,由于体积要求,我把 node 环境支持删了,其余的都在,希望老师给看看

附件下载:
 
2018-06-04 14:17  回复本帖
 
2017年2月8日

KevinBlack 2018-06-04 14:17发表的内容:

现上传附件,由于体积要求,我把 node 环境支持删了,其余的都在,希望老师给看看

我在你的文件里面的src文件夹里面放了个jq库jquery-1.12.2.min.js。
然后我在head标签里面引入了jq,我是这样写的,你参考参考,
<script src="./src/jquery-1.12.2.min.js"></script>
引入后,我打开index.html,在控制台看到jq引进去了,不知道你是不是这样写的。
注意在nodejs里面 ./ 需要加的,这nodejs引入相对路劲比较特殊,本来我们平常是可以省略 ./ 的 node就不行。
2018-06-04 14:37  回复本帖
 
KevinBlack

老师,我按照您说的,在页面引用,现在不报错了,可是样式图片什么的完全加载不进来啊!

2018-06-04 15:01  回复本帖
 
2017年2月8日

KevinBlack 2018-06-04 15:01发表的内容:

老师,我按照您说的,在页面引用,现在不报错了,可是样式图片什么的完全加载不进来啊!

样式这些加载不进来,是vue那些写错了吧,因为样式是写在.vue文件里的,你看看控制台,那些样式加载进来没有。还有图片什么的,用控制台来看看。
2018-06-04 15:08  回复本帖
 
KevinBlack

感觉应该是路径问题,可是怎么都试过了还是不对啊!样式肯定没进来,图片的地址看上去貌似没问题,可是图片也出不来

2018-06-04 15:44  回复本帖
 
2017年2月8日

KevinBlack 2018-06-04 15:44发表的内容:

感觉应该是路径问题,可是怎么都试过了还是不对啊!样式肯定没进来,图片的地址看上去貌似没问题,可是图片也出不来

我这边双击直接打开index.html是可以看到图片的,vue那个可能是在node环境下打开,那些路径你加个 ./ 试试。如下:
<img class="ico_logo" src="./src/assets/img/logo.jpg"/>
还有你回复要在回复本贴里回,不然我收不到消息提示。

2018-06-04 16:45  回复本帖
 
2017年2月8日

KevinBlack 2018-06-04 15:44发表的内容:

感觉应该是路径问题,可是怎么都试过了还是不对啊!样式肯定没进来,图片的地址看上去貌似没问题,可是图片也出不来

我直接在头部帮你把css都引入进去了,然后打开可以有图片和样式了,你看看。代码在楼下的附件里
2018-06-04 16:51  回复本帖
 
2017年2月8日

代码见附件。。。

附件下载:
 
2018-06-04 16:51  回复本帖
 
KevinBlack

2017年2月8日 2018-06-04 16:51发表的内容:

代码见附件。。。

老师,我下载了您发来的附件,然后放到 webstorm 里,提示我要运行 npm install ,我点击运行后,就报错
回复您的帖子没办法粘图片过来,我只能粘贴页面上的错误提示过来了
Failed to compile.

./src/main.js
Module not found: Error: Can't resolve 'bootstrap/dist/css/bootstrap.css' in '/Users/fu/Downloads/globle-ctach/src'
@ ./src/main.js 9:0-42
@ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js
2018-06-04 18:31  回复本帖
 
2017年2月8日

KevinBlack 2018-06-04 18:31发表的内容:

老师,我下载了您发来的附件,然后放到 webstorm 里,提示我要运行 npm install ,我点击运行后,就报错
回复您的帖子没办法粘图片过来,我只能粘贴页面上的错误提示过来了
Failed to compile.

./src/main.js
Module not found: Error: Can't resolve 'bootstrap/dist/css/bootstrap.css' in '/Users/fu/Downloads/globle-ctach/src'
@ ./src/main.js 9:0-42
@ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js
你不要在服务器的环境打开,直接本地路劲打开,看看有没有问题。
2018-06-04 20:56  回复本帖
 
KevinBlack

2017年2月8日 2018-06-04 20:56发表的内容:

你不要在服务器的环境打开,直接本地路劲打开,看看有没有问题。
那样子不就成纯静态的了?用不用 vue 有啥关系呢?
2018-06-04 21:36  回复本帖
 
2017年2月8日

KevinBlack 2018-06-04 21:36发表的内容:

那样子不就成纯静态的了?用不用 vue 有啥关系呢?
先在本地环境打开,如果没有问题,就是你vue写错了,或者webpack那些配置写错了。
这样你就需要去看webpack相关视频了,我感觉如果你按视频来是不会错的,毕竟vue的脚手架这些都是配置好的,先跟着视频来。
2018-06-05 09:26  回复本帖
 
KevinBlack

2017年2月8日 2018-06-04 20:56发表的内容:

你不要在服务器的环境打开,直接本地路劲打开,看看有没有问题。
我在静态下可以打开,没有问题,之前也是做的静态页面,现在打算用 vue 重构一下,结果就这样了……有没有啥办法可以在服务端正常打开页面呢?
2018-06-05 09:28  回复本帖
 
2017年2月8日

KevinBlack 2018-06-05 09:28发表的内容:

我在静态下可以打开,没有问题,之前也是做的静态页面,现在打算用 vue 重构一下,结果就这样了……有没有啥办法可以在服务端正常打开页面呢?
我自己在电脑试了下,直接在index.html的头部引入相关的样式,并且路劲对了,然后用服务器的环境打开是正确的,你那边如果不正确,你自己看看图片的路劲是什么,对不对,你自己要排查,图片的路劲放哪个文件夹,等等,反正对应正确绝对是可以的。如果还不行,你重新创建一个vue项目。重新来。
2018-06-05 09:52  回复本帖
登录 后才可以发表回复