Как во Vue избавиться от .vue файла?

Question

[dark_king_13]

Если в .vue файле все элементы импортируются извне, то можноли избавиться от этого файла вовсе и сделать как-то без него?

<template src="./messager.pug" lang="pug"  />
<script src="./messager.ts" lang="ts" />
<style src="./messager.sass" lang="scss" scoped />

Comments

[Анатолий]

Зачем пытаться превратить Vue-компоненты в подобие React?

Answer 1

[Дмитрий Беляев]

1. scss можно подключать из ts файла просто через import, в webpack скорее всего уже настроен необходимый лоадер. Со scoped конечно сложнее, но ИМХО scoped тормознутое зло, лучше css modules использовать, которые опять таки разруливаются через css-loader
2. для шаблонов можно написать кастомный лоадер, который будет их компилировать, и можно будет просто заимпортить из ts

import {render, staticRenderFns} from './messager.pug';

и вставить как есть в компонент
Сам ts файл и будет делать export default компонента
3. для самого ts нужно будет описать declare module '*.pug' {} иdeclare module '*.scss' в каком нить .d.ts файле в корне проекта

Вот только зачем? Вы лишаетесь HMR (хотя для шаблонов можно сделать в лоадере). Код компонента становится раскиданным по 3 файлам, что делает хуже его поддержку. Ну и другие разработчики явно Вас проклянут за такие костыли.