這篇文章主要介紹Vue中cli3如何引入bootstrap,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
成都創(chuàng)新互聯(lián),為您提供成都網(wǎng)站建設(shè)、成都網(wǎng)站制作、網(wǎng)站營(yíng)銷推廣、網(wǎng)站開發(fā)設(shè)計(jì),對(duì)服務(wù)混凝土攪拌機(jī)等多個(gè)行業(yè)擁有豐富的網(wǎng)站建設(shè)及推廣經(jīng)驗(yàn)。成都創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司成立于2013年,提供專業(yè)網(wǎng)站制作報(bào)價(jià)服務(wù),我們深知市場(chǎng)的競(jìng)爭(zhēng)激烈,認(rèn)真對(duì)待每位客戶,為客戶提供賞心悅目的作品。 與客戶共同發(fā)展進(jìn)步,是我們永遠(yuǎn)的責(zé)任!在 vue 項(xiàng)目中引入 bootstrap,首先要引入兩個(gè)依賴:jQuery 和 popper
安裝命令如下:
cnpm install bootstrap --save-dev cnpm install jquery --save-dev cnpm install popper.js --save-dev
默認(rèn)安裝新版本,如果想要安裝 bootstrap 的 V3 版本(依賴 less),可以:
cnpm install bootstrap@3 --save-dev
或者,采用可視化窗口安裝
1、找到:項(xiàng)目> 依賴> +安裝依賴> 運(yùn)行依賴
搜索并安裝 jquery 和 popper.js
2、找到:項(xiàng)目> 依賴> +安裝依賴> 開發(fā)依賴
搜索并安裝 bootstrap
在 mian.js 頁面,寫以下代碼
// 引入jQuery、bootstrap import $ from 'jquery' import 'bootstrap' // 引入bootstrap樣式 import 'bootstrap/dist/css/bootstrap.min.css' import 'bootstrap/dist/js/bootstrap.min.js' // 全局注冊(cè) $ Vue.prototype.$ = $
在 vue.config.js 中,寫如下代碼(如果沒有 vue.config.js ,則在 package.json 同級(jí)目錄下手動(dòng)新建)
const webpack = require("webpack") module.exports = { // 配置插件參數(shù) configureWebpack: { plugins: [ // 配置 jQuery 插件的參數(shù) new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquery', Popper: ['popper.js', 'default'] }) ] } }
然后,就可以使用了
測(cè)試bootstrap
<template> <div class="container"> <div class="row"> <div class="col-md-6"> <button class="btn btn-primary">測(cè)試按鈕</button> </div> </div> </div> </template>
以上是“Vue中cli3如何引入bootstrap”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對(duì)大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
當(dāng)前文章:Vue中cli3如何引入bootstrap-創(chuàng)新互聯(lián)
當(dāng)前地址:http://m.rwnh.cn/article16/dggegg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站建設(shè)、定制開發(fā)、動(dòng)態(tài)網(wǎng)站、手機(jī)網(wǎng)站建設(shè)、關(guān)鍵詞優(yōu)化、營(yíng)銷型網(wǎng)站建設(shè)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容