Basic set for VueJS developers

Starting with the basics

Have you ever had the desire to start writing your own single-page web applications? Have you noticed the fact that at this point in time there are three basic applicants for the role of your faithful companion? Each of them is unique in its own way and provides a number of advantages.

For example, Angular has a huge amount of functionality out of the box, React allows you to very flexibly customize your own environment, and VueJS is famous for its abstraction of complex things. Which one should you choose? This business is purely individual and depends on the project idea and tasks.

Single page applications? It's delicious?

Yes, of course, they are quite tasty and have a strictly specific taste, depending on the technology chosen. So, for example, the technology considered in this article allows you to feel the light notes of a pleasant life and some understatement.

More seriously, this kind of application allows us, as developers, to realize much greater interconnectivity between each component of the website. This sounds good, of course, but what is good for the end user? There are a lot of variables here. So, for example, it is worth noting the great responsiveness of the interface, almost instantly loading pages and much more.

Is VueJS simple? I somehow have little faith

It is a hundred times easier to learn than its closest stacked neighbors. And a given fact is primarily achieved by a huge layer of architectural solutions that allow you not to be distracted by many internal details. This, perhaps, is a one-time plus or minus of working with this technology.

Good. Then where to start? Hands are already itching

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

. ?

Why are there only application examples here? This article was created with the aim of giving some impetus to interested people. Provide them with the most concise example of using technology in their own project. A more detailed article would go to at least a whole series of 10 lessons.

Even though the technology described here is the simplest relative to its older brothers on the stack, it remains comprehensive and with its bottlenecks, which should be disassembled separately.