close

Vue.js ਨੂੰ ਸਥਾਪਿਤ ਕਰਨਾ ਅਤੇ ਆਪਣਾ ਪਹਿਲਾ ਪ੍ਰੋਜੈਕਟ ਬਣਾਉਣਾ

Vue.js ਨੂੰ ਸਥਾਪਿਤ ਕਰਨ ਲਈ, ਤੁਸੀਂ ਹੇਠਾਂ ਦਿੱਤੇ ਕਦਮਾਂ ਦੀ ਪਾਲਣਾ ਕਰ ਸਕਦੇ ਹੋ:

ਕਦਮ 1: ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਲਈ ਇੱਕ ਨਵੀਂ ਡਾਇਰੈਕਟਰੀ ਬਣਾਓ ਅਤੇ ਉਸ ਡਾਇਰੈਕਟਰੀ ਵਿੱਚ ਟਰਮੀਨਲ ਖੋਲ੍ਹੋ।

ਕਦਮ 2: ਹੇਠ ਦਿੱਤੀ ਕਮਾਂਡ ਚਲਾ ਕੇ Vue CLI(ਕਮਾਂਡ ਲਾਈਨ ਇੰਟਰਫੇਸ) ਨੂੰ ਸਥਾਪਿਤ ਕਰਨ ਲਈ npm ਦੀ ਵਰਤੋਂ ਕਰੋ:

npm install -g @vue/cli


ਕਦਮ 3: ਸਫਲਤਾਪੂਰਵਕ ਇੰਸਟਾਲੇਸ਼ਨ ਤੋਂ ਬਾਅਦ, ਤੁਸੀਂ ਹੇਠਾਂ ਦਿੱਤੀ ਕਮਾਂਡ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇੱਕ ਨਵਾਂ Vue ਪ੍ਰੋਜੈਕਟ ਬਣਾ ਸਕਦੇ ਹੋ:

vue create my-vue-project


ਕਦਮ 4: ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਲਈ ਸੰਰਚਨਾ ਵਿਕਲਪ ਚੁਣੋ, ਜਿਸ ਵਿੱਚ Babel, ESLint, ਅਤੇ CSS ਪ੍ਰੀ-ਪ੍ਰੋਸੈਸਰ(ਵਿਕਲਪਿਕ) ਨੂੰ ਸਥਾਪਿਤ ਕਰਨਾ ਸ਼ਾਮਲ ਹੈ।

ਕਦਮ 5: ਇੱਕ ਵਾਰ ਪ੍ਰੋਜੈਕਟ ਬਣਾਉਣ ਦੀ ਪ੍ਰਕਿਰਿਆ ਪੂਰੀ ਹੋਣ ਤੋਂ ਬਾਅਦ, ਕਮਾਂਡ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਪ੍ਰੋਜੈਕਟ ਡਾਇਰੈਕਟਰੀ ਵਿੱਚ ਨੈਵੀਗੇਟ ਕਰੋ:

cd my-vue-project


ਕਦਮ 6: Vue ਪ੍ਰੋਜੈਕਟ ਨੂੰ ਸ਼ੁਰੂ ਕਰਨ ਲਈ ਹੇਠ ਲਿਖੀ ਕਮਾਂਡ ਚਲਾਓ:

npm run serve


ਸਟਾਰਟਅਪ ਪ੍ਰਕਿਰਿਆ ਪੂਰੀ ਹੋਣ ਤੋਂ ਬਾਅਦ, ਤੁਸੀਂ ਬ੍ਰਾਊਜ਼ਰ 'ਤੇ ਆਪਣੀ Vue ਐਪਲੀਕੇਸ਼ਨ ਨੂੰ ਐਕਸੈਸ ਕਰਨ ਲਈ ਇੱਕ URL ਦੇਖੋਗੇ।

Vue.js ਦੀ ਇੱਕ ਸਧਾਰਨ ਉਦਾਹਰਣ:

ਚਲੋ ਇੱਕ ਨਵੀਂ HTML ਫਾਈਲ ਬਣਾਈਏ ਅਤੇ ਇਸਦਾ ਨਾਮ ਕਰੀਏ index.html `। ਇਸ ਫਾਈਲ ਵਿੱਚ, ਹੇਠ ਦਿੱਤੇ ਕੋਡ ਨੂੰ ਸ਼ਾਮਲ ਕਰੋ:

html  
<!DOCTYPE html>  
<html>  
<head>  
  <title>Vue.js Example</title>  
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
</head>  
<body>  
  <div id="app">  
    <h1>{{ message }}</h1>  
    <button @click="changeMessage">Change Message</button>  
  </div>  
  
  <script>  
    new Vue({  
      el: '#app',  
      data: {  
        message: 'Hello Vue.js!'  
      },  
      methods: {  
        changeMessage() {  
          this.message = 'Message changed successfully!';  
        }  
      }  
    });  
  </script>  
</body>  
</html>

h1 ਇਸ ਉਦਾਹਰਨ ਵਿੱਚ, ਅਸੀਂ ਇੱਕ ਟੈਗ ਅਤੇ ਇੱਕ ਬਟਨ ਦੇ ਨਾਲ ਇੱਕ ਸਧਾਰਨ Vue ਐਪਲੀਕੇਸ਼ਨ ਬਣਾਈ ਹੈ । ਜਦੋਂ ਬਟਨ ਦਬਾਇਆ ਜਾਂਦਾ ਹੈ, ਸੁਨੇਹਾ ਬਦਲ ਜਾਵੇਗਾ.

ਫਾਈਲ ਨੂੰ ਸੇਵ ਕਰੋ index.html  ਅਤੇ ਇਸਨੂੰ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਖੋਲ੍ਹੋ। ਤੁਹਾਨੂੰ "ਹੈਲੋ Vue.js!" ਵਜੋਂ ਸ਼ੁਰੂਆਤੀ ਸੁਨੇਹਾ ਦਿਖਾਈ ਦੇਵੇਗਾ। ਜਦੋਂ ਤੁਸੀਂ ਬਟਨ 'ਤੇ ਕਲਿੱਕ ਕਰਦੇ ਹੋ, ਤਾਂ ਸੁਨੇਹਾ ਬਦਲ ਜਾਵੇਗਾ "ਸੁਨੇਹਾ ਸਫਲਤਾਪੂਰਵਕ ਬਦਲਿਆ ਗਿਆ!"।

ਤੁਹਾਨੂੰ Vue.js ਨਾਲ ਸ਼ੁਰੂਆਤ ਕਰਨ ਲਈ ਇਹ ਸਿਰਫ਼ ਇੱਕ ਸਧਾਰਨ ਉਦਾਹਰਨ ਹੈ। ਤੁਸੀਂ ਆਪਣੀਆਂ ਐਪਲੀਕੇਸ਼ਨਾਂ ਨੂੰ ਵਿਕਸਿਤ ਕਰਦੇ ਸਮੇਂ Vue.js ਦੀਆਂ ਕਈ ਹੋਰ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਅਤੇ ਸ਼ਕਤੀਸ਼ਾਲੀ ਸਮਰੱਥਾਵਾਂ ਦੀ ਪੜਚੋਲ ਕਰ ਸਕਦੇ ਹੋ।