У меня есть сайт Vue, созданный с помощью Webpack. У меня есть файл TypeScript, содержащий компонент:

// my-component.ts

import Vue = require('vue');

export default Vue.component("my-component", {
    template: "<div>I am a component</div>"
});

Когда я пытаюсь использовать этот компонент, я получаю следующее предупреждение:

Вы используете сборку Vue, предназначенную только для времени выполнения, где параметр шаблона недоступен. Либо предварительно скомпилируйте шаблоны в функции рендеринга, либо используйте сборку, включенную в компилятор.

Теперь: как мне предварительно скомпилировать этот шаблон? Я знаю, что могу определить файл .vue и даже использовать TypeScript внутри <script></script>, но я бы предпочел определить свой компонент на чистом TypeScript, чтобы получить хорошую поддержку TypeScript в WebStorm.

Возможно ли это?


(Я знаю, что могу пойти и со вторым вариантом, создав псевдоним для сборки с компилятором в vue/dist/vue.js, но я чувствую, что это снижает производительность. По крайней мере, это добавляет 20 КБ к моей сборке. )


5
Maarten 25 Ноя 2016 в 16:59

2 ответа

Лучший ответ

Для этого у вас должна быть возможность использовать standalone build, просто добавьте следующее в конфигурацию вашего веб-пакета (это последняя версия Vue):

resolve: {
  alias: {
    'vue$': 'vue/dist/vue.common.js'
  }
}

И он должен вытащить для вас автономную сборку, которая включает опцию шаблона.


Если вы хотите попробовать создать свой собственный render functions, то можете. В основном вы получите:

Vue.component('msg', {
  functional: true,
  render: (createElement, context) => {
    return createElement('div', context.props.message)
  },
  props: ['message']
})

Это немного сложнее, но на самом деле не так уж плохо, если вам действительно не нравится идея использования файлов .vue, а ваши шаблоны относительно просты, вот скрипка для вышеуказанного компонента:

https://jsfiddle.net/et67zqdp/

Тогда стоит взглянуть на:

https://vuejs.org/v2/guide/render-function.html

4
craig_h 25 Ноя 2016 в 16:29

Я не знаю, подходит это или нет: но я просто создаю файл в корне проекта (то же место, где находится ваш "package.json") с именем

"vue.config.js"

module.exports = {
  runtimeCompiler: true
}
2
Doctor ORBiT 8 Май 2019 в 15:48