Basissatz für VueJS-Entwickler

Beginnend mit den Grundlagen

Haben Sie jemals den Wunsch gehabt, Ihre eigenen einseitigen Webanwendungen zu schreiben? Haben Sie bemerkt, dass es zu diesem Zeitpunkt drei grundlegende Bewerber für die Rolle Ihres treuen Begleiters gibt? Jeder von ihnen ist auf seine Weise einzigartig und bietet eine Reihe von Vorteilen.

Zum Beispiel hat Angular eine große Menge an Funktionen, React ermöglicht es Ihnen, Ihre eigene Umgebung sehr flexibel anzupassen, und VueJS ist berühmt für seine Abstraktion über komplexe Dinge. Welches solltest du wählen? Dieses Geschäft ist rein individuell und hängt von der Projektidee und den Aufgaben ab.

Einzelseitenanwendungen? Das ist lecker?

Ja, natürlich sind sie sehr lecker und haben je nach gewählter Technologie einen streng spezifischen Geschmack. So können Sie beispielsweise mit der in diesem Artikel behandelten Technologie die leichten Noten eines angenehmen Lebens und eine gewisse Untertreibung spüren.

Im Ernst, diese Art von Anwendung ermöglicht es uns als Entwicklern, eine viel größere Interkonnektivität zwischen den einzelnen Komponenten der Website zu realisieren. Das hört sich natürlich gut an, aber was ist gut für den Endbenutzer? Hier gibt es viele Variablen. So ist es zum Beispiel erwähnenswert, wie schnell die Benutzeroberfläche reagiert, Seiten fast sofort lädt und vieles mehr.

Ist VueJS einfach? Ich habe irgendwie wenig Vertrauen

Es ist hundertmal einfacher zu lernen als seine nächsten gestapelten Nachbarn. Und eine bestimmte Tatsache wird in erster Linie durch eine große Anzahl von Architekturlösungen erreicht, die es Ihnen ermöglichen, sich nicht von vielen internen Details ablenken zu lassen. Dies ist möglicherweise ein einmaliges Plus oder Minus der Arbeit mit dieser Technologie.

Gut. Wo soll ich dann anfangen? Hände jucken schon

-, VueJS . . ? .

. , , ? . . .

<!--   . Dev- -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!--  .    -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

, , . VueJS, . ? . - Node.js npm/yarn.

#  npm
npm install -g @vue/cli

#  yarn
yarn global add @vue/cli

#   .      .
vue create appname
# ,    GUI, :
vue ui

, yarn Linux .

# ~/.bashrc  bash
# ~/.zshrc  zsh

export PATH="/home/username/.yarn/bin:$PATH"

, . ? , - , ? .

, :

1. assets — .
2. components — vue-. , .
3. router — . url .
4. store — VueJS, .
5. views — router, .
6. App.vue — . .
7. main.js — . , .

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  //  
  state: {
    Title: 'Tested',
    MenuTitle: ['', ''],
    Number: 30
  },
  //     
  mutations: {
    Title: (state, value) => state.Title = value,
    MenuTitle(state, value) {
       state.MenuTitle.append(value);
    }  
  },

  //  mapState.       .  
  getters: {
    NumberTest(state) {
       return state.Number * state.Number;
    } 
  }
})

<!- -App.vue -->
<template>
  <!-- Template        .     <template>   -->
  <div id="app">
    <Menu></Menu>
    <router-view></router-view>
  </div>
</template>

<script>
  //   Menu
  import Menu from './components/Menu'
 //  mapState       store
  import { mapState } from 'vuex';

  export default {
    name: 'HelloWorld',
    // .      template
    components: {
      Menu
    },

    // Computed -  .   .
    computed: mapState([ 'Title' ]),

   // Watch -         .
   // --> , ,        Title
    watch: {
      Title(value) { document.title = value; } 
    },
  //    . Created     .
  created() {
      document.title = this.Title;
    }
  }
</script>

<style lang="css">

</style>

<template>
  <!--v-if -            true/false. -->
  <ul v-if="Number > 30">
    <!-- v-for -        .      3 .      this.$store.commit('MenuTitle', 'value3') -->
   <!-- v-bind -   .      style (  ). -->
   <!-- {{ element }} -         html. ,           -->
    <li
    v-for="(element, index) in MenuTitle"
    v-bind:key="index"
    >{{ element }}</li>
  </ul>
  <!-- v-else -      ,  v-if  false -->
  <h1 v-else> Number  30 <h1>
</template>

<script>
  import { mapState } from 'vuex';

  export default {
    name: 'mainMenu',
    computed: mapState({
      MenuTitle: (state) => state.MenuTitle,
      Number() {
        return this.$store.getters.NumberTest;
      }
    }),
    created() {
       this.$store.commit('MenuTitle', 'value3');
    }
  }
</script>

<!-- scoped -    css-   -->
<style lang="css" scoped>

</style>

<div id="app">
  {{ message }}
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: ', Vue!'
  }
})

. ?

Warum gibt es hier nur Anwendungsbeispiele? Dieser Artikel wurde mit dem Ziel erstellt, interessierten Menschen Impulse zu geben. Geben Sie ihnen das prägnanteste Beispiel für den Einsatz von Technologie in ihrem eigenen Projekt. Ein ausführlicherer Artikel würde mindestens eine ganze Reihe von 10 Lektionen umfassen.

Obwohl die hier beschriebene Technologie im Vergleich zu ihren älteren Brüdern auf dem Stapel die einfachste ist, bleibt sie umfassend und mit ihren Engpässen, die separat zerlegt werden sollten.