Webpack：与'vue init webpack'和'vue init webpack-simple'项目不同的行为

我对Webpack和Vue.js相当陌生。Webpack：与'vue init webpack'和'vue init webpack-simple'项目不同的行为

我们知道vue-cli带有2个项目模板webpack和webpack-simple。

当我使用webpack模板，如果我想使用其他的包像Bootstrap 4 beta，我只需要做：

在main.js：

import 'jquery' 
import 'bootstrap/dist/css/bootstrap.css' 
import 'bootstrap'

在的WebPack配置：

plugins: [ 
    new webpack.ProvidePlugin({ 
    jQuery: 'jquery', 
    $: 'jquery', 
    jquery: 'jquery', 
    Popper: ['popper.js', 'default'] 
    }) 
]

和Bootstrap的作品。

如果我使用webpack-simple模板，我需要做的这App.vue做引导工作：

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

因此，如果有一些选项将导致这些差异？

我更喜欢webpack-simple使我的项目更简单。

但我认为这是什么原因导致我的应用程序的一些其他的包不能正常工作（即不显示图标mavon-editor，但它正常工作与webpack模板）。

谢谢。

来源

2017-10-16 raaay0608

恐怕这两种方式都不是导入bootstrap的最佳方式。尝试npm install [email protected]

和follow the instructions在网站中。

来源

2017-10-16 10:53:50 LiranC

感谢您的回答。我做了'npm install bootstrap @ 4.0.0-beta'，并且这不是关于这个......多亏了 – raaay0608

，你正在做额外的不必要的工作。 npm包解决了你正在尝试解决的问题，比如照顾jquery依赖。当你使用包装时，他们已经为你做了。 – LiranC

我确实通过npm安装了软件包，而不是alpha版本。我的问题是关于将它导入到我的应用程序的某些页面，而不是将程序包安装到项目目录。我想也许我只是没有清楚地描述我的问题，而且你没有注意到我的问题。 BTW npm解决大多数依赖项，但bootstrap是一个例外，它只是提供警告，但不安装jQuery和Popper.js。 – raaay0608

-1

我比较了两者的webpack配置和package.json并找到答案。

的关键点Vue.js

是一个叫 style-loader插件，其实 vue-style-loader

它可以：

再添CSS和DOM通过注入标签

通过安装它npm install vue-style-loader --save-dev

并编辑webpack config：

{ 
    test: /\.css$/, 
    loader: 'css-loader' 
    },

到：

{ 
    test: /\.css$/, 
    use: [ 
     { 
     loader: 'vue-style-loader' 
     }, 
     { 
     loader: 'css-loader' 
     } 
    ] 
    },

现在css文件自动加载，无需@import *.css在<style>标签了。其他第三方软件包也开始正常工作。

来源

2017-10-16 11:25:26 raaay0608

Webpack：与'vue init webpack'和'vue init webpack-simple'项目不同的行为

回答

相关问题