VueにjQuery問題を導入:Bootstrap's JavaScript requires jQuery
最近勉強しています.js,VueにjQueryを導入するには2つの方式があり,1つはindexである.htmlにnode_を導入modulesのjqueryプラグインパッケージのjquery.js.
もう一つの方法はmainです.jsに導入され、ネット上の多くの紹介方法はwebpackである.config.jsのmodule.义齿
しかし、Bootstrap's JavaScript requires jQueryのエラーは解決できません.
ここでは、公式サイトが最も権威のある参考になることをお勧めします.
様々な技術の更新が早すぎて、ネット上の技術ブログフォーラムで紹介されている方法は製品のバージョンが反復するにつれて使えないかもしれないので、必ず公式サイトを参考にしてください.公式サイトは英語ですが、効率が高いです.以下は公式サイトが提供する方法です:vueはjqueryを導入します
Vue導入jQuery:
1.expose-loaderをダウンロードする:
3. Let's say you also want to expose it as
Windowsとして公開したいならjQueryかwindow.$、次のように構成できます.
4.そしてmain.js中
5.chromeのコンソールに入力:
間違いを報告することはありません.Bootstrap's JavaScript requires jQueryはこのように解決できます.
参照リンク:
Webpackでexpose-loaderが使用
もう一つの方法はmainです.jsに導入され、ネット上の多くの紹介方法はwebpackである.config.jsのmodule.义齿
new webpack.optimize.CommonsChunkPlugin('common.js'),
new webpack.ProvidePlugin({
$: 'jquery',
jquery: 'jquery'
})
しかし、Bootstrap's JavaScript requires jQueryのエラーは解決できません.
ここでは、公式サイトが最も権威のある参考になることをお勧めします.
様々な技術の更新が早すぎて、ネット上の技術ブログフォーラムで紹介されている方法は製品のバージョンが反復するにつれて使えないかもしれないので、必ず公式サイトを参考にしてください.公式サイトは英語ですが、効率が高いです.以下は公式サイトが提供する方法です:vueはjqueryを導入します
Vue導入jQuery:
1.expose-loaderをダウンロードする:
npm install expose-loader --save-dev
2.Webpackでexpose-loaderを構成し、jQueryをグローバル名$:// webpack.config.js
module: {
rules: [{
test: require.resolve('jquery'),
use: [{
loader: 'expose-loader',
options: '$'
}]
}]
}
3. Let's say you also want to expose it as
window.jQuery
in addition to window.$
. For multiple expose you can use !
in loader string: Windowsとして公開したいならjQueryかwindow.$、次のように構成できます.
// webpack.config.js
module: {
rules: [{
test: require.resolve('jquery'),
use: [{
loader: 'expose-loader',
options: 'jQuery'
},{
loader: 'expose-loader',
options: '$'
}]
}]
}
4.そしてmain.js中
import $ from 'jquery' // jquery
import '../node_modules/bootstrap/dist/css/bootstrap.css'
import '../node_modules/bootstrap/dist/js/bootstrap.js'
new Vue({
el: '#app',
$, // $
render: h => h(App)
})
5.chromeのコンソールに入力:
console.log(jQuery)
間違いを報告することはありません.Bootstrap's JavaScript requires jQueryはこのように解決できます.
参照リンク:
Webpackでexpose-loaderが使用