Vue中怎么构建一个Bootstrap 4 应用,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。
创新互联公司专业为企业提供宁国网站建设、宁国做网站、宁国网站设计、宁国网站制作等企业网站建设、网页设计与制作、宁国企业网站模板建站服务,10多年宁国做网站经验,不只是建网站,更提供有价值的思路和整体网络服务。
安装和设置
Bootstrap-Vue项目提供了Bootstrap项目中jQuery组件依赖了Vue替换方案,可以实现绝大多数案例和组件的替代。我们建议以Vue Cli插件方式使用,这样可以实现项目自动创建和配置,依赖项添加。首先我们安装Vue Cli。
安装Vue Cli
由于npm安装较慢,甚至会失败,需要,先安装国内镜像,可以使用cnpm或者npm别称:
然后用cnpm安装vue.js
cnpm install -g @vue.js
创建项目
vue create hello-chongchong
这样Vue CLI会自动创建一个Vue项目,提示选择项,选择"default"即可。
进入该项目目录:
cd hello-chongchong
使用下面的命令将Bootstrap-Vue插件添加到项目中。选项提示时,选择 "Y"。
vue add bootstrap-vue
这样无需任何复杂设置就可以设置好一个以vue启动的Bootstrap项目。
清除示例
默认情况下,Vue CLI为提供了一个示例HelloWorld应用程序。这都没啥用的,我们直接清除,包括App.vue和部件目录下的 HelloWorld.vue:
>src/components/App.vue rm src/components/HelloWorld.vue
示例使用
创建模版
Bootstrap所有功能基本都可以在bootstrap-vue中以全局注册的组件来使用。这些组件通常和Bootstrap同名,为了以示区别,他们都以开头b-xxxx。
在此我们创建一个新的App.vue模板并添加一个Bootstrap容器:
Hello, Chongchong!
然后启用该服务
npm run serve
然后,浏览器访问,应该看到以下内容:
另外,如果查看页面源码,可以看到该b-container组件已使用常规的Bootstrap元素和类进行渲染:
Hello, Chongchong!
组件配置
许多组件都可以使用Vue道具进行配置。例如, b-btn组件,可以在页面中添加一个将按钮。b-btn有一个variant控制按钮主题,此处设置为primary。
Hello, Chongchong!
Click
Vue支持将动态值绑定到Bootstrap组件。例如,对b-alert组件添加一个alert提示信息。我们将其设success并提供一些提示信息。
Hello, Chongchong!
Click You clicked the button!
可以将showprop绑定到本地data属性来有条件地显示信息showAlert。然后将showAlert响应组件click事件来切换的值b-btn。
Hello, Chongchong!
Click You clicked the button!
比jQuery逻辑写起来简单多了。
Bootstrap-Vue指令
一些Bootstrap功能是作为指令而非组件提供的,因此可以轻松地将其添加到给已有元素。
例如,要添加工具提示功能,可以使用v-b-tooltip指令。下面我们使用指令参数hover向按钮添加一个,在按钮悬停时触发。
Click
注:tooltip插件需要popper.js的依赖项,但是使用Vue CLI安装Bootstrap-Vue,会自动include。
看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注创新互联行业资讯频道,感谢您对创新互联的支持。