Ensemble de base pour les développeurs VueJS

Commencer par les bases

Avez-vous déjà eu envie de commencer à écrire vos propres applications Web d'une seule page? Avez-vous remarqué qu'à ce stade, il y a trois candidats de base pour le rôle de votre fidèle compagnon? Chacun d'eux est unique à sa manière et offre un certain nombre d'avantages.

Par exemple, Angular a une énorme quantité de fonctionnalités prêtes à l'emploi, React vous permet de personnaliser de manière très flexible votre propre environnement, et VueJS est célèbre pour son abstraction de choses complexes. Laquelle choisir? Cette entreprise est purement individuelle et dépend de l'idée et des tâches du projet.

Applications d'une seule page? C'est délicieux?

Oui, bien sûr, ils sont assez savoureux et ont un goût strictement spécifique, selon la technologie choisie. Ainsi, par exemple, la technologie considérée dans cet article vous permet de ressentir les légères notes d'une vie agréable et un peu d'euphémisme.

Plus sérieusement, ce type d'application nous permet, en tant que développeurs, de réaliser une interconnectivité beaucoup plus grande entre chaque composant du site Web. Cela semble bien, bien sûr, mais qu'est-ce qui est bon pour l'utilisateur final? Il y a beaucoup de variables ici. Ainsi, par exemple, il convient de noter la grande réactivité de l'interface, en chargeant presque instantanément les pages et bien plus encore.

VueJS est-il simple? J'ai en quelque sorte peu de foi

Il est cent fois plus facile à apprendre que ses voisins empilés les plus proches. Et un fait donné est principalement atteint par une énorme couche de solutions architecturales qui vous permettent de ne pas être distrait par de nombreux détails internes. Il s'agit peut-être d'un avantage ou d'un inconvénient à travailler avec cette technologie.

Bien. Alors par où commencer? Les mains me démangent déjà

-, 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!'
  }
})

. ?

Pourquoi n'y a-t-il que des exemples d'application ici? Cet article a été créé dans le but de donner une impulsion aux personnes intéressées. Donnez-leur l'exemple le plus concis d'utilisation de la technologie dans leur propre projet. Un article plus détaillé irait à au moins une série entière de 10 leçons.

Même si la technologie décrite ici est la plus simple par rapport à ses frères aînés sur la pile, elle reste complète et avec ses goulots d'étranglement, qui doivent être démontés séparément.