ScreenshotMaker z Vue.js: Pierwszy rzut oka i HTTP

Obecnie wszyscy są skupieni na najbardziej modnych frameworkach JS takich jak Angular 2 i React. Ci giganci zajmują większość rynku Front End. Słyszałem trochę o Vue.js, ale dałem mu małą szansę.

Vue.js CLI

Vue.js jest wyposażony w CLI, więc łatwiej jest z nim pracować. Oficjalna strona projektu CLI: https://github.com/vuejs/vue-cli.

Aby zainstalować go na MAC, musisz uruchomić komendę:

<pre class="line-numbers"><code class="language-javascript">sudo npm install -g vue-cli</code></pre>

Aby stworzyć projekt użyłem szablonu webpack:

<pre class="line-numbers"><code class="language-javascript">vue init webpack my-project</code></pre>

Stworzyło mi to prostą strukturę i kolejne instrukcje zostały wylistowane:

Widok Vue.js po inicjalizacji projektu

Zainstaluj Vue.js dev tools

Dla łatwiejszej i lepszej pracy z Vue.js zaleca się używanie Vue dev tools. Oficjalne repozytorium Vue.js dev tools: https://github.com/vuejs/vue-devtools Aby pobrać użyj tego linku: https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

PHPStorm / WEBStorm i Vue.js

Aby pracować z plikami .vue, dobrze jest zainstalować plugin https://plugins.jetbrains.com/plugin/8057-vue-js

Połączenie z API

Mój test API działa na Node i obsługuje 2 opcje: - listowanie zrzutów ekranu. - robienie zrzutów ekranu

obie są metodami GET.

Zacznijmy od pobierania listy z serwera.

Komponent wywołujący GET na serwerze

Użyłem struktury stworzonej przez VUE CLI i dodałem funkcjonalność do komponentu, który został przez niego stworzony. Aby zacząć pracę z żądaniami HTTP, musisz zainstalować pakiet VueResource.

sudo npm i vue-resource --save

Następnie edytuj main.js:

import Vue from 'vue';
import VueResource from 'vue-resource';
import App from './App';

Vue.use(VueResource);
Vue.http.options.emulateJSON = true;

var vueApp = new Vue({
    el: 'body',
    components: {App},
})

Dodatkowo plik App.vue, który opisuje komponent App, wygląda tak:

<template>
  <div id="app">
    <img class="logo" src="/assets/logo.png">
    <ul>
      <li v-for="(index, item) in items">
        {{ item }}
      </li>
    </ul>
  </div>

</template>

<script>
import Vue from 'vue';

export default {
  data: function(){
    return { items: [ 'ding']};
  },
  ready: function() {
    this.fetchFiles();
  },

  methods: {
    fetchFiles: function() {
      Vue.http.get('http://localhost:8888/list').then((response) => {
        var res = JSON.parse(response.body);
        this.$set('items', res.files);

      }, (response) => {
        console.log(response);
      });
    }
  }
}
</script>

<style>
html {
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

#app {
  color: #2c3e50;
  margin-top: -100px;
  max-width: 600px;
  font-family: Source Sans Pro, Helvetica, sans-serif;
  text-align: center;
}

#app a {
  color: #42b983;
  text-decoration: none;
}

.logo {
  width: 100px;
  height: 100px
}
</style>

Najważniejsze dla nas fragmenty kodu to:

• Dyrektywa, która wyrenderuje naszą listę:

<li v-for="(index, item) in items">
     {{ item }}
</li>

• Metoda pobierająca dane z serwera:

fetchFiles: function() {
      Vue.http.get('http://localhost:8888/list').then((response) => {
        var res = JSON.parse(response.body);
        this.$set('items', res.files);

      }, (response) => {
        console.log(response);
      });
    }

Ta wersja kodu jest dostępna tutaj: https://github.com/pjsikora/screenshot-maker-fe-vue/commit/1c5fabacc3ed362abe995cf7da3ddfa8f7d1defa

Router

Aby zacząć pracę z routerem, będziesz musiał zainstalować nowy pakiet dostępny pod linkiem https://github.com/vuejs/vue-router. Oficjalna dokumentacja jest dostępna tutaj: https://router.vuejs.org/

Zainstalujmy pakiet:

npm install vue-router

Router dogłębnie

Aby zacząć pracę z routerem, musimy trochę zmienić naszą strukturę. Nasze podejście to stworzenie aplikacji z dwoma linkami: - list - z listą zrzutów ekranu - makescreenshot - z prostym formularzem tworzącym zrzut ekranu

Najpierw musimy stworzyć komponenty dla obu widoków.

Struktura: |- componenents ||- List.vue ||- MakeScreenshot.vue |- main.js

Plik main.js:

import Vue from 'vue';
import VueResource from 'vue-resource';
import VueRouter from 'vue-router';

// Komponenty
import List from './components/List';
import MakeScreenshot from './components/MakeScreenshot';

// Konfiguracja HTTP
Vue.use(VueResource);
Vue.http.options.emulateJSON = true;

var App = Vue.extend({
    template: `
        <div id="app">
          <h1>Screenshot App!</h1>
          <p>
            <a v-link="{ path: '/list' }">Przejdź do Listy</a>
            <a v-link="{ path: '/makescreenshot' }">Zrób zrzut ekranu</a>
          </p>
          <!-- outlet routera -->
          <router-view></router-view>
        </div>
    `
});

// Konfiguracja Routera
Vue.use(VueRouter);
var router = new VueRouter();

router.map({
    '/list': {
        component: List
    },
    '/makescreenshot': {
        component: MakeScreenshot
    }
});

// Uruchom aplikację
router.start(App, 'app');

List.vue

<template>
    <p>To jest lista!</p>
    <ul>
        <li v-for="(index, item) in items">
            {{ item }}
        </li>
    </ul>
</template>
<style>

</style>
<script>
    import Vue from 'vue';

    export default{
        data: function(){
            return { items: [ 'ding']};
        },
        ready: function() {
            this.fetchFiles();
        },

        methods: {
            fetchFiles: function() {
                Vue.http.get('http://localhost:8888/list').then((response) => {
                    var res = JSON.parse(response.body);
                this.$set('items', res.files);

            }, (response) => {
                    console.log(response);
                });
            }
        }
    }
</script>

Podsumowanie

Podstawy Vue.js są raczej proste do opanowania. Routing i żądania HTTP mogłyby być zawarte w głównym pakiecie. Ale może lepiej trzymać je poza rdzeniem i mieć mniejszą bibliotekę. Po tym krótkim projekcie myślę, że Vue.js to bardzo dobry i mały framework i łatwy do nauki. Wygląda w niektórych punktach dość podobnie do Angular 1.

Możesz sprawdzić źródła projektu tutaj: https://github.com/pjsikora/screenshot-maker-fe-vue