Conjunto básico para desarrolladores de VueJS

Comenzando con lo básico

¿Alguna vez ha tenido el deseo de comenzar a escribir sus propias aplicaciones web de una sola página? ¿Has notado el hecho de que en este momento hay tres solicitantes básicos para el papel de tu fiel compañero? Cada uno de ellos es único a su manera y ofrece una serie de ventajas.

Por ejemplo, Angular tiene una gran cantidad de funcionalidades listas para usar, React le permite personalizar de manera muy flexible su propio entorno y VueJS es famoso por su abstracción de cosas complejas. ¿Cuál deberías elegir? Este negocio es puramente individual y depende de la idea y las tareas del proyecto.

¿Aplicaciones de una sola página? ¿Es delicioso?

Sí, por supuesto, son bastante sabrosos y tienen un sabor estrictamente específico, dependiendo de la tecnología elegida. Entonces, por ejemplo, la tecnología considerada en este artículo le permite sentir las notas ligeras de una vida agradable y un poco de eufemismo.

Más en serio, este tipo de aplicación nos permite, como desarrolladores, lograr una interconectividad mucho mayor entre cada componente del sitio web. Esto suena bien, por supuesto, pero ¿qué es bueno para el usuario final? Hay muchas variables aquí. Entonces, por ejemplo, vale la pena señalar la gran capacidad de respuesta de la interfaz, cargando páginas casi instantáneamente y mucho más.

¿VueJS es simple? De alguna manera tengo poca fe

Es cien veces más fácil de aprender que sus vecinos apilados más cercanos. Y un hecho determinado se logra principalmente mediante una gran capa de soluciones arquitectónicas que le permiten no distraerse con muchos detalles internos. Esto, quizás, es un plus o menos de una sola vez de trabajar con esta tecnología.

Bueno. ¿Entonces por dónde empezar? Las manos ya pican

-, 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 qué solo hay ejemplos de aplicación aquí? Este artículo fue creado con el objetivo de dar cierto impulso a las personas interesadas. Bríndeles el ejemplo más conciso del uso de la tecnología en su propio proyecto. Un artículo más detallado iría al menos a una serie completa de 10 lecciones.

Aunque la tecnología descrita aquí es la más simple en relación con sus hermanos mayores en la pila, sigue siendo integral y con sus cuellos de botella, que deben desmontarse por separado.