close

Vue.js ઇન્સ્ટોલ કરવું અને તમારો પહેલો પ્રોજેક્ટ બનાવવો

Vue.js ઇન્સ્ટોલ કરવા માટે, તમે નીચેના પગલાંને અનુસરી શકો છો:

પગલું 1: તમારા પ્રોજેક્ટ માટે નવી ડિરેક્ટરી બનાવો અને તે ડિરેક્ટરીમાં ટર્મિનલ ખોલો.

પગલું 2: નીચેનો આદેશ ચલાવીને Vue CLI(કમાન્ડ લાઇન ઇન્ટરફેસ) ઇન્સ્ટોલ કરવા માટે npm નો ઉપયોગ કરો:

npm install -g @vue/cli


પગલું 3: સફળ ઇન્સ્ટોલેશન પછી, તમે નીચેના આદેશનો ઉપયોગ કરીને એક નવો Vue પ્રોજેક્ટ બનાવી શકો છો:

vue create my-vue-project


પગલું 4: તમારા પ્રોજેક્ટ માટે રૂપરેખાંકન વિકલ્પો પસંદ કરો, જેમાં બેબલ, 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  અને તેને બ્રાઉઝરમાં ખોલો. તમને "Hello Vue.js!" તરીકે પ્રારંભિક સંદેશ દેખાશે. જ્યારે તમે બટન પર ક્લિક કરશો, ત્યારે સંદેશ બદલાઈ જશે "સંદેશ સફળતાપૂર્વક બદલાયો!".

Vue.js સાથે પ્રારંભ કરવા માટે આ એક સરળ ઉદાહરણ છે. તમારી એપ્લિકેશનો વિકસાવતી વખતે તમે Vue.js ની ઘણી વધુ સુવિધાઓ અને શક્તિશાળી ક્ષમતાઓનું અન્વેષણ કરી શકો છો.