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  


    
        
        
    Profile    
    Sign Out  
    

引用方法很方便，你即可以在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。