Conjunto básico para desenvolvedores do VueJS

Começando com o básico

Você já teve o desejo de começar a escrever seus próprios aplicativos da Web de página única? Você já notou o fato de que, neste momento, existem três candidatos básicos para o papel de seu fiel companheiro? Cada um deles é único à sua maneira e oferece várias vantagens.

Por exemplo, o Angular possui uma enorme quantidade de funcionalidades prontas para uso, o React permite que você personalize com flexibilidade o seu próprio ambiente, e o VueJS é famoso por abstrair coisas complexas. Qual deles você deve escolher? Esse negócio é puramente individual e depende da ideia e das tarefas do projeto.

Aplicativos de página única? Está delicioso?

Sim, é claro, eles são muito saborosos e têm um sabor estritamente específico, dependendo da tecnologia escolhida. Assim, por exemplo, a tecnologia considerada neste artigo permite que você sinta as notas leves de uma vida agradável e algum eufemismo.

Mais a sério, esse tipo de aplicativo nos permite, como desenvolvedores, obter uma interconexão muito maior entre cada componente do site. Parece bom, é claro, mas o que é bom para o usuário final? Existem muitas variáveis ​​aqui. Por exemplo, vale a pena notar a grande capacidade de resposta da interface, carregando quase instantaneamente as páginas e muito mais.

O VueJS é simples? De alguma forma, tenho pouca fé

É cem vezes mais fácil aprender do que seus vizinhos mais próximos. E um dado fato é alcançado principalmente por uma enorme camada de soluções arquiteturais que permitem que você não se distraia com muitos detalhes internos. Talvez essa seja uma vantagem única ou negativa de trabalhar com essa tecnologia.

Boa. Então por onde começar? As mãos já estão coçando

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

. ?

Por que existem apenas exemplos de aplicativos aqui? Este artigo foi criado com o objetivo de dar algum impulso às pessoas interessadas. Forneça a eles o exemplo mais conciso do uso da tecnologia em seu próprio projeto. Um artigo mais detalhado iria para pelo menos uma série inteira de 10 lições.

Embora a tecnologia descrita aqui seja a mais simples em relação aos irmãos mais velhos da pilha, ela permanece abrangente e com seus gargalos, que devem ser desmontados separadamente.