Я недавно переключился на Webpack, и теперь все мои 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'}
]
}
]
У меня есть Vue, включенный из CDN, и с этой настройкой я не могу сделать следующее без проблем:
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-loader, поэтому я изменил свои правила наследующее:
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 подобраны и добавлены в dist / main.js, так что, похоже, он работает (если я не включаю элемент <style>в файле Vue, в этом случае это не удается), но теперь new Vue({el: '#app'}) абсолютно ничего не делает. При проверке DOM <test-component> все еще там и вообще не визуализируется Vue.
Если я также пытаюсь включить 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
Чтоя здесь не так делаю?
Редактировать: Прогресс. Благодаря Даниэлю мой <style> теперь работает, если у него установлен lang="scss". Это связано с тем, что в моей конфигурации веб-пакета есть только правила для scss файлов, а не css файлов.
Я также выяснил причину, по которой <test-component> не будет отображаться, потому что я никогда не регистрировал егопростого включения .vue -файла недостаточно для его явной регистрации.
Проблема, с которой я сейчас сталкиваюсь, заключается в попытке импортировать все мои .vue -файлы в виде массива компонентов. Если я сделаю это, все будет работать нормально:
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.