Используя vue.js без NPM или CLI

Используя vue.js без NPM или CLI

03.01.2020 02:11:58 Просмотров 56 Источник

Я бы хотел использовать вю.js в пределах одной страницы большого устаревшего приложения. Идея состоит в том, чтобы заменить старый Ходж-подж JS+jQuery в пределах одной страницы - но оставить остальную часть приложения (многие другие страницы) нетронутой. Так что, не заинтересованы в использовании НПМ, узел, Вью Кинк, Webpack, Бабель и др.- пока еще нет.

Это является доказательством концепции, прежде чем мы инвестируем в рефакторинг всего интерфейса приложения.

Подход, которому мы следовали, состоял в том, чтобы включить Ву.js via, как описано здесь: https://vuejs.org/v2/guide/installation.html#Direct-lt-script-gt-Include на этой одной странице, и использовать Vue только в пределах этой одной страницы. Это общий макет страницы:

<html>
  <head>
     ...
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     ...
  </head>
  <body>

    <div id="el">
      ... vue template ...
    </div>

    <script>
      ...
      var vm = new Vue({
        el : '#el',
        data : {
          config : <% config.json %>   // this is server-rendered, using server templating
          ...
        },
        ...
      });
      ...
    </script>

  </body>
</html>

Страница действительно работает. Однако я получаю следующую ошибку/предупреждение в консоли Vue:

Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed.

Хотя я бы предпочел этого не делать, я, конечно, могу переместить специфичный для страницы JS в его собственный отдельный файл (и это действительно устраняет предупреждение/ошибку). Однако я не смогу установить vm.configс предоставленными сервером данными вместе с загруженной страницей с помощью шаблона на стороне сервера, например config : <% config.json %>. Я знаю, что мог бы получить его с помощью JS отдельно, после pageload, через AJAX-вызов непосредственно с сервера, но по практическим соображениям я хотел бы избежать этого здесь.

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

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

Спасибо!

У вопроса есть решение - Посмотреть?

Ответы - Используя vue.js без NPM или CLI / Using vue.js without NPM or CLI

Dieterg

03.01.2020 09:40:39

Одним из простых решений здесь является запись его в объект глобального окна. IIRC SSR-фреймворки типа Angular universal/Nuxt / Next/... все используют этот подход.

window.__STATE__ = <% config.json %>

В вашем JS-файле вы можете обратиться к этому window.__STATE__объект.

var vm = new Vue({
   el: '#el',
   data: {
     config: window.__STATE__
   }
})

Конечно здесь важен порядок:

<body>
  <script>
    window.__STATE__ = <% config.json %>
  </script>
  <script src="app.js"></script>
</body>
https://stackoverflow.com/questions/59571201/using-vue-js-without-npm-or-cli/59574240#comment105333401_59574240
Спасибо, что указали на эту технику. Обязательно буду иметь это в виду! Я попробовал это сделать в этом случае, но я продолжаю получать предупреждение. В принципе любой <script> тег, который содержит код появляется, чтобы вызвать предупреждение, хотя сказал <script> тег вне vm.$el. Интересно, может быть, это ошибка?
https://stackoverflow.com/questions/59571201/using-vue-js-without-npm-or-cli/59574240#comment105341709_59574240
@yahermann fyi: <style>и <script>запускают предупреждение
https://stackoverflow.com/questions/59571201/using-vue-js-without-npm-or-cli/59574240#comment105342017_59574240
@tony19, да, и это похоже на ошибку, потому style& scriptвстречаются только за пределами корневого элемента Vue и компонентов (но внутри <body>...</body>. Сейчас я живу с ошибками / предупреждениями, но мне бы хотелось их отключить!
https://stackoverflow.com/questions/59571201/using-vue-js-without-npm-or-cli/59574240#comment105342181_59574240
Я думаю, что ошибка маловероятна, так как Vue оценивает только теги внутри указанного элемента. Но не стесняйтесь подать вопрос GitHub с воспроизводимым примером. Чтобы приглушить предупреждения, вы пробовали производственную сборку, как я предложил?
Является ответом!
yahermann

06.01.2020 09:43:51

Гррр, через несколько дней после того, как я пережил эту ошибку, я обнаружил это:

<fieldset id="el">
  ...
  <div id="el">
  ...
  </div>
  ...
</fieldset>

Таким образом, проблема заключалась в повторении #elна той же странице.

Моя ошибка.

Просто жаль, что сообщение об ошибке, выданное Vue, было немного более полезным!

Итог: шаблон, описанный в исходном вопросе, прекрасно работает без NPM/CLI.

Закрыть X