@linesb

Почему Vue.mount не показывает загруженный компонент?

Пробую использовать Vue3 не через vue create, а компилировать через rollup. Проблема в том что компонент не загружается, тоесть шаблон удаляется после загрузки js. В интернете не могу ничего найти, практически все делают через vue create.
Мой код:
index.html
...
<div id="app"><p>{{ message }}</p></div>
<script type="text/javascript" src="bundle.js"></script>
...

main.js
import { createApp } from 'vue';
const HelloWorlld = {
	data() {
		return {
			message: 'Hello Vue!'
		}
	}
};
createApp(HelloWorlld).mount('#app');

rollup.config.js
import nodeResolve from 'rollup-plugin-node-resolve';
import replace from 'rollup-plugin-replace';

export default {
	input: 'main.js',
	plugins: [
		replace({ "process.env.NODE_ENV": "'production'" }),
		nodeResolve({})
	],
	output: {
		file: 'bundle.js',
		format: 'iife',
	},
};

После загрузки javascript содержимое тэга #app это пустой html коментарий.
...
<div id="app" data-v-app=""><!----></div>
<script type="text/javascript" src="bundle.js"></script>
...

Помогите помочь разобратся с этой проблемой.
  • Вопрос задан
  • 70 просмотров
Пригласить эксперта
Ответы на вопрос 2
Aleksandr-JS-Developer
@Aleksandr-JS-Developer
Бери и делай
Случаем не так:
createApp(HelloWorlld).$mount('#app');
?
Ответ написан
@linesb Автор вопроса
Нашол в чем проблема.
Vue3 по умолчанию идет без модуля отвечающии за обработку шаблонов в runtime, а это значит что мне нужно "компилтровать" шаблоны в момент сборки.
Для rollup-а есть плагин rollup-plugin-vue, для webpack-а есть vue-loader. Еще можно использовать vue-cli чтобы "компилировать" отдельные vue компоненты.

Второе решение, это использовать Vue c модулем для шаблонов. Это можно сделать так:
import Vue from 'node_modules/vue/dist/vue.esm-bundler';
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы