VueJS डेवलपर्स के लिए मूल सेट

मूल बातें से शुरू

क्या आपने कभी अपने एकल-पृष्ठ वेब एप्लिकेशन लिखना शुरू करने की इच्छा की है? क्या आपने इस तथ्य पर ध्यान दिया है कि इस समय आपके वफादार साथी की भूमिका के लिए तीन बुनियादी आवेदक हैं? उनमें से प्रत्येक अपने तरीके से अद्वितीय है और कई फायदे प्रदान करता है।

उदाहरण के लिए, कोणीय बॉक्स के बाहर बड़ी मात्रा में कार्यक्षमता है, प्रतिक्रिया आपको बहुत लचीले ढंग से अपने स्वयं के वातावरण को अनुकूलित करने की अनुमति देती है, और 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 पाठों की पूरी श्रृंखला पर जाएगा।

भले ही यहां वर्णित तकनीक स्टैक पर अपने पुराने भाइयों के सापेक्ष सबसे सरल है, यह व्यापक है और इसकी अड़चनों के साथ है, जिसे अलग से मिटाया जाना चाहिए।