Я пытаюсь собрать абсолютный минимальный пример проекта Vue, который использует webpack для пересылки файлов.vue.
Моя цель - понять каждый шаг сборки в деталях. Большинство учебных пособий советуют использовать vue-cli
и использовать webpack-simple
. И хотя эта настройка работает, она кажется излишней для моей простой цели. На данный момент я не хочу использовать babel, linting или живой веб-сервер с горячей перезагрузкой модуля.
Минимальный пример с использованием только import Vue from 'vue'
! Webpack компилирует vue-библиотеку и мой собственный код в один пакет.
Но теперь я хочу добавить vue-loader в конфигурацию webpack, так что файлы .vue
будут переданы. Я установил загрузчик vue:
npm install vue-loader
npm install css-loader
npm install vue-template-compiler
И я добавил vue-loader в конфигурацию webpack:
var path = require('path')
module.exports = {
entry: './dev/app.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
}
}
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
}
};
Я создал hello.vue
<template>
<p>{{greeting}} World</p>
</template>
<script>
export default {
data:function(){
return {
greeting:"Hi there"
}
}
}
</script>
И в моем приложении я импортирую "привет",
import Vue from 'vue'
import hello from "./hello.vue";
new Vue({
el: '#app',
template:'<div><hello></hello></div>',
created: function () {
console.log("Hey, a vue app!")
}
})
Похоже, загрузчик не .vue
файлы .vue
, я получаю ошибку:
Module not found: Error: Can't resolve './hello.js'
РЕДАКТИРОВАТЬ
При попытке import hello from 'hello.vue'
я получаю ошибку:
Unknown custom element: <hello> - did you register the component correctly?
Я пропустил шаг? Я импортирую компонент.vue правильно? Как использовать компонент hello.vue из app.js?