詳解windows下vue-cli及webpack 構建網(wǎng)站(二)導入bootstrap樣式

更新時間：2017年06月17日 10:20:56 作者：安樹

這篇文章主要介紹了詳解windows下vue-cli及webpack 構建網(wǎng)站(二)導入bootstrap樣式，具有一定的參考價值，感興趣的小伙伴們可以參考一下

1、先安裝好vue-cli，如果還沒有安裝好的可以參考：《windows下vue-cli及webpack 構建網(wǎng)站(一)環(huán)境安裝》

2、安裝好之后Vue的歡迎界面，我們要做個例子導入bootstrap的樣式，就先去復制一份bootstrap的導航樣式過來替換掉Vue的歡迎頁面吧，打開Src文件夾下面的components組件目錄，然后打開 Hello.vue文件，把

<h1>{{ msg }}</h1>
  <h2>Essential Links</h2>
  <ul>
   <li><a  rel="external nofollow" target="_blank">Core Docs</a></li>
   <li><a  rel="external nofollow" target="_blank">Forum</a></li>
   <li><a  rel="external nofollow" target="_blank">Gitter Chat</a></li>
   <li><a  rel="external nofollow" target="_blank">Twitter</a></li>
   <br>
   <li><a  rel="external nofollow" target="_blank">Docs for This Template</a></li>
  </ul>
  <h2>Ecosystem</h2>
  <ul>
   <li><a  rel="external nofollow" target="_blank">vue-router</a></li>
   <li><a  rel="external nofollow" target="_blank">vuex</a></li>
   <li><a  rel="external nofollow" target="_blank">vue-loader</a></li>
   <li><a  rel="external nofollow" target="_blank">awesome-vue</a></li>
  </ul>
 </div>
</template>

內容改成

<template>
 <nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
   <!-- Brand and toggle get grouped for better mobile display -->
   <div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
     <span class="sr-only">Toggle navigation</span>
     <span class="icon-bar"></span>
     <span class="icon-bar"></span>
     <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >{{ msg }}</a>
   </div>

   <!-- Collect the nav links, forms, and other content for toggling -->
   <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav">
     <li class="active"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Link</a></li>
     <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Link</a></li>
     <li class="dropdown">
      <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
      <ul class="dropdown-menu" role="menu">
       <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Action</a></li>
       <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Another action</a></li>
       <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Something else here</a></li>
       <li class="divider"></li>
       <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Separated link</a></li>
       <li class="divider"></li>
       <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >One more separated link</a></li>
      </ul>
     </li>
    </ul>
    <form class="navbar-form navbar-left" role="search">
     <div class="form-group">
      <input type="text" class="form-control" placeholder="Search">
     </div>
     <button type="submit" class="btn btn-default">Submit</button>
    </form>
    <ul class="nav navbar-nav navbar-right">
     <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Link</a></li>
     <li class="dropdown">
      <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
      <ul class="dropdown-menu" role="menu">
       <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Action</a></li>
       <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Another action</a></li>
       <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Something else here</a></li>
       <li class="divider"></li>
       <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Separated link</a></li>
      </ul>
     </li>
    </ul>
   </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
 </nav>
</template>

這時候運行vue 顯示的頁面變成：

現(xiàn)在我們加入的bootstrap導航代碼已經(jīng)可以顯示出來了，但是有點丑，是因為我們還沒把bootstrap的CSS文件加載過來，接下來我們就是要導入CSS文件和js文件了。

3、下載Bootstrap文件包，然后把css、js、fonts三個文件夾復制到vue項目的src\assets目錄下。

4、讓vue支持jQuery需要先安裝jquery插件，通過cmd命令進入項目文件夾，然后運行 cnpm install jquery --save-dev 安裝插件

接著分別運行

cnpm install style-loader --save-dev 
cnpm install css-loader --save-dev 
cnpm install file-loader --save-dev

安裝支持css的插件。

5、修改build文件夾下面的webpack.base.conf.js文件，讓其支持外部的css和js，首先打開文件后在頭部加入：

var webpack = require('webpack')

然后在

module.exports = {
 entry: {
  app: './src/main.js'
 },

后面加

plugins: [
 new webpack.ProvidePlugin({
  $: "jquery",
  jQuery: "jquery",
  "windows.jQuery": "jquery"
 })
],

把

alias: {
 'vue$': 'vue/dist/vue.common.js',
 'src': path.resolve(__dirname, '../src'),
 'assets': path.resolve(__dirname, '../src/assets'),
 'components': path.resolve(__dirname, '../src/components')
}

改成

alias: {
 'vue$': 'vue/dist/vue.common.js',
 'src': path.resolve(__dirname, '../src'),
 'assets': path.resolve(__dirname, '../src/assets'),
 'components': path.resolve(__dirname, '../src/components'),
 jquery: "jquery/src/jquery"
}

保存文件

6、接著修改 src文件夾下面的main.js文件，打開文件之后在頂部加入

import './assets/css/bootstrap.min.css'
import './assets/js/bootstrap.min'

接著保存之后重啟一下服務 npm run dev

如果提示錯誤

說明bootstrap.js文件格式不匹配不能通過webpack的格式檢查，這樣我們就需要在webpack的配置文件里面把js文件設置成不檢查格式，打開build文件夾下的webpack.base.conf.js文件，找到 preLoaders 下面的

{
 test: /\.js$/,
 loader: 'eslint',
 include: projectRoot,
 exclude: /node_modules/
}

代碼，修改成

{
 test: /\.js$/,
 loader: 'eslint',
 include: projectRoot,
 exclude: [/node_modules/,/js/]
}

接著保存之后運行npm run dev

就可以看到導航的效果出來了

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

詳解vue-template-admin三級路由無法緩存的解決方案
這篇文章主要介紹了vue-template-admin三級路由無法緩存的解決方案，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-03-03
vue中v-model和.sync修飾符的區(qū)別
在平時開發(fā)是經(jīng)常用到一些父子組件通信,經(jīng)常用到props、vuex等等,下面這篇文章主要給大家介紹了關于vue中v-model和.sync修飾符區(qū)別的相關資料,需要的朋友可以參考下
2022-06-06
element 穿梭框性能優(yōu)化的實現(xiàn)
本文主要介紹了element 穿梭框性能優(yōu)化，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-10-10
基于vue-cli 打包時抽離項目相關配置文件詳解
下面小編就為大家分享一篇基于vue-cli 打包時抽離項目相關配置文件詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-03-03
Vue組件化開發(fā)的必備技能之組件遞歸
組件是可以在它們自己的模板中調用自身的,不過它們只能通過?name?選項來做這件事,下面這篇文章主要給大家介紹了關于Vue組件化開發(fā)的必備技能之組件遞歸的相關資料,需要的朋友可以參考下
2022-01-01
使用Vue后如何針對搜索引擎做SEO優(yōu)化
本文介紹了Vue.js在SEO優(yōu)化方面的挑戰(zhàn),并提供了一些方法來解決這些問題,包括使用服務器端渲染、預渲染和使用VueRouter的History模式來生成靜態(tài)HTML頁面,以及添加meta信息和內部鏈接來提高搜索引擎的索引和排名
2025-02-02
Vue.js實現(xiàn)時間軸功能
這篇文章主要為大家詳細介紹了Vue.js實現(xiàn)時間軸功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-08-08
vue.js 左側二級菜單顯示與隱藏切換的實例代碼
這篇文章主要介紹了vue.js 左側二級菜單顯示與隱藏切換的實例代碼,需要的朋友可以參考下
2017-05-05
vue中el-table合并列的具體實現(xiàn)
本文主要介紹了vue中el-table合并列的具體實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2023-04-04
Vue3動態(tài)倒計時的代碼實現(xiàn)
在使用Vue框架開發(fā)Web應用時,倒計時功能是一個常見的需求,它可以在一定時間內重復執(zhí)行某些操作,比如防止用戶重復提交表單、限制投票次數(shù)、實現(xiàn)驗證碼獲取等功能,所以本文給大家介紹了Vue3動態(tài)倒計時的代碼實現(xiàn),需要的朋友可以參考下
2024-09-09