مجموعة أساسية لمطوري VueJS

بدءا من الأساسيات

هل سبق لك أن رغبت في البدء في كتابة تطبيقات الويب الخاصة بك على صفحة واحدة؟ هل لاحظت حقيقة أنه في هذه المرحلة من الوقت هناك ثلاثة متقدمين أساسيين لدور رفيقك المؤمن؟ كل واحد منهم فريد بطريقته الخاصة ويوفر عددًا من المزايا.

على سبيل المثال ، تتمتع Angular بكمية هائلة من الوظائف خارج الصندوق ، وتتيح لك React تخصيص بيئتك الخاصة بمرونة كبيرة ، وتشتهر VueJS بتجريدها على الأشياء المعقدة. أي واحد يجب عليك أن تختار؟ هذه الأعمال فردية بحتة وتعتمد على فكرة المشروع ومهامه.

تطبيقات الصفحة الواحدة؟ إنه لذيذ؟

نعم ، بالطبع ، إنها لذيذة تمامًا ولها طعم محدد بدقة ، اعتمادًا على التكنولوجيا المختارة. لذا ، على سبيل المثال ، تتيح لك التكنولوجيا الواردة في هذه المقالة الشعور بالملاحظات الخفيفة لحياة ممتعة وبعض التبسيط.

والأكثر جدية هو أن هذا النوع من التطبيقات يتيح لنا ، كمطورين ، تحقيق قدر أكبر من الترابط بين كل مكون من مكونات موقع الويب. يبدو هذا جيدًا ، بالطبع ، ولكن ما الذي يفيد المستخدم النهائي؟ هناك الكثير من المتغيرات هنا. لذلك ، على سبيل المثال ، تجدر الإشارة إلى الاستجابة الكبيرة للواجهة ، وتحميل الصفحات على الفور تقريبًا وأكثر من ذلك بكثير.

هل VueJS بسيط؟ بطريقة ما لدي القليل من الإيمان

إنه أسهل مائة مرة في التعلم من أقرب جيرانها المكدسين. ويتم تحقيق حقيقة معينة في المقام الأول من خلال طبقة ضخمة من الحلول المعمارية التي تسمح لك بعدم تشتيت انتباهك بالعديد من التفاصيل الداخلية. ربما يكون هذا إضافة أو ناقص لمرة واحدة للعمل مع هذه التقنية.

حسن. ثم من أين تبدأ؟ اليدين تشعر بالحكة بالفعل

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

. ?

لماذا توجد أمثلة تطبيق فقط هنا؟ تم إنشاء هذه المقالة بهدف إعطاء بعض الزخم للأشخاص المهتمين. قدم لهم المثال الأكثر إيجازاً لاستخدام التكنولوجيا في مشروعهم الخاص. ستذهب مقالة أكثر تفصيلاً إلى سلسلة كاملة من 10 دروس على الأقل.

على الرغم من أن التكنولوجيا الموصوفة هنا هي أبسط نسبة إلى إخوانها الأكبر سنًا في المكدس ، إلا أنها تظل شاملة ومع اختناقاتها ، والتي يجب تفكيكها بشكل منفصل.