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

<!-- 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>    
    <b-dropdown-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。