laravel i vue.js

pytanie zadane 27 grudnia 2017 w JavaScript przez mi-20 Stary wyjadacz (13,190 p.)

Witam, chciałbym dodać kilka ciekawych funkcji do projektu w laravelu przy użyciu vue.js, są to dopiero moje początki z vue i na początku mam podstawowy problem. Trochę wzoruję się na kursie z YT. W pliku app.blade dodaję link w taki sposób:

<script src="{{ asset('js/app.js') }}"></script>

w pliku komponentów mam komponent: AddToBasket.vue i kod:

<template>
    <div class="">Dodaj</div>
</template>

<script>
    export default {
       
    }
</script>

w pliku app.js importuję i rejestruję komponent:


require('./bootstrap');

window.Vue = require('vue');

import Addtobasket from './components/AddToBasket.vue';


const app = new Vue({
    el: '#app',
    components:{
        Addtobasket
    }
});

no i teraz według kursu i dokumentacji po dodaniu czegoś takiego:

<Addtobasket></Addtobasket>

w pliku widoku powinienem otrzymać napis "Dodaj" a nie dzieje się kompletnie nic, co robię źle?

3 odpowiedzi

odpowiedź 27 grudnia 2017 przez Schizohatter Nałogowiec (39,600 p.)
wybrane 27 grudnia 2017 przez mi-20

Najlepsza

Po pierwsze trzeba zacząć od podstaw. Jeśli robisz coś takiego, to musisz mieć pewność, że Twoja aplikacja zbundluje kod JS. Zauważ, że używasz tam dyrektyw import/export/require. To są funkcje niewspierane na dzień dzisiejszy w przeglądarkach.

W związku z tym taką aplikację należy skomplikować. I szczerze wątpię, żebyś to robił.

Na kanale, z którego się uczysz, prawdopodobnie ktoś używa narzędzia do kompilowania aplikacji (np. oficjalnego template'u opartego na Webpacku lub Webpacka po prostu).

Jeśli wejdziesz w konsolę przeglądarki to zobaczysz coś w stylu "Nieznana funkcja <<require>>" czy import.

Najpierw upewnijmy się co do tej kwestii, a dopiero wtedy kontynuujmy rozwiązywanie problemu.

komentarz 27 grudnia 2017 przez mi-20 Stary wyjadacz (13,190 p.)

ok, muszę skompilować kod, ale w jaki sposób mam tego dokonać? użyć tego polecenia npm install? ono na pewno do tego służ?

komentarz 27 grudnia 2017 przez Schizohatter Nałogowiec (39,600 p.)

Nie.

NPM to menadżer pakietów (a właściwie aplikacji napisanych w JavaScripcie). Identycznie jak dla Rubiego jest Gem, a dla PHP bodajże Composer.

Wiele narzędzi posiada wiele zależności. Twój projekt wymaga Vue, Vue wymaga kilku innych i tak dalej. Za pomocą NPM zarządzasz tym wszystkim, a komendą `npm install` instalujesz wszystkie zależności zdefiniowane w pliku package.json (pliku konfiguracyjnym npm).

Normalnie jakbyś miał kompilator tego kodu JS (a konkretnie modułów - np. Rollup albo Webpack), to instalowałbyś ten kompilator poprzez NPM właśnie.

Ale stosowanie plików .vue robi się jeszcze trudniejsze ponieważ one nie zawierają tylko kodu JS. W związku z czym potrzebujesz już w ogóle wyspecjalizowane narzędzie: np. vue-loader (będące pluginem Webpacka). Łańcuch zależności robi się potężny.

Aby CI coś doradzić, to może to Ci coś pomoże:

https://github.com/dolbex/webpack-laravel

Często właśnie z powodu złożoności problemów rozwija się taki template jako osobny projekt, a potem wszyscy z niego korzystają. Tak samo jest z oficjalnym templatem Vue pod Webpack.

komentarz 27 grudnia 2017 przez Schizohatter Nałogowiec (39,600 p.)

Niestety to nie jest kaszka z mleczkiem zorganizowanie pisania aplikacji w kilku językach programowania, z użyciem kilku **dużych** narzędzi (ba, frameworków!), dwóch menadżerów pakietów i tak dalej :P

To by uzasadniało po części tworzenie aplikacji API/REST. Klienta pod przeglądarkę rozwijasz osobno, backend rozwijasz osobno i komunikujesz się przez API zbudowane o JSON. To by było w ogóle najprostsze rozwiązanie problemu, a przy okazji fajnie separujesz warstwy. Ale jak wszystko, to rozwiązanie też ma wady :P

odpowiedź 27 grudnia 2017 przez Igor Gawrys Stary wyjadacz (12,460 p.)

Czy skompilowałeś jeśli nie użyj komend npm install
i jak chcesz żeby ci na żywo kompiblowano npm run watch w katalogu głównym laravel

komentarz 27 grudnia 2017 przez Igor Gawrys Stary wyjadacz (12,460 p.)

A czy to nie przypadkiem kanał Od zera do Web developera

komentarz 27 grudnia 2017 przez mi-20 Stary wyjadacz (13,190 p.)

Tak, to dokładnie ten kanał jednak ja staram się łączyć wszystkiego po trochu jak uczą się czegoś nowego. A jeśli chodzi o npm install mam po prostu wpisać takie polecenie w konsoli?