1. 程式人生 > >vue2以及新web框架如何import bootstrap4及報錯處理

vue2以及新web框架如何import bootstrap4及報錯處理

想必大家對新web框架都有所瞭解也遇到過一些坑,接下來我來分享一下我遇到的坑;

今天這個坑大部分來自於對webpack配置不夠了解

當你配置新web專案的時候 你想用其他框架的時候 怎麼辦 試著摸索模仿寫法

import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios'
import qs from 'qs'

當你這麼引入一個bootstrap的時候,瀏覽器會報一個錯誤

jquery is not defind
Bootstrap\'s JavaScript requires jQuery. jQuery must be included before Bootstrap\'s
JavaScript.

這麼一個錯誤 一個低階錯誤
因為bootstrap.js是依賴JQuery的,所以要在webpack.base.conf.js中載入juery外掛,


npm install --save jquery

不要試圖import jquery
因為import是非同步載入模組 所以你得到結果還是報錯,我們必須在webpack配置上下手

在webpack.base.conf.js中新增一下程式碼

plugins: [
   new webpack.optimize.CommonsChunkPlugin('common'),
   new webpack.ProvidePlugin({
     jQuery: 'jquery'
, $: 'jquery', })

新增jq 則會與webpack作為基礎外掛(依賴)一同載入;
* 以上可以解決bootstarp3以下版本問題 因為4版本 還引入popper *

我們 npm install [email protected] 的時候 他並沒有下載popper 這個人感覺 也是很坑

Error Bootstrap dropdown require Popper.js (https://popper.js.org)

Bootstrap4 的dropdown外掛是依賴popper.js 我們需要自己下載popper
npm install –save popper.js

plugins: [
   new webpack.optimize.CommonsChunkPlugin('common'),
   new webpack.ProvidePlugin({
     jQuery: 'jquery',
     $: 'jquery',
    Popper: 'popper.js'
   })

* 這樣就解決了 bootstrap4 載入報錯問題! *

相關推薦

vue2以及web框架如何import bootstrap4處理

想必大家對新web框架都有所瞭解也遇到過一些坑,接下來我來分享一下我遇到的坑; 今天這個坑大部分來自於對webpack配置不夠了解 當你配置新web專案的時候 你想用其他框架的時候 怎麼辦 試著摸索模仿寫法 import Vue from 'vue'

Hadoop jps正確使用流程處理

Hadoop簡介:jps(Java Virtual Machine Process Status Tool)是JDK 1.5提供的一個顯示當前所有java進程pid的命令,簡單實用,非常適合在linux/unix平臺上簡單察看當前java進程的一些簡單情況。詳細參數請參考:https://www.cnblog

ubuntu下安裝curl處理

1)安裝curl 1.1  下載安裝包 wget https://curl.haxx.se/download/curl-7.55.1.tar.gz 1.2 解壓 tar -xzvf curl-7.55.1.tar.gz 1.3 安裝 cd curl-

庫安裝:matplotlib處理

在pycharm中安裝matplotlib時一直提示出錯。 後來嘗試通過cmd進行安裝:管理員模式下啟動cmd,直接輸入pip install matplotlib 安裝到中途時,又再次出錯。這是,再次在管理員模式下啟動cmd,直接輸入pip install matplotlib 重複多次

Jenkins系列_外掛安裝處理

進入Jenkins之後我們可以進行外掛的安裝,外掛管理位於以下模組:發現上面報了一堆錯誤,是因為外掛的依賴沒有安裝好,那麼這一節,就先把這些錯誤解決掉吧。解決完成後,也就基本會使用外掛中心了。先貼個jenkins外掛下載地址,待會我們要通過下載相應的外掛來修復這些錯誤。報錯解

Python處理驗證碼第一篇(pytesser初探處理

前言: 春節期間,無法全身心投入地去寫爬蟲,那就玩玩驗證碼吧,應該比較有趣! 首次接觸驗證碼識別,用pytesser接觸一下最簡單的驗證碼先,程式碼參照:使用python以及工具包進行簡單的驗證碼識別。具體細節可以參見原文,裡面安裝和報錯處理沒有詳細記錄,我

CentOS下Redis的安裝處理

參考資料: 前言 安裝Redis需要知道自己需要哪個版本,有針對性的安裝,比如如果需要redis GEO這個地理集合的特性,那麼redis版本就不能低於3.2版本,由於這個特性是3.2版本才有的。另外需要注意的是,Redis約定次版本號(即第一個小數點後的數字)為

ubuntu16.04 CRF++安裝處理

安裝 1.下載CRF++-0.58.tar.gz 2.cd到壓縮包目錄,執行: (1) tar zxvf CRF++-0.58.tar.gz (2)cd CRF++-0.58 (3)./configure (4)make (5)su (6)ma

ubuntu14.04中qemu編譯安裝處理

ubuntu下原始碼編譯安裝步驟 @oli:  ./configure --target-list=x86_64-softmmu, x86_64-linux-user @oli:  make -j4 @oli:  make install -j4 ubuntu編譯qemu報

beego web框架(二)之日誌處理

1. 使用入門 beego 的日誌處理是基於 logs 模組搭建的,內建了一個變數 BeeLogger,預設已經是 logs.BeeLogger 型別,初始化了 console,也就是預設輸出到 console。 beego.Emergency("thi

vue2.0+ 使用v-model 解決辦法;

var childVue = { template:"<div><div>{{ msg }}</div><button @click=\"changeFater\">改變父元件值</button></div>",

Web呼叫網路攝像頭各類錯誤處理

最近由於業務的原因,需要在Web端頁面接入除錯各類的網路攝像頭,遇到了很多匪夷所思的問題(說的就是讀得出攝像頭的品牌,讀不出攝像頭的解析度)。於是整理了這篇文章作為備忘錄,也希望能幫到有類似的小夥伴們。 ### 基礎程式碼 ```javascript navigator.mediaDevices.getU

【EF框架】使用params參數傳值防止SQL註入處理

collect oar mapping cnblogs ken datetime nbsp .com src 通過SqlParameter傳時間參數,代碼如下: var param = new List<SqlParamete

安裝xcode6 beta 後調試出現Unable to boot the iOS Simulator以及編譯蘋果官方Swift的demofailed with exit code 1的解決的方法

imu fonts mat 詳細說明 watermark data- 重新啟動 技術分享 說明 蘋果昨天公布新語言Swift(雨燕),須要安裝xcode6 以及mac os 系統為10.9以上。 (xcode6 beta 可在官方下載。須要登錄開發人員賬號;mac os

ECShop添加模塊,管理權限

ren 權限 方法 nbsp argument php dmi join() all 提示報錯信息: Warning: join(): Invalid arguments passed in D:\phpStudy\WWW\TimmyMall\admin\privilege

zabbix源碼安裝流程解決方法

zabbixzabbix源碼安裝流程及報錯解決方法一. zabbix的介紹1) zabbix是什麽zabbix是一款基於web頁面的、開源的、企業級的,支持分布式部署的監控軟件。2)2.zabbix的作用監控windows和Linux主機上的軟硬件狀態。監控各網絡設備,如路由器、交換機、防火墻、f5、打印機等

Mac下Android繪制點9格式png以及解決IllegalArgumentException: Unknown image type 0

exception reat 9-patch 目標 cep 簡單 邊線 ids eat 在Mac下的AndroidStudio中,右鍵png圖片選擇“create 9-patch-file”時會報錯:IllegalArgumentException: Unknown

Type Cannot change version of project facet Dynamic Web Module to 2.5

set cannot mic image module to not change images 技術 項目下的.setings文件 夾中的 version 改為2.5Type Cannot change version of project facet Dynamic W

Spring Web 項目Junit測試問題

繼承 text config web項目 cap 正是 obj ssr and 測試對象是Web項目的Service類,參照網上查到的資料,按如下方式執行時報錯, //使用junit4進行單元測試 @RunWith(SpringJUnit4ClassRunner.c

在flask框架中,對wtforms的SelectMultipleField的一個處理

pre inf req ESS multi bmi 其中 ews IT 先粘貼代碼: form.py文件: users = SelectMultipleField( label="請選擇用戶", validators=[ DataRequired(