將引導添加到Vue CLI項目

我是Vue和webpack的新手，我很難弄清楚如何導入東西。將引導添加到Vue CLI項目

我創建了一個新的Vue項目，通過vue init我加引導4 yarn add [email protected]

在main.js我嘗試導入引導和jQuery：

import Vue from 'vue'; 
import jQuery from 'jquery'; 
import bootstrap from 'bootstrap'; 
import App from './App'; 
import router from './router';

，但我得到：

Uncaught Error: Bootstrap's JavaScript requires jQuery. jQuery must be included before Bootstrap's JavaScript.

window.jQuery = window.$ = $;確實不是工作

最後，我在哪裏以及如何加載Sass，使其可用於整個應用程序？

來源

2017-03-09 Ashbury

這可能有助於〜http://stackoverflow.com/questions/34120250/error-using-bootstrap-jquery-packages-in-es6-with-browserify – Phil

這太〜https：//開頭的github .com/AngularClass/angular2-webpack-starter/issues/696 – Phil

[在使用Browserify的ES6中使用Bootstrap＆jQuery包時出現錯誤]（http://stackoverflow.com/questions/34120250/error-using-bootstrap-jquery - 包裝在es6-with-browserify） –

我有同樣的問題，這是我結束了但是，我沒有使用引導阿爾法由於進口布爾瑪測試版已經發布。

npm install [email protected] popper.js jquery --save-dev

編輯您的/build/webpack.dev.conf.js文件：

與它的依賴，jQuery和Popper.js沿着安裝引導爲jQuery和Popper.js添加一個插件來處理依賴關係（您可以在Bootstrap文檔中閱讀關於here的更多信息）：

plugins: [ ... new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquery', Popper: ['popper.js', 'default'], // In case you imported plugins individually, you must also require them here: Util: "exports-loader?Util!bootstrap/js/dist/util", Dropdown: "exports-loader?Dropdown!bootstrap/js/dist/dropdown", ... }) ... ]
編輯/src/main.js導入引導到應用程序的入口點：

import Vue from 'vue' import App from './App' import router from './router' import 'bootstrap'
編輯應用程序。VUE」文件的<style>部導入Bootsrap到你的應用程序的根的CSS：

<template> 
    <div id="app"> 
    <img src="./assets/logo.png"> 
    <router-view></router-view> 
    </div> 
</template> 

<script> 
export default { 
    name: 'app' 
} 
</script> 

<style> 
#app { 
    font-family: 'Avenir', Helvetica, Arial, sans-serif; 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
    text-align: center; 
    color: #2c3e50; 
    margin-top: 60px; 
} 

@import'~bootstrap/dist/css/bootstrap.css' 
</style>

從CLI

npm start

運行您的Vue應用

I had to add the @import rule after the #app selector, otherwise the scoped styling would be canceled out by the Bootstrap import. I think there is a better way to do this so I will update my answer once I figure it out.

來源

2017-09-08 20:07:39 Culpepper

指定的方式貌似可以，而不是將其導入到CSS，在main.js文件略低於 '進口「bootstrap'' 您可以添加 '進口'../ node_modules/bootstrap/dist/css/bootstrap.css';' – willcwf

我認爲這些應該被安裝爲常規依賴關係而不是-dev依賴關係 –

-1

使用Bootstrap CDN和它作爲一個在您的index.html

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

我從來沒有使用過Bootsrap與Vue.js，因爲我不是一個球迷。但是當我使用布爾瑪的時候，首先我爲布爾瑪做了npm install。然後，我在src/assets/sass創建一個文件夾，裏面創造了一個main.scss和裏面我的@import '~bulma/bulma';

來源

2017-09-07 20:26:22

這不允許使用任何jQuery功能。應安裝在接受的答案 –

將引導添加到Vue CLI項目

回答

相關問題