詳解windows下vue-cli及webpack 構(gòu)建網(wǎng)站(二)導(dǎo)入bootstrap樣式
更新時間：2017年06月17日 10:20:56 作者：安樹
這篇文章主要介紹了詳解windows下vue-cli及webpack 構(gòu)建網(wǎng)站(二)導(dǎo)入bootstrap樣式，具有一定的參考價值，感興趣的小伙伴們可以參考一下
1、先安裝好vue-cli，如果還沒有安裝好的可以參考：《windows下vue-cli及webpack 構(gòu)建網(wǎng)站(一)環(huán)境安裝》
2、安裝好之后Vue的歡迎界面，我們要做個例子導(dǎo)入bootstrap的樣式，就先去復(fù)制一份bootstrap的導(dǎo)航樣式過來替換掉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>
內(nèi)容改成
<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>
這時候運(yùn)行vue 顯示的頁面變成：
現(xiàn)在我們加入的bootstrap導(dǎo)航代碼已經(jīng)可以顯示出來了，但是有點(diǎn)丑，是因為我們還沒把bootstrap的CSS文件加載過來，接下來我們就是要導(dǎo)入CSS文件和js文件了。
3、下載Bootstrap文件包，然后把css、js、fonts三個文件夾復(fù)制到vue項目的src\assets目錄下。
4、讓vue支持jQuery需要先安裝jquery插件，通過cmd命令進(jìn)入項目文件夾，然后運(yùn)行 cnpm install jquery --save-dev 安裝插件
接著分別運(yùn)行
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'
接著保存之后重啟一下服務(wù) npm run dev
如果提示錯誤
說明bootstrap.js文件格式不匹配不能通過webpack的格式檢查，這樣我們就需要在webpack的配置文件里面把js文件設(shè)置成不檢查格式，打開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/]
}
接著保存之后運(yùn)行npm run dev
就可以看到導(dǎo)航的效果出來了
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
詳解vue-template-admin三級路由無法緩存的解決方案
這篇文章主要介紹了vue-template-admin三級路由無法緩存的解決方案，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
在平時開發(fā)是經(jīng)常用到一些父子組件通信,經(jīng)常用到props、vuex等等,下面這篇文章主要給大家介紹了關(guān)于vue中v-model和.sync修飾符區(qū)別的相關(guān)資料,需要的朋友可以參考下2022-06-06
element 穿梭框性能優(yōu)化的實(shí)現(xiàn)
本文主要介紹了element 穿梭框性能優(yōu)化，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
基于vue-cli 打包時抽離項目相關(guān)配置文件詳解
下面小編就為大家分享一篇基于vue-cli 打包時抽離項目相關(guān)配置文件詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
組件是可以在它們自己的模板中調(diào)用自身的,不過它們只能通過?name?選項來做這件事,下面這篇文章主要給大家介紹了關(guān)于Vue組件化開發(fā)的必備技能之組件遞歸的相關(guān)資料,需要的朋友可以參考下2022-01-01
本文介紹了Vue.js在SEO優(yōu)化方面的挑戰(zhàn),并提供了一些方法來解決這些問題,包括使用服務(wù)器端渲染、預(yù)渲染和使用VueRouter的History模式來生成靜態(tài)HTML頁面,以及添加meta信息和內(nèi)部鏈接來提高搜索引擎的索引和排名2025-02-02
這篇文章主要為大家詳細(xì)介紹了Vue.js實(shí)現(xiàn)時間軸功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
vue.js 左側(cè)二級菜單顯示與隱藏切換的實(shí)例代碼
這篇文章主要介紹了vue.js 左側(cè)二級菜單顯示與隱藏切換的實(shí)例代碼,需要的朋友可以參考下2017-05-05
vue中el-table合并列的具體實(shí)現(xiàn)
本文主要介紹了vue中el-table合并列的具體實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
Vue3動態(tài)倒計時的代碼實(shí)現(xiàn)
在使用Vue框架開發(fā)Web應(yīng)用時,倒計時功能是一個常見的需求,它可以在一定時間內(nèi)重復(fù)執(zhí)行某些操作,比如防止用戶重復(fù)提交表單、限制投票次數(shù)、實(shí)現(xiàn)驗證碼獲取等功能,所以本文給大家介紹了Vue3動態(tài)倒計時的代碼實(shí)現(xiàn),需要的朋友可以參考下2024-09-09