@tordroid

Возможно ли совместить однофайловые компоненты vue с кодом php?

Привет, ради эксперимента задумался - а можно ли совместить однофайловые компоненты в vue.js с php кодом?
Что бы делать простые однофайловые блоки, в которых совмещались бы шаблон, стили, фронтент и бекенд логика.

<template>
	<div>
		<input type="text" v-model="input"><button type="text" @click="submit">
	</div>
</template>

<style lang="scss" scoped>
  input {
    width: 300px;
  }
</style>

<script>
export default {
  data() {
    return {
    	input: ''
    }
  },

  methods: {
    save() {
      this.$http.post('/api/save', {id: 333, input: input})
    },
  },
}
</script>

<?php
class componentsController extends Controller {
  public function save(Request $request) {
      $test = Test::updateOrCreate( ['id' => $request->id], $request->all() );
      return response()->json($test);
  }
}
?>


Вопрос, как на php подключить этот .vue компонент и проигнорировать все, кроме кода между <?php ?>
так-же и вебпак должен игнорировать <?php ?>

До php7 были теги <script language="php"></script>, они, наверное, решили бы проблему с вебпаком, но сейчас их нет.
Опять же непонятно как быть с php? - может раз распарить все что между <script language="php"> и сунуть в eval() ?

Есть какие идеи?
  • Вопрос задан
  • 1160 просмотров
Пригласить эксперта
Ответы на вопрос 6
aleksejjjj
@aleksejjjj
Есть какие идеи?

Да, есть свежая мыслишка: так делать не стоит, разбирать потом файл с кашей из 10 языков мало кому захочется. В то время как прогрессивный мир пытается разбить задачу на все более мелкие части для управления сложностью - вы идете ему на перекор и пытаетесь свалить в кучу логику фронта, бека и бог знает чего еще. Не надо так.
Ответ написан
bingo347
@bingo347
Бородатый программер
https://vue-loader.vuejs.org/guide/custom-blocks.h...
+ написать webpack-loader который соберет весь php код со всех файлов и заменит их например на url генерируемого апи
+ написать webpack-plugin который по emit tap закинет все собранное лоадером в какой нить php файлик для бэка

но как уже писали выше, подумайте, а стоит ли оно таких усилий
Ответ написан
kasheibess
@kasheibess
веб уже не тот
Да забей. Ру комьюнити никогда дружелюбностью не отличалось.
Я например уже давно не сижу в рускоговорящих тематических чатах в телеге. Помощи не дождёшься толковой, а за какие-то нестандартные эксперименты заклюют и запинают те. Выход-общаться в англоговорящих чатах. Там люди в разы дружелюбнее.

У меня есть идея, как можно реализовать примерно то, что ты хочешь. Я так понял твоя идея сделать максимально автономный компонент в системе? В общем смысл такой-разбиваешь компонент на файлы:
php - файл с версткой. В нём ты вызываешь компонент.
Vue - вёрстка самого компонента
Stul, css - стили
Js - скрипты компонента.

Возникает вопрос, зачем дробить на отдельные файлы? Ответ - для единообразия. по тому, что компонент может например не содержать vue вообще.

Вообще я этот подход ещё обдумываю сам. Но у меня именно идея php компонентов. Если хочешь, могу прислать код. Напиши мне на почту или в телегу, я тебе пришлю кусок проекта тестового)
Ответ написан
@Apkor
Use vue.cli wc build for packages, wc-async for single components, in a result you'll get .min.js file to use in production that contains custom elements... In php loader add libraries such as vue/ vuex maybe and others that your library depends on.
Ответ написан
Tantacula
@Tantacula
Ларавельщик, витающий в небесах.
Основная цель компонентов - переиспользование кода. Бэкенд фрагментарен по той же причине, чтобы можно было использовать куски кода. Сейчас даже можно использовать части одного фреймворка в другом.

Что из бэкенда можно засунуть в такой компонент, чтобы я мог использовать его на своем проекте? Возьмем ту же отправку сообщений с лендинга. Компонент должен иметь универсальный параметр с адресом роута, который разрулит фреймворк на сервере и сделать некое универсальное действие для отправки сообщения. В вашем случае это вызов mail(), но в случае другого человека это либо вызов api mailchimp, либо smtp сервиса, либо вовсе помещение какой-то команды в очередь. выходит, максимум, что вы можете поместить в такой компонент - это ссылку на команду sendMail(), тело которой ради все той же универсальности и переиспользования должно писаться вне компонента. Иначе вы получаете бесполезный непереиспользуемый компонент.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
26 сент. 2020, в 15:21
1000000 руб./за проект
26 сент. 2020, в 15:07
1000 руб./за проект
26 сент. 2020, в 14:52
600 руб./за проект