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

[wwwwzf]

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>    
    <b-dropdown-item href="#">Sign Out</b-dropdown-item>  
    </b-nav-item-dropdown>
</b-navbar-nav>
</b-collapse>

</b-collapse></b-navbar>

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

[suyuyu]

为什么 vue 要用 bootstrap?

[guolaopi]

@suyuyu 我也看蒙了，不都为了抛弃 jq 才用 vue 吗。怎么绕一圈还是回 jq 上了？

[imnaive]

返璞归真吗？

[wwwwzf]

@suyuyu 用 vue 不是要弃 bootstrap，不同的生态有不同的人群使用，vue 官方也没有这样的主张。
一般来说，用 vue 大多是中后台开发者，他们图省事，不能一行一行的写 css

而纯前端开发者，熟悉世界上最流行的 bootstrap 框架，二者整合，有其背景。

可以问你们，用 PS 做图、用 DW 写一行行的代码，是很不是很土？不能算前端，必须开口阿里云、vue 框架才叫前端是吧？
--其实。。。。。。。。