Vue.js ਸ਼ੁਰੂਆਤ ਕਰਨ ਵਾਲਿਆਂ ਲਈ ਮਾਰਗਦਰਸ਼ਕ: ਬੁਨਿਆਦੀ ਤੋਂ ਲੈ ਕੇ ਵਰਤੋਂਯੋਗ ਤਕਨੀਕਾਂ ਤੱਕ

Vue.js ਇੱਕ ਉਪਭੋਗਤਾ ਇੰਟਰਫੇਸ ਬਣਾਉਣ ਲਈ ਇੱਕ ਪ੍ਰਗਤੀਸ਼ੀਲ JavaScript ਫਰੇਮਵਰਕ ਹੈ, ਜੋ ਕਿ ਇਸਦੀ ਸਿੱਖਣ ਵਿੱਚ ਆਸਾਨੀ, ਲਚਕਦਾਰਤਾ ਅਤੇ ਪ੍ਰਭਾਵਸ਼ਾਲੀਤਾ ਕਾਰਨ ਵਿਆਪਕ ਤੌਰ 'ਤੇ ਪ੍ਰਸਿੱਧ ਹੈ। ਇਸ ਲੇਖ ਵਿੱਚ, ਅਸੀਂ ਸ਼ੁਰੂਆਤ ਕਰਨ ਵਾਲਿਆਂ ਲਈ Vue.js ਦਾ ਇੱਕ ਵਿਸ਼ਤ੍ਰਿਤ ਮਾਰਗਦਰਸ਼ਕ ਪ੍ਰਦਾਨ ਕਰਾਂਗੇ, ਜੋ ਕਿ ਬੁਨਿਆਦੀ ਜਾਣਕਾਰੀ, ਵਾਤਾਵਰਣ ਸੈਟਅਪ, ਮੁੱਖ ਧਾਰਨਾ ਅਤੇ ਵਰਤੋਂਯੋਗ ਤਕਨੀਕਾਂ ਨੂੰ ਕਵਰ ਕਰੇਗਾ, ਤੁਹਾਨੂੰ Vue.js ਵਿਕਾਸ ਵਿੱਚ ਤੇਜ਼ੀ ਨਾਲ ਸ਼ੁਰੂ ਕਰਨ ਵਿੱਚ ਮਦਦ ਕਰਨ ਲਈ।

1. ਵਾਤਾਵਰਣ ਸੈਟਅਪ

1.1 ਆਪਣੇ ਵਿਕਾਸ ਵਾਤਾਵਰਣ ਨੂੰ ਯਕੀਨੀ ਬਣਾਓ

ਸ਼ੁਰੂ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਤੁਸੀਂ ਹੇਠਾਂ ਦਿੱਤੇ ਟੂਲਾਂ ਨੂੰ ਇੰਸਟਾਲ ਕੀਤਾ ਹੈ:

• Node.js: Vue.js Node.js ਵਾਤਾਵਰਣ 'ਤੇ ਨਿਰਭਰ ਕਰਦਾ ਹੈ। ਤੁਸੀਂ Node.js ਦੀ ਸਰਕਾਰੀ ਵੈਬਸਾਈਟ ਤੋਂ ਨਵਾਂ ਵਰਜਨ ਡਾਊਨਲੋਡ ਅਤੇ ਇੰਸਟਾਲ ਕਰ ਸਕਦੇ ਹੋ।
• npm ਜਾਂ yarn: Node.js ਆਪਣੇ ਆਪ npm ਪੈਕੇਜ ਪ੍ਰਬੰਧਨ ਟੂਲ ਨੂੰ ਇੰਸਟਾਲ ਕਰੇਗਾ, yarn ਇੱਕ ਹੋਰ ਆਮ ਚੋਣ ਹੈ।

1.2 Vue ਪ੍ਰੋਜੈਕਟ ਬਣਾਓ

Vue CLI (ਕਮਾਂਡ ਲਾਈਨ ਟੂਲ) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਨਵਾਂ Vue ਪ੍ਰੋਜੈਕਟ ਬਣਾਓ। ਹੇਠਾਂ ਦਿੱਤਾ ਗਿਆ ਬਣਾਉਣ ਦੀ ਪ੍ਰਕਿਰਿਆ ਹੈ:

1. Vue CLI ਇੰਸਟਾਲ ਕਰੋ:

   npm install -g @vue/cli
   

   ਜਾਂ yarn ਦੀ ਵਰਤੋਂ ਕਰੋ:

   yarn global add @vue/cli
   

2. ਨਵਾਂ ਪ੍ਰੋਜੈਕਟ ਬਣਾਓ:

   vue create my-project
   

   ਬਣਾਉਣ ਦੀ ਪ੍ਰਕਿਰਿਆ ਦੌਰਾਨ, ਕਮਾਂਡ ਲਾਈਨ ਤੁਹਾਨੂੰ ਪ੍ਰੀਸੈਟ ਸੰਰਚਨਾ ਚੁਣਨ ਲਈ ਪ੍ਰੇਰਿਤ ਕਰੇਗਾ, ਤੁਸੀਂ ਡਿਫਾਲਟ ਸੰਰਚਨਾ ਜਾਂ ਹੱਥੋਂ ਚੁਣ ਸਕਦੇ ਹੋ।

3. ਵਿਕਾਸ ਸਰਵਰ ਸ਼ੁਰੂ ਕਰੋ: ਪ੍ਰੋਜੈਕਟ ਫੋਲਡਰ ਵਿੱਚ ਜਾਓ ਅਤੇ ਵਿਕਾਸ ਸਰਵਰ ਸ਼ੁਰੂ ਕਰੋ:

   cd my-project
   npm run serve
   

   ਬ੍ਰਾਊਜ਼ਰ ਖੋਲ੍ਹੋ, http://localhost:8080 'ਤੇ ਜਾਓ, ਤੁਹਾਨੂੰ Vue ਦਾ ਸੁਆਗਤ ਪੰਨਾ ਦੇਖਣਾ ਚਾਹੀਦਾ ਹੈ।

2. Vue.js ਮੁੱਖ ਧਾਰਨਾ

2.1 Vue ਉਦਾਹਰਨ

ਹਰ Vue.js ਐਪ ਇੱਕ Vue ਉਦਾਹਰਨ ਬਣਾਉਣ ਨਾਲ ਸ਼ੁਰੂ ਹੁੰਦੀ ਹੈ:

const app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
});

HTML ਵਿੱਚ, ਤੁਹਾਨੂੰ `` ਨੂੰ ਮਾਊਂਟਿੰਗ ਪੌਇੰਟ ਵਜੋਂ ਵਰਤਣਾ ਪਵੇਗਾ।

2.2 ਹੁਕਮ

Vue.js ਵਿੱਚ ਹੁਕਮ v- ਪ੍ਰੀਫਿਕਸ ਨਾਲ ਸ਼ੁਰੂ ਹੁੰਦੇ ਹਨ। ਸਭ ਤੋਂ ਆਮ ਹੁਕਮਾਂ ਵਿੱਚ ਸ਼ਾਮਲ ਹਨ:

• v-bind: ਗਤੀਸ਼ੀਲ ਗੁਣ ਬਾਈਂਡਿੰਗ
• v-model: ਦੋ-ਤਰਫ਼ਾ ਡੇਟਾ ਬਾਈਂਡਿੰਗ
• v-if / v-else / v-show: ਸ਼ਰਤੀ ਰੇਂਡਰਿੰਗ
• v-for: ਸੂਚੀ ਦੀ ਰੇਂਡਰਿੰਗ

2.3 ਕੰਪੋਨੈਂਟ

ਕੰਪੋਨੈਂਟ Vue.js ਦੀ ਇੱਕ ਮੁੱਖ ਵਿਸ਼ੇਸ਼ਤਾ ਹੈ। ਤੁਸੀਂ ਐਪ ਨੂੰ ਕਈ ਦੁਬਾਰਾ ਵਰਤਣ ਯੋਗ ਕੰਪੋਨੈਂਟਾਂ ਵਿੱਚ ਵੰਡ ਸਕਦੇ ਹੋ। ਉਦਾਹਰਨ ਵਜੋਂ, ਇੱਕ ਸਧਾਰਣ HelloWorld ਕੰਪੋਨੈਂਟ ਬਣਾਓ:

Vue.component('hello-world', {
  template: '

# Hello World!

'
});

ਫਿਰ HTML ਵਿੱਚ ਵਰਤੋਂ ਕਰੋ:

3. ਵਰਤੋਂਯੋਗ ਤਕਨੀਕਾਂ

3.1 Vue Router ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਰੂਟ ਪ੍ਰਬੰਧਨ

ਇੱਕ ਸਿੰਗਲ ਪੇਜ ਐਪ ਵਿੱਚ, ਰੂਟ ਪ੍ਰਬੰਧਨ ਬਹੁਤ ਜਰੂਰੀ ਹੈ। ਐਪ ਵਿੱਚ ਨੈਵੀਗੇਸ਼ਨ ਨੂੰ ਸੰਭਾਲਣ ਲਈ Vue Router ਦੀ ਵਰਤੋਂ ਕੀਤੀ ਜਾ ਸਕਦੀ ਹੈ। ਹੇਠਾਂ ਦਿੱਤਾ ਗਿਆ ਸਧਾਰਣ ਸੰਰਚਨਾ ਉਦਾਹਰਨ ਹੈ:

1. Vue Router ਇੰਸਟਾਲ ਕਰੋ:

   npm install vue-router
   

2. ਰੂਟ ਸੰਰਚਨਾ: src/router/index.js ਵਿੱਚ ਰੂਟ ਸੈਟ ਕਰੋ:

   import Vue from 'vue';
   import Router from 'vue-router';
   import Home from '@/components/Home.vue';
   import About from '@/components/About.vue';
   
   Vue.use(Router);
   
   export default new Router({
     routes: [
       { path: '/', component: Home },
       { path: '/about', component: About }
     ]
   });
   

3. ਮੁੱਖ ਐਪ ਵਿੱਚ ਰੂਟ ਦੀ ਵਰਤੋਂ ਕਰੋ: src/App.vue ਵਿੱਚ ਰੂਟ ਵਿਊ ਸ਼ਾਮਲ ਕਰੋ:

3.2 ਸਥਿਤੀ ਪ੍ਰਬੰਧਨ: Vuex ਦੀ ਵਰਤੋਂ

ਜਦੋਂ ਤੁਹਾਡਾ ਐਪ ਜਟਿਲ ਹੋ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਸਥਿਤੀ ਪ੍ਰਬੰਧਨ ਬਹੁਤ ਮਹੱਤਵਪੂਰਨ ਹੋਵੇਗਾ। ਇਸ ਵੇਲੇ Vuex ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੀ ਸੋਚੋ। ਹੇਠਾਂ ਦਿੱਤਾ ਗਿਆ ਸਧਾਰਣ ਉਪਯੋਗ ਹੈ:

1. Vuex ਇੰਸਟਾਲ ਕਰੋ:

   npm install vuex
   

2. Vuex ਸੰਰਚਨਾ: src/store/index.js ਵਿੱਚ ਸਥਿਤੀ ਸੰਰਚਨਾ:

   import Vue from 'vue';
   import Vuex from 'vuex';
   
   Vue.use(Vuex);
   
   export default new Vuex.Store({
     state: {
       count: 0
     },
     mutations: {
       increment(state) {
         state.count++;
       }
     }
   });
   

3. ਕੰਪੋਨੈਂਟ ਵਿੱਚ Vuex ਦੀ ਵਰਤੋਂ ਕਰੋ:

   new Vue({
     store,
     computed: {
       count() {
         return this.$store.state.count;
       }
     },
     methods: {
       increment() {
         this.$store.commit('increment');
       }
     }
   });
   

3.3 ਕੰਪੋਨੈਂਟ ਲਾਇਬ੍ਰੇਰੀਆਂ ਦੀ ਸਿਫਾਰਸ਼

ਵਿਕਾਸ ਦੀ ਕੁਸ਼ਲਤਾ ਵਧਾਉਣ ਲਈ, ਕੁਝ ਤਿਆਰ ਕੀਤੀਆਂ ਕੰਪੋਨੈਂਟ ਲਾਇਬ੍ਰੇਰੀਆਂ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਹੇਠਾਂ ਦਿੱਤੀਆਂ ਕੁਝ ਆਮ Vue ਕੰਪੋਨੈਂਟ ਲਾਇਬ੍ਰੇਰੀਆਂ ਹਨ:

• Vuetify: ਮੈਟੀਰੀਅਲ ਡਿਜ਼ਾਈਨ 'ਤੇ ਆਧਾਰਿਤ ਕੰਪੋਨੈਂਟ ਲਾਇਬ੍ਰੇਰੀ।
• Element UI: ਵਿਕਾਸਕਾਂ, ਡਿਜ਼ਾਈਨਰਾਂ ਅਤੇ ਉਤਪਾਦ ਮੈਨੇਜਰਾਂ ਲਈ ਡੈਸਕਟਾਪ ਕੰਪੋਨੈਂਟ ਲਾਇਬ੍ਰੇਰੀ।
• Ant Design Vue: Ant Design 'ਤੇ ਆਧਾਰਿਤ Vue ਕੰਪੋਨੈਂਟ ਦਾ ਕਾਰਜਨਵਿਤਾ।

4. ਸਮਾਪਤੀ

ਇਹ ਲੇਖ Vue.js ਸ਼ੁਰੂਆਤ ਕਰਨ ਵਾਲਿਆਂ ਨੂੰ ਬੁਨਿਆਦੀ ਜਾਣਕਾਰੀ ਅਤੇ ਵਰਤੋਂਯੋਗ ਤਕਨੀਕਾਂ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ। ਉਮੀਦ ਹੈ ਕਿ ਇਸ ਲੇਖ ਦੁਆਰਾ, ਤੁਸੀਂ ਤੇਜ਼ੀ ਨਾਲ ਸ਼ੁਰੂਆਤ ਕਰ ਸਕੋਗੇ ਅਤੇ ਵਾਸਤਵਿਕ ਪ੍ਰੋਜੈਕਟਾਂ ਵਿੱਚ Vue.js ਦੀ ਵਰਤੋਂ ਕਰ ਸਕੋਗੇ। ਜੇ ਤੁਸੀਂ Vue.js ਬਾਰੇ ਹੋਰ ਜਾਣਕਾਰੀ ਪ੍ਰਾਪਤ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਸਰਕਾਰੀ ਦਸਤਾਵੇਜ਼ ਅਤੇ ਸਮੂਹ ਸਰੋਤਾਂ ਨੂੰ ਵੇਖ ਸਕਦੇ ਹੋ।

ਤੁਸੀਂ ਇਸ ਦਿਲਚਸਪ ਫਰੰਟਐਂਡ ਫਰੇਮਵਰਕ ਦੀ ਖੋਜ ਜਾਰੀ ਰੱਖਣ ਲਈ ਸੁਆਗਤ ਹੈ, ਅਤੇ ਆਪਣੇ ਅਗਲੇ ਪ੍ਰੋਜੈਕਟ ਦੀ ਰਚਨਾ ਸ਼ੁਰੂ ਕਰੋ!