在vue中安装Bootstrap
1.创建vue项⽬,输⼊以下命令
>>vue init webpack projectName(projectName表⽰项⽬名,⾃⼰按照实际命名)
2.按照指⽰完成项⽬的创建
3.输⼊命令
>>cnpm run dev(项⽬创建成功,在浏览器中输⼊⼩⿊窗给出的⽹址即可打开所创建项⽬的⽹页)
4.在⼩⿊窗中输⼊命令安ootstrap
>>cnpm install bootstrap -S
ps.特别说明
(1)需要安装依赖
在这⾥要特别指出的是在vue中bootstrap的使⽤是依赖于jQuery的,所以在安装完bootstrap也需要安装jQuery。
与此同时,第4步中安装的bootstrap没有指定安装的版本,默认是安装了最新版本,即bootstrap4版本,它除了依赖于jQuery之外也依赖于Popper,所以在这⾥需要安装两个依赖,即jQuery与Popper
(2)需要修改代码⽂件中的部分代码
在这⾥需要说明的是,等到jQuery安装完成后,在main.js⽂件中引⼊即可。(不是很懂?继续看下去叭!)
5.安装jQuery
>>cnpm install jquery --save -dev
6.在代码⽂件中修改相关配置
(1)⾸先在f.js⽂件头中添加如下代码
(2)再在此⽂件中到resolve,在末尾添加jQuery
(3)再在最后添加plugins
(4)在main.js中引⼊jQuery,因为之前安装了bootstrap,所以⼀同引⼊
7.⼀般很多⼈安装了bootstrap之后会发现并不能在项⽬中愉快地使⽤,再结合上⾯的叙述多安装个jQuery就搞定,但是⼜会发现有个问题,如图,⼩⿊窗会有这样的错误提⽰,最后⼀⾏告知我们需要安装Popper,OK,试⼀试安装Popper吧
8.回看第四点中的说明,我们可以知道我们还⽋缺⼀个Popper依赖,故现在需要做的是“安装Popper依赖”
9.同样地,安装完之后也是需要修改代码⽂件中的配置;
如图所⽰,在原本引⼊jQuery新添加的plugin中末尾添加⼀⾏Popper
添加Popper
10.到这⾥,需要安装的基本搞定,所以来测试⼀下安装是否成功,也就是bootstrap是否能够正常使⽤为此,我们可以编写bootstrap代码再去浏览器中查看是否有我们想要的效果
11.打开浏览器,查看效果,如图所⽰
jquery在项目里是干啥的看到最后⼀⾏的效果就知道安装成功啦,撒花花,安装成功,可以愉快地使⽤啦。
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论