Создание одного компонента Vue внутри более крупного проекта

Question

У меня есть проект PHP, который использует Kirby CMS.Я также использую Gulp для создания своих активов.Теперь мне нужно добавить на домашнюю страницу калькулятор, достаточно сложный, чтобы оправдать использование Vue.Как бы я включил Vue в свой проект, не вводя тонну новых инструментов?Все, что я хочу, - это простой компонент одного файла.У меня есть:

<div id="calculator"></div>

, и я хочу, чтобы компонент отображался там.Ничего больше.

После некоторого рассмотрения я предложил следующие варианты, но обнаружил проблемы с каждым из них:

1. Использование CLI Vue для мгновенного прототипирования.Это наиболее близкое решение для моего варианта использования, но я не могу легко разработать компонент.Если я использую vue serve, я вижу компонент изолированным на новой странице.Проблема заключается в том, что этот компонент не является частью страницы моего проекта.На него не влияют таблицы стилей, макет и другие скрипты.Я не могу знать, будет ли он работать правильно, как только я соберу его и увижу в своем проекте.Выполнение vue build для каждого изменения будет довольно болезненным и отнимает много времени.К сожалению, vue watch не вещь, которая приводит меня к:

2. Создание проекта и использование Vue CLI Service .Если я создаю проект, я смогу запустить vue-cli-service build --watch, и мой компонент будет автоматически обновляться при каждом изменении его исходного файла.Разрабатывая компонент, я просто делаю изменение, жду, пока он скомпилируется, и обновляю свой проект в браузере, чтобы увидеть измененный компонент в действии.Хотя это сработало бы, оно вводит кучу node_modules внутри моего проекта вместе с package.json.Я чувствую, что это слишком много для одного компонента.Это загрязнило бы проект больше, чем мне хотелось бы:

   assets/
     js/
       build/
       calculator/
         dist/
         node_modules/  # modules here
         public/        # I don't need that
         package.json   # package here
         package-lock.json
         App.vue
       scripts/
       main.js
   content/
   site/
   node_modules/  # modules here as well
   panel/
   package.json   # package here as well
   package-lock.json
   index.php
   

   Я бы в основном имел проект в рамках проекта.

3. Использование vueify скомпилировать компонент с помощью Browserify и Gulp (который я уже использую).Хотя это выглядит нормально, vueify устарела и не поддерживается.Кроме того, мне пришлось бы добавить кучу вещей в мой gulpfile.js, чтобы использовать Babel + ESLint для компонента.

---

Как настроить Vue втаким образом, что я могу разработать очень простой компонент как часть более крупного проекта с минимальным трением, насколько это возможно?

Если кто-то сталкивался с подобной проблемой, как они решили ее?

Answer 1

В итоге я использовал второй подход, который я упомянул в своем вопросе, с одним небольшим поворотом - я инициализировал проект Vue в своем основном проекте.Я объединил их.

1. Я открыл родительскую папку своего проекта в терминале.
2. Я запустил vue create my-project, где my-project было фактическим именем папки моего проекта.CLI спросил, следует ли перезаписать проект или объединить его.Я выбрал слияние.
3. После создания проекта мой старый package.json был перезаписан и в нем были указаны только зависимости Vue.
4. Я вернул свой старый package.json и установил эти пакеты: @vue/cli-plugin-babel, @vue/cli-service, vue-template-compiler и vue.

5. Я добавил следующий скрипт npm в свой package.json:

   "scripts": {
     "calculator": "vue-cli-service build assets/js/calculator/main.js --watch --dest assets/js/calculator/build"
   }
   

Результат

Структура папок моего проекта осталась прежней, за исключением нескольких новых пакетов в node_modules.Я поместил мои файлы компонентов в assets/js/calculator/.Там у меня есть main.js, который является сценарием основного компонента, и build, который является папкой, содержащей обработанный компонент.

У меня есть:

<div id="calculator"></div>

на моей странице, и:

<script src="/assets/js/calculator/build/app.js"></script>

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

Чтобы изменить компонент, я просто запускаю npm run calculator в терминале, который раскручивает службу CLI.Он отслеживает файл main.js и строит компонент при каждом изменении.Когда сборка завершена (что происходит менее чем за секунду), я обновляю страницу, и обновленный компонент уже там.

Заключение

Я считаю, что это самый плавный способ обработки этого варианта использования.Это не раздуло проект, все зависимости были перечислены, и опыт разработки велик.Часть, где мои package.json были перезаписаны, была немного волнующей, но кроме этого - она ​​работала отличноЕсли есть лучший способ сделать это, пожалуйста, оставьте ответ!

Answer 2

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

Также взгляните на это сообщение в блоге . Он предлагает хорошее описание различных методов создания шаблонов в Vue и их плюсов и минусов.