这是一个创建于 2264 天前的主题，其中的信息可能已经有所发展或是发生改变。
bootstrap 前端框架，是目前全球最流行的前端样式。 由于目前网上没有一个基于 bootstrap v4.x 的与 vue cli 4.x 结合引用的教程，所以不才动手，整理一下，希望于大家有用。
本教程同时还结合与 bootstrap 4 中文官方站 http://code.z01.com/v4 生态，将 zico 图标库一并讲解。
方法一：在 Vue cli4 中，可以直接加载 BootstrapVue 插件，此插件引用后，则需要使用专用的标签来使用，比如导航栏则需要写作为：
<b-navbar toggleable="lg" type="dark" variant="info"> <b-navbar-brand href="#">NavBar</b-navbar-brand> <b-navbar-toggle target="nav-collapse"></b-navbar-toggle> <b-collapse id="nav-collapse" is-nav=""> <b-navbar-nav> <b-nav-item href="#">Link</b-nav-item> <b-nav-item disabled="" href="#">Disabled</b-nav-item> </b-navbar-nav>
<!-- Right aligned nav items --> <b-navbar-nav class="ml-auto"> <b-nav-form> <b-form-input size="sm" class="mr-sm-2" placeholder="Search"></b-form-input> <b-button size="sm" class="my-2 my-sm-0" type="submit">Search</b-button> </b-nav-form> <b-nav-item-dropdown text="Lang" right> <b-dropdown-item href="#">EN</b-dropdown-item> <b-dropdown-item href="#">ES</b-dropdown-item> <b-dropdown-item href="#">RU</b-dropdown-item> <b-dropdown-item href="#">FA</b-dropdown-item> </b-nav-item-dropdown> <b-nav-item-dropdown right> <!-- Using 'button-content' slot --> <template v-slot:button-content> <em>User</em> </template> <b-dropdown-item href="#">Profile</b-dropdown-item> <bdropdown-item href="#">Sign Out</b-dropdown-item> </b-nav-item-dropdown> </b-navbar-nav> </b-collapse> 引用方法很方便，你即可以在 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 然后在 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。
Select Language