[英]How include bootstrap and jquery to vue webpack-simple template?
I need use bootstrap 3 on my vue app. 我需要在vue应用上使用bootstrap 3。 I do following:
我做以下事情:
vue init webpack-simple
npm install jquery bootstrap
after this I add to webpack.config.js 之后,我添加到webpack.config.js
module.exports = {
...
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
}),
]
}
and add to src/main.js 并添加到src / main.js
window.$ = window.jQuery = require('jquery')
import 'bootstrap'
and got error in browser: 并在浏览器中出现错误:
Uncaught ReferenceError: jQuery is not defined
未捕获的ReferenceError:未定义jQuery
how I can resolve this problem? 我该如何解决这个问题?
UPDATE: 更新:
I maked like say @Sandwell, but no have bootstrap.css in result. 我想说@Sandwell,但结果没有bootstrap.css。 I add line to src/main.js
我将行添加到src / main.js
import Bootstrap from 'bootstrap/dist/css/bootstrap.css'
and got webpack compilation error: 并得到webpack编译错误:
./node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.ttf Module parse failed: Unexpected character '' (1:0) You may need an appropriate loader to handle this file type.
./node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.ttf模块解析失败:意外字符''(1:0)您可能需要适当的加载程序来处理此文件类型。 (Source code omitted for this binary file) @ ./node_modules/css-loader!./node_modules/bootstrap/dist/css/bootstrap.css 6:4790-4842 @ ./node_modules/bootstrap/dist/css/bootstrap.css @ ./src/main.js @ multi (webpack)-dev-server/client?
(此二进制文件的源代码被省略)@ ./node_modules/css-loader!./node_modules/bootstrap/dist/css/bootstrap.css 6:4790-4842 @ ./node_modules/bootstrap/dist/css/bootstrap.css @ ./src/main.js @多(webpack)-dev-server / client? http://localhost:8080 webpack/hot/dev-server ./src/main.js
http:// localhost:8080 webpack / hot / dev-server ./src/main.js
I have loader in webpack.config.js module.rules: 我在webpack.config.js module.rules中有加载程序:
{
test: /\.(png|jpg|gif|svg|ttf)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
For webpack 2 对于webpack 2
I did a vendor bundle for my libs. 我为我的库做了一个供应商捆绑包。 It should work this way.
它应该以这种方式工作。
module.exports = {
entry: {
app: 'path/to/initapp.js',
vendor: ['jQuery', 'Bootstrap']
}
output: {
path: rootPath + 'public/',
filename: 'js/[name].js'
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
names: ['vendor']
})
]
}
then jQuery should be in the vendor.js bundle Do not forget to import it in your initapp.js 那么jQuery应该在vendor.js捆绑包中。别忘了将其导入initapp.js中
import 'bootstrap';
import jQuery from 'jQuery'
window.jQuery = jQuery
You should check this doc for more details 您应该检查此文档以获取更多详细信息
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.