vue.js - vue.js - 使用web pack实现Vue SFC (无Vue CLI )

我最近切换到web pack,现在所有的JS和CSS都运行得很好,下面是webpack.config.js的相关部分:


rules: [


 {


 test: /.js$/,


 exclude: /node_modules/,


 use: [


 {


 loader: 'babel-loader',


 options: {


 presets: ['@babel/preset-env']


 }


 },


 {loader: 'import-glob-loader'}


 ]


 },


 {


 test: /.scss$/,


 exclude: /node_modules/,


 use: [


 {loader: MiniCssExtractPlugin.loader},


 {loader: 'css-loader'},


 {


 loader: 'postcss-loader',


 options: {


 plugins: [


 require('autoprefixer')


 ]


 }


 },


 {loader: 'sass-loader'},


 {loader: 'import-glob-loader'}


 ]


 }


]



我已经包含了roo中包含的das,并且这个设置可以执行以下操作:


Vue.component('test-component', {


 data: function () {


 return {


 title: 'Title',


 description: 'Description'


 };


 },


 methods: {


 created: function () {


 console.log('Created');


 }


 },


 template: '<section id="test-component"><h2>{{ title }}</h2>{{ description }}</section>'


});



new Vue({el: '#app'});



在我的HTML中:


<div id="app">


 <test-component></test-component>


</div>



现在我想改用Vue单文件组件,我阅读了Vue加载程序运行Vue文件的文档,因此我将规则更改为以下内容:


rules: [


 // NOTE: This is new


 {


 test: /.vue$/,


 loader: 'vue-loader'


 },


 {


 test: /.js$/,


 exclude: /node_modules/,


 use: [


 {


 loader: 'babel-loader',


 options: {


 presets: ['@babel/preset-env']


 }


 },


 {loader: 'import-glob-loader'}


 ]


 },


 {


 test: /.scss$/,


 exclude: /node_modules/,


 use: [


 {loader: MiniCssExtractPlugin.loader},


 {loader: 'css-loader'},


 {


 loader: 'postcss-loader',


 options: {


 plugins: [


 require('autoprefixer')


 ]


 }


 },


 // NOTE: This is new too, but commented because it throws errors


 // {loader: 'vue-style-loader'},


 {loader: 'sass-loader'},


 {loader: 'import-glob-loader'}


 ]


 }


]



如果我还尝试启用vue-style-loader,构建将完全失败:


(1:4) Unknown word



 > 1 | // style-loader: Adds some css to the DOM by adding a <style> tag


 | ^


 2 | 


 3 | // load the styles



我在这里做什么?

编辑:正在进行,谢谢Daniel我的<style>现在正在使用lang="scss"设置,这是因为web pack配置仅对scss文件有规则,而不是css文件。

我也找出了<test-component>不会呈现的原因,因为我从来没有注册过它,简单地包括.vue -file 。

我现在的问题是试图将所有.vue -files作为组件数组导入,如果我这样做,它工作正常:


import TestComponent from"./test-component.vue";


import AnotherComponent from"./another-component.vue";



document.querySelectorAll('[data-vue]').forEach(el => {


 new Vue({


 el: el, 


 components: {


 'test-component': TestComponent, 


 'another-component': AnotherComponent


 }


 });


});



但是我希望能够做到这一点:


import components from"./**/*.vue";



document.querySelectorAll('[data-vue]').forEach(el => {


 new Vue({


 el: el, 


 components: components


 });


});



使用import-glob-loader

时间:

确保你的电脑里有<style lang="scss">

你也可以尝试删除包锁定(package-lock)和node_modules文件夹,然后进行干净的安装。

...