Perangkat dasar untuk pengembang VueJS

Dimulai dengan dasar-dasar

Pernahkah Anda memiliki keinginan untuk mulai menulis aplikasi web satu halaman Anda sendiri? Pernahkah Anda memperhatikan fakta bahwa pada saat ini ada tiga pelamar dasar untuk peran rekan setia Anda? Masing-masing unik dengan caranya sendiri dan memberikan sejumlah keunggulan.

Sebagai contoh, Angular memiliki sejumlah besar fungsi di luar kotak, React memungkinkan Anda untuk secara fleksibel menyesuaikan lingkungan Anda sendiri, dan VueJS terkenal dengan abstraksi hal-hal kompleks. Yang mana yang harus Anda pilih? Bisnis ini murni individual dan tergantung pada ide dan tugas proyek.

Aplikasi satu halaman? Sangat lezat?

Ya, tentu saja, mereka sangat enak dan memiliki rasa yang sangat spesifik, tergantung pada teknologi yang dipilih. Jadi, misalnya, teknologi yang dipertimbangkan dalam artikel ini memungkinkan Anda untuk merasakan nada ringan dari kehidupan yang menyenangkan dan sedikit pernyataan.

Lebih serius lagi, aplikasi semacam ini memungkinkan kita, sebagai pengembang, untuk mewujudkan interkonektivitas yang jauh lebih besar antara setiap komponen situs web. Ini terdengar bagus, tentu saja, tetapi apa yang baik untuk pengguna akhir? Ada banyak variabel di sini. Jadi, misalnya, perlu diperhatikan responsif antarmuka yang hebat, hampir seketika memuat halaman dan banyak lagi.

Apakah VueJS sederhana? Saya entah bagaimana memiliki sedikit iman

Ini seratus kali lebih mudah dipelajari daripada tetangganya yang terdekat. Dan fakta yang diberikan terutama dicapai oleh lapisan besar solusi arsitektur yang memungkinkan Anda untuk tidak terganggu oleh banyak detail internal. Ini, mungkin, adalah plus dan minus satu kali bekerja dengan teknologi ini.

Baik. Lalu dari mana harus memulai? Tangan sudah gatal

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

. ?

Mengapa hanya ada contoh aplikasi di sini? Artikel ini dibuat dengan tujuan untuk memberikan dorongan kepada orang-orang yang tertarik. Berikan mereka contoh penggunaan teknologi paling ringkas dalam proyek mereka sendiri. Artikel yang lebih rinci akan membahas setidaknya 10 seri pelajaran.

Meskipun teknologi yang dijelaskan di sini adalah relatif sederhana untuk saudara-saudaranya yang lebih tua di tumpukan, itu tetap komprehensif dan dengan kemacetannya, yang harus dibongkar secara terpisah.