在vue中引入bootstrap

vue cli4中引用bootstrap框架的两种方法

bootstrap前端框架，是目前全球最流行的前端样式。
由于目前网上没有一个基于bootstrap v4.x的与vue cli 4.x结合引用的教程，所以不才动手，整理一下，希望于大家有用。

本教程同时还结合与bootstrap 4中文官方站http://code.z01.com/v4 生态，将zico图标库一并讲解。

方法一：在Vue cli4中，可以直接加载BootstrapVue插件，此插件引用后，则需要使用专用的标签来使用，比如导航栏则需要写作为：
NavBar Link Disabled

Search EN ES RU FA User Profile Sign Out 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 引用方法很方便，你即可以在vue cli中，直接点插件工具，然后搜索@vue/cli-plugin-router，增加引用就可。 这样引用要注意，引用最后一步要修改文件，需要点击保存，否则就会失效。

或者你直接运行下面两条命令之一即可完成安装。
vue add bootstrap-vue
npm i vue-cli-plugin-bootstrap-vue

方法二：如果你对原生的html更熟悉，则可以采用手工方法，分别引入Jquery、zico和Bootstrap
先是在项目的根目录中运行npm：

#第一步，分别在项目文件目录运行npm获取四个插件（其中bootstrap需要引用popper.js)
npm installjquery --save-dev
npm install zico -D
npm install bootstrap -D
npm install popper.js -D
1
2
3
4
5
然后在src目录下找到main.js操作：

#第二步，在main.js中引用相关方法
import Vue from ‘vue’
import App from ‘./App.vue’
import router from ‘./router’

// 自定义引用bootstrap和zico
import “bootstrap/dist/css/bootstrap.min.css”;
import “bootstrap/dist/js/bootstrap.min.js”;
import “zico/css/zico.min.css”;

Vue.config.productionTip = false

new Vue({
router,
render: h => h(App)
}).$mount(’#app’)

最后回到根目录进行操作：

#第三步，检查package.json中是否有引用，没有则补上，注意下方dependencies段落：
{
“name”: “vuecli-homepage”,
“version”: “0.1.0”,
“private”: true,
“scripts”: {
“serve”: “vue-cli-service serve”,
“build”: “vue-cli-service build”,
“lint”: “vue-cli-service lint”
},
“dependencies”: {
“core-js”: “^3.6.4”,
“jquery”: “^3.4.1”,
“popper.js”: “^1.16.1”,
“vue”: “^2.6.11”,
“vue-router”: “^3.1.5”,
“zico”: “^1.5.1”
},
“devDependencies”: {
…

上面三步完成后，就可以自由的采用原生的bootstrap代码和标准的html来写作了，直接拷贝 code.z01.com/v4官方站的代码提升开发效率。

这样你就可以直接引用原生的bootstrap4和zico代码，在vue中进行原生的开发了。
效果如下所示：

好了，祝你开发愉快，来自逐浪CMS团队www.z01.com，16年专注研发高端CMS。
————————————————
版权声明：本文为CSDN博主「逐浪CMS发哥」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/zoomla_CMS/article/details/104266979