ઝડપી શરૂઆત ​

Vue ને ઓનલાઇન અજમાવો ​

• Vue નો ઝડપથી અનુભવ મેળવવા માટે, તમે તેને સીધા જ અમારા Playground માં અજમાવી શકો છો.

• જો તમે કોઈપણ બિલ્ડ સ્ટેપ્સ વિના પ્લેન HTML સેટઅપ પસંદ કરો છો, તો તમે આ JSFiddle નો ઉપયોગ તમારા પ્રારંભિક બિંદુ તરીકે કરી શકો છો.

• જો તમે પહેલાથી જ Node.js અને બિલ્ડ ટૂલ્સના ખ્યાલથી પરિચિત છો, તો તમે StackBlitz પર તમારા બ્રાઉઝરની અંદર જ સંપૂર્ણ બિલ્ડ સેટઅપ અજમાવી શકો છો.

• ભલામણ કરેલ સેટઅપનું વોકથ્રુ મેળવવા માટે, આ ઇન્ટરેક્ટિવ Scrimba ટ્યુટોરીયલ જુઓ જે તમને તમારી પ્રથમ Vue એપ કેવી રીતે ચલાવવી, એડિટ કરવી અને ડિપ્લોય કરવી તે બતાવે છે.

Vue એપ્લિકેશન બનાવવી ​

આ વિભાગમાં અમે તમારા લોકલ મશીન પર Vue સિંગલ પેજ એપ્લિકેશન (SPA) કેવી રીતે બનાવવી તે રજૂ કરીશું. બનાવેલ પ્રોજેક્ટ Vite પર આધારિત બિલ્ડ સેટઅપનો ઉપયોગ કરશે અને અમને Vue સિંગલ-ફાઇલ કમ્પોનન્ટ્સ (SFCs) વાપરવાની મંજૂરી આપશે.

ખાતરી કરો કે તમારી પાસે Node.js નું અદ્યતન સંસ્કરણ ઇન્સ્ટોલ કરેલું છે અને તમારી વર્તમાન વર્કિંગ ડિરેક્ટરી તે છે જ્યાં તમે પ્રોજેક્ટ બનાવવા માંગો છો. તમારી કમાન્ડ લાઇનમાં નીચેનો કમાન્ડ ચલાવો ($ ચિહ્ન વિના):

$ npm create vue@latest

$ pnpm create vue@latest

# Yarn (v1+) માટે
$ yarn create vue

# Yarn Modern (v2+) માટે
$ yarn create vue@latest
  
# Yarn ^v4.11 માટે
$ yarn dlx create-vue@latest

$ bun create vue@latest

આ કમાન્ડ Vue પ્રોજેક્ટ બનાવવાનું સત્તાવાર સાધન create-vue ઇન્સ્ટોલ અને એક્ઝિક્યુટ કરશે. તમને TypeScript અને ટેસ્ટિંગ સપોર્ટ જેવી ઘણી વૈકલ્પિક સુવિધાઓ માટેના પ્રોમ્પ્ટ્સ રજૂ કરવામાં આવશે:

✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add an End-to-End Testing Solution? … No / Cypress / Nightwatch / Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
✔ Add Vue DevTools 7 extension for debugging? (experimental) … No / Yes
71: 
Scaffolding project in ./<your-project-name>...
Done.

જો તમે કોઈ વિકલ્પ વિશે ચોક્કસ ન હોવ, તો અત્યારે એન્ટર દબાવીને ફક્ત No પસંદ કરો. એકવાર પ્રોજેક્ટ બની જાય પછી, ડિપેન્ડન્સી ઇન્સ્ટોલ કરવા અને ડેવલપર સર્વર શરૂ કરવા માટેની સૂચનાઓનું પાલન કરો:

$ cd <your-project-name>
$ npm install
$ npm run dev

$ cd <your-project-name>
$ pnpm install
$ pnpm run dev

$ cd <your-project-name>
$ yarn
$ yarn dev

$ cd <your-project-name>
$ bun install
$ bun run dev

હવે તમારી પ્રથમ Vue પ્રોજેક્ટ તૈયાર છે! નોંધ કરો કે જનરેટ કરેલ પ્રોજેક્ટમાં ઉદાહરણ ઘટકો Options API ને બદલે Composition API અને <script setup> નો ઉપયોગ કરીને લખવામાં આવ્યા છે. અહીં કેટલીક વધારાની ટિપ્સ છે:

• ભલામણ કરેલ IDE સેટઅપ Visual Studio Code + Vue - Official extension છે. જો તમે અન્ય એડિટર્સનો ઉપયોગ કરો છો, તો IDE સપોર્ટ વિભાગ તપાસો.
• બેકએન્ડ ફ્રેમવર્ક સાથેના એકીકરણ સહિતની વધુ ટૂલિંગ વિગતોની ચર્ચા ટૂલિંગ માર્ગદર્શિકા માં કરવામાં આવી છે.
• અંતર્ગત બિલ્ડ ટૂલ Vite વિશે વધુ જાણવા માટે, Vite docs તપાસો.
• જો તમે TypeScript નો ઉપયોગ કરવાનું પસંદ કરો છો, તો TypeScript વપરાશ માર્ગદર્શિકા તપાસો.

જ્યારે તમે તમારી એપ્લિકેશનને પ્રોડક્શન (production) માટે તૈયાર હોવ, ત્યારે નીચે મુજબ કરો:

$ npm run build

$ pnpm run build

$ yarn build

$ bun run build

આ તમારા પ્રોજેક્ટની ./dist ડિરેક્ટરીમાં તમારી એપ્લિકેશનનું પ્રોડક્શન-રેડી બિલ્ડ બનાવશે. તમારી એપને પ્રોડક્શન પર મોકલવા વિશે વધુ જાણવા માટે પ્રોડક્શન ડિપ્લોયમેન્ટ માર્ગદર્શિકા તપાસો.

આગળના પગલાં >

CDN દ્વારા Vue નો ઉપયોગ કરવો ​

તમે સ્ક્રિપ્ટ ટેગ દ્વારા સીધા જ CDN થી Vue નો ઉપયોગ કરી શકો છો:

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

અહીં આપણે unpkg નો ઉપયોગ કરી રહ્યા છીએ, પરંતુ તમે npm પેકેજો પ્રદાન કરતી કોઈપણ CDN નો ઉપયોગ કરી શકો છો, ઉદાહરણ તરીકે jsdelivr અથવા cdnjs. અલબત્્ય, તમે આ ફાઇલને ડાઉનલોડ પણ કરી શકો છો અને તેને જાતે સર્વ કરી શકો છો.

જ્યારે CDN થી Vue નો ઉપયોગ કરવામાં આવે છે, ત્યારે તેમાં કોઈ "બિલ્ડ સ્ટેપ" સામેલ હોતું નથી. આ સેટઅપને ઘણું સરળ બનાવે છે, અને સ્ટેટિક HTML ને બહેતર બનાવવા અથવા બેકએન્ડ ફ્રેમવર્ક સાથે એકીકૃત કરવા માટે યોગ્ય છે. જો કે, તમે સિંગલ-ફાઇલ કમ્પોનન્ટ (SFC) સિન્ટેક્સનો ઉપયોગ કરી શકશો નહીં.

ગ્લોબલ બિલ્ડનો ઉપયોગ કરવો ​

ઉપરની લિંક Vue નું ગ્લોબલ બિલ્ડ લોડ કરે છે, જ્યાં તમામ ટોપ-લેવલ APIs ગ્લોબલ Vue ઓબ્જેક્ટ પર પ્રોપર્ટીઝ તરીકે એક્સપોઝ થાય છે. ગ્લોબલ બિલ્ડનો ઉપયોગ કરીને અહીં એક સંપૂર્ણ ઉદાહરણ છે:

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">{{ message }}</div>

<script>
  const { createApp } = Vue

  createApp({
    data() {
      return {
        message: 'હેલો Vue!'
      }
    }
  }).mount('#app')
</script>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">{{ message }}</div>

<script>
  const { createApp, ref } = Vue

  createApp({
    setup() {
      const message = ref('હેલો vue!')
      return {
        message
      }
    }
  }).mount('#app')
</script>

ES મોડ્યુલ બિલ્ડનો ઉપયોગ કરવો ​

બાકીના દસ્તાવેજોમાં, અમે મુખ્યત્વે ES મોડ્યુલ્સ સિન્ટેક્સનો ઉપયોગ કરીશું. મોટાભાગના આધુનિક બ્રાઉઝર્સ હવે મૂળ રીતે ES મોડ્યુલ્સને સપોર્ટ કરે છે, તેથી આપણે આની જેમ નેટિવ ES મોડ્યુલ્સ દ્વારા CDN થી Vue નો ઉપયોગ કરી શકીએ છીએ:

<div id="app">{{ message }}</div>

<script type="module">
  import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

  createApp({
    data() {
      return {
        message: 'હેલો Vue!'
      }
    }
  }).mount('#app')
</script>

<div id="app">{{ message }}</div>

<script type="module">
  import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

  createApp({
    setup() {
      const message = ref('હેલો Vue!')
      return {
        message
      }
    }
  }).mount('#app')
</script>

નોંધ લો કે આપણે <script type="module"> નો ઉપયોગ કરી રહ્યા છીએ, અને ઇમ્પોર્ટ કરેલ CDN URL તેના બદલે Vue ના ES મોડ્યુલ્સ બિલ્ડ તરફ નિર્દેશ કરી રહ્યું છે.

Import maps સક્ષમ કરવું ​

ઉપરના ઉદાહરણમાં, અમે સંપૂર્ણ CDN URL પરથી ઇમ્પોર્ટ કરી રહ્યા છીએ, પરંતુ બાકીના દસ્તાવેજોમાં તમે આના જેવો કોડ જોશો:

import { createApp } from 'vue'

અમે બ્રાઉઝરને Import Maps નો ઉપયોગ કરીને vue ઇમ્પોર્ટ ક્યાં સ્થિત છે તે શીખવી શકીએ છીએ:

<script type="importmap">
  {
    "imports": {
      "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
    }
  }
</script>

<div id="app">{{ message }}</div>

<script type="module">
  import { createApp } from 'vue'

  createApp({
    data() {
      return {
        message: 'હેલો Vue!'
      }
    }
  }).mount('#app')
</script>

<script type="importmap">
  {
    "imports": {
      "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
    }
  }
</script>

<div id="app">{{ message }}</div>

<script type="module">
  import { createApp, ref } from 'vue'

  createApp({
    setup() {
      const message = ref('હેલો Vue!')
      return {
        message
      }
    }
  }).mount('#app')
</script>

તમે ઇમ્પોર્ટ મેપમાં અન્ય ડિપેન્ડન્સી માટે એન્ટ્રીઓ પણ ઉમેરી શકો છો - પરંતુ ખાતરી કરો કે તેઓ તમે ઉપયોગ કરવા માંગતા હો તે લાઇબ્રેરીના ES મોડ્યુલ્સ વર્ઝન તરફ નિર્દેશ કરે છે.

મોડ્યુલોનું વિભાજન ​

જેમ જેમ આપણે માર્ગદર્શિકામાં ઊંડા ઉતરીએ છીએ તેમ, અમારે અમારા કોડને અલગ-અલગ જાવાસ્ક્રિપ્ટ ફાઇલોમાં વિભાજિત કરવાની જરૂર પડી શકે છે જેથી કરીને તેને મેનેજ કરવામાં સરળતા રહે. દાખલા તરીકે:

<div id="app"></div>

<script type="module">
  import { createApp } from 'vue'
  import MyComponent from './my-component.js'

  createApp(MyComponent).mount('#app')
</script>

export default {
  data() {
    return { count: 0 }
  },
  template: `<div>ગણતરી છે: {{ count }}</div>`
}

import { ref } from 'vue'
export default {
  setup() {
    const count = ref(0)
    return { count }
  },
  template: `<div>ગણતરી છે: {{ count }}</div>`
}

જો તમે તમારા બ્રાઉઝરમાં ઉપરની index.html સીધી ખોલશો, તો તમને જણાશે કે તે એક ભૂલ (error) ફેંકે છે કારણ કે ES મોડ્યુલ્સ file:// પ્રોટોકોલ પર કામ કરી શકતા નથી, જે બ્રાઉઝર જ્યારે તમે સ્થાનિક ફાઇલ ખોલો છો ત્યારે ઉપયોગ કરે છે.

સુરક્ષા કારણોસર, ES મોડ્યુલો ફક્ત http:// પ્રોટોકોલ પર જ કામ કરી શકે છે. અમારા લોકલ મશીન પર ES મોડ્યુલ્સ કામ કરવા માટે, આપણે લોકલ HTTP સર્વર સાથે http:// પ્રોટોકોલ પર index.html સર્વ કરવાની જરૂર છે.

લોકલ HTTP સર્વર શરૂ કરવા માટે, પહેલા ખાતરી કરો કે તમારી પાસે Node.js ઇન્સ્ટોલ કરેલ છે, પછી જ્યાં તમારી HTML ફાઇલ છે તે જ ડિરેક્ટરીમાં કમાન્ડ લાઇનથી npx serve ચલાવો. તમે અન્ય કોઈપણ HTTP સર્વરનો પણ ઉપયોગ કરી શકો છો જે યોગ્ય MIME પ્રકારો સાથે સ્ટેટિક ફાઇલો પ્રદાન કરી શકે છે.

તમે કદાચ નોંધ્યું હશે કે ઇમ્પોર્ટ કરેલ ઘટકનું ટેમ્પલેટ જાવાસ્ક્રિપ્ટ સ્ટ્રિંગ તરીકે ઇનલાઇન (inlined) છે. જો તમે VS Code નો ઉપયોગ કરી રહ્યાં છો, તો તમે es6-string-html એક્સ્ટેંશન ઇન્સ્ટોલ કરી શકો છો અને તેમના માટે સિન્ટેક્સ હાઇલાઇટિંગ મેળવવા માટે સ્ટ્રિંગ્સની આગળ /*html*/ કમેન્ટ લગાવી શકો છો.

આગળના પગલાં ​

જો તમે પરિચય છોડી દીધો હોય, તો અમે બાકીના દસ્તાવેજો પર આગળ વધતા પહેલા તેને વાંચવાની ભારપૂર્વક ભલામણ કરીએ છીએ.