Компонент, сделанный как комментарий в VueJS + JSPM

Я попытался создать простое приложение, используя jspm с vue.js.Компонент, сделанный как комментарий в VueJS + JSPM

Это мой HTML-файл:

<html> 
    <head> 
     <script src="bundle.js"></script> 
     <!--script src="jspm_packages/npm/[email protected]/dist/vue.min.js"></script--> 
    </head> 
    <body> 
     <div id="app"> 
      {{ message }} 
     </div> 
    </body> 
</html>

Мой main.js файл:

import Vue from "vue" 

const app = new Vue({ 
    el: '#app', 
    data: { 
     message: 'Hello Vue!' 
    } 
});

Я строю прямоприменяемых сверток, как это:

jspm bundle-sfx main.js bundle.js

Когда я открыть браузер. Я вижу, что узел div#app заменен узлом комментария.

Вы также можете увидеть узел комментария в $el в Vue объекта:

Когда я использую Vue из отдельного файла (например, из загруженных по JSPM файла из jspm_packages/npm/[email protected]/dist/vue.min.js) все работает правильно.

Вы можете увидеть этот вопрос воспроизведен в этой скрипке (JS есть целый пучок):

https://jsfiddle.net/oz7c82rw/

Что случилось с моим кодом? Почему dom node отображается как пустой комментарий?

источник

2017-02-08 Randall Flagg

Не решение, а предложение: если вы используете Chrome, получите расширение Vue.js dev tools. Это дает некоторую полезную информацию при разработке с Vue. Также есть причина включить скрипт в голову html, а не включать его в качестве последнего тега в теле ... просто поразило меня как нечетное. – peaceman

Какова конфигурация вашего веб-пакета? –

https://vuejs.org/v2/guide/installation.html#Standalone-vs-Runtime-only-Build это, возможно, релевантно; –

import Vue from "vue" будет вытаскивать сборку runtime-only, которая не включает шаблонный компилятор, это означает, что вам нужно будет иметь pre-compiled ваших шаблонов. Если взять пример и использовать runtime-only сборки, вы должны получить следующее сообщение:

[Вью предупреждают]: Не удалось установить компонент: шаблон или функции визуализации не определена. (находится в корневой инстанции)

Как вы можете увидеть здесь: https://jsfiddle.net/aqxL6sjL/

Для того, чтобы получить, что для работы с выполнения только строить, мне нужно создать функцию визуализации на экземпляре Вью , например, так:

const app = new Vue({ 
    el: '#app', 
    render: function(createElement) { 
    return createElement('div', {}, this.message) 
    }, 
    data: { 
    message: 'Hello Vue!' 
    } 
});

Вот обновленная скрипка: https://jsfiddle.net/aqxL6sjL/1/

и это то, что vueify и vue-loader при использовании с browserify и webpack соответственно, поэтому компилятор шаблонов не требуется. Если вы используете jspm, вы можете посмотреть: systemjs-plugin-vue, однако он больше не поддерживается, поэтому он больше не может работать.

Я бы предположил, что самый простой маршрут - связать standalone-build вместо сборки runtime only.Я не использую jspm, но я предполагаю, что это будет что-то вроде:

import Vue from 'vue/dist/vue.common.js';

этот вопрос там, хотя в том, что вы можете получить как время выполнения и автономные сборки импортируемого при использовании библиотек сторонних производителей, которые вызывают ошибки, поэтому рекомендуется использовать их так, чтобы получить правильную сборку, однако я не могу сказать, как вы это сделаете: jspm, но я бы предположил, что это функциональность карты: https://github.com/jspm/registry/wiki/Configuring-Packages-for-jspm#map-configuration.

Я никогда не самоуверенным о выборе разработчиков инструментов, но если вы начинаете свежий vue проект, я хотел бы предложить вам использовать webpack или browserify вместо этого, потому что они имеют гораздо лучшую поддержку, вплоть до того, что вам может тянуть в леса непосредственно через vue-cli. В конечном итоге это может сэкономить вам немало хлопот, пытаясь запустить и запустить ваши проекты и просить о помощи в будущем.

источник

2017-02-15 14:48:06

Компонент, сделанный как комментарий в VueJS + JSPM

ответ

Смежные вопросы