شروع سریع ​

امتحان Vue بصورت آنلاین ​

• برای اینکه بتوانید به سرعت Vue را امتحان کنید، می‌توانید آن را مستقیماً در Playground ما امتحان کنید.

• اگر ترجیح می‌دهید یک راه‌اندازی HTML ساده بدون هیچ مراحل ساختی داشته باشید، می‌توانید از JSFiddle به عنوان نقطه شروع خود استفاده کنید.

• اگر شما از قبل با Node.js و مفهوم build tools آشنا هستید، می‌توانید یک تنظیم کامل ساخت را مستقیماً در مرورگر خود با StackBlitz امتحان کنید.

ایجاد برنامه Vue ​

در این بخش به ایجاد اولیه یک برنامه تک صفحه‌ای Vue بر روی کامپیوتر خود می‌پردازیم (Single Page Application). پروژه ایجاد شده از یک ابزار راه اندازی ساخت مبتنی بر Vite استفاده خواهد کرد و به ما امکان می‌دهد از کامپوننت‌های تک فایلی Vue استفاده کنیم (SFC).

اطمینان حاصل کنید که شما یک نسخه به‌روز از Node.js را بصورت نصب شده دارید و دایرکتوری فعلی شما همان جایی است که قصد ایجاد یک پروژه جدید را دارید. دستور زیر را در command line خود اجرا کنید (بدون علامت $):

$ npm create vue@latest

$ pnpm create vue@latest

$ yarn 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 / 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

Scaffolding project in ./<your-project-name>...
Done.

اگر در مورد یک گزینه مطمئن نیستید، فعلاً با زدن enter برای انتخاب No آن را نادیده بگیرید. سپس وقتی پروژه ایجاد شد، دستورالعمل‌های زیر را برای نصب وابستگی‌ها و راه‌اندازی dev server دنبال کنید:

$ 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 است. اگر از ویرایشگرهای دیگر استفاده می‌کنید، بخش پشتیبانی IDE را بررسی کنید.
• جزئیات بیشتر ابزار، از جمله یکپارچه‌سازی با فریم‌ورک‌های بک‌اند، در راهنمای ابزارها مورد بحث قرار گرفته.
• برای یادگیری بیشتر در مورد ابزار ساخت پایه Vite، مستندات Vite را بررسی کنید.
• اگر TypeScript را انتخاب کردید، راهنمای استفاده از TypeScript را بررسی کنید.

هنگامی که آماده ارسال برنامه خود به پروداکشن هستید، کامند زیر را اجرا کنید:

$ npm run build

$ pnpm run build

$ yarn build

$ bun run build

این کار یک بیلد آماده برای محیط پروداکشن در دایرکتوری ‎./dist پروژه شما ایجاد خواهد کرد. راهنمای استقرار پروداکشن را برای یادگیری بیشتر در مورد ارسال برنامه خود به پروداکشن بررسی کنید.

مراحل بعدی >

استفاده از Vue از طریق CDN ​

شما می‌توانید مستقیماً از Vue از طریق یک تگ script استفاده کنید:

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

اینجا از unpkg استفاده کردیم، اما شما همچنین می‌توانید از هر CDN دیگری که پکیج‌های npm را ارائه می‌دهد مثل jsdelivr یا cdnjs استفاده کنید. البته، شما همچنین می‌توانید این فایل را دانلود و خودتان سِرو کنید.

هنگام استفاده از Vue از طریق CDN، نیازی به مراحل بیلد گرفتن نیست. این موضوع تنظیمات را بسیار ساده‌تر می‌کند و برای بهبود HTML استاتیک یا یکپارچه‌سازی با یک فریم‌ورک بک‌اند مناسب است. با این حال، نمی‌توانید از سینتکس کامپوننت تک فایلی (SFC) استفاده کنید.

استفاده از بیلد سراسری ​

لینک بالا بیلد سراسری Vue را بارگذاری می‌کند که در آن تمام API‌های سطح بالا به عنوان پراپرتی‌هایی روی آبجکت سراسری 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: 'Hello 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('Hello vue!')
      return {
        message
      }
    }
  }).mount('#app')
</script>

استفاده از بیلد ES Module ​

در بقیه مستندات، ما عمدتاً از سینتکس ES modules استفاده خواهیم کرد. اکثر مرورگرهای مدرن اکنون بطور بومی از ES modules پشتیبانی می‌کنند، بنابراین می‌توانیم از Vue از طریق CDN با استفاده از ES modules بومی مانند این استفاده کنیم:

<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: 'Hello 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('Hello Vue!')
      return {
        message
      }
    }
  }).mount('#app')
</script>

توجه کنید که از <script type="module"‎> استفاده می‌کنیم، و URL وارد شده CDN به مکان بیلد ES modules برای Vue اشاره دارد.

فعال کردن Import maps ​

در مثال بالا، ما URL کامل CDN را ایمپورت می‌کنیم، اما در بقیه مستندات شما کدی مانند این خواهید دید:

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: 'Hello 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('Hello Vue!')
      return {
        message
      }
    }
  }).mount('#app')
</script>

شما همچنین می‌توانید ایمپورت های دیگری برای سایر وابستگی‌ها به import map اضافه کنید - اما مطمئن شوید آن‌ها به نسخه ES modules کتابخانه‌ای که قصد استفاده از آن را دارید اشاره می‌کنند.

تفکیک ماژول‌ها ​

هنگامی که عمیق‌تر به درون راهنما می‌رویم، ممکن است نیاز داشته باشیم کدمان را به فایل‌های JavaScript جداگانه‌ای تقسیم کنیم تا مدیریت آن‌ها آسان‌تر شود. برای مثال:

<!-- index.html -->
<div id="app"></div>

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

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

// my-component.js
export default {
  data() {
    return { count: 0 }
  },
  template: `<div>count is {{ count }}</div>`
}

// my-component.js
import { ref } from 'vue'
export default {
  setup() {
    const count = ref(0)
    return { count }
  },
  template: `<div>count is {{ count }}</div>`
}

اگر index.html بالا را مستقیماً در مرورگر باز کنید، متوجه خواهید شد که خطایی رخ می‌دهد زیرا ماژول‌های ES نمی‌توانند روی پروتکل file://‎ کار کنند که مرورگرها هنگام باز کردن یک فایل محلی از آن استفاده می‌کنند.

به دلایل امنیتی، ماژول‌های ES تنها می‌توانند روی پروتکل http://‎ کار کنند که مرورگرها هنگام باز کردن صفحات در وب از آن استفاده می‌کنند. برای اینکه ماژول‌های ES بر روی کامپیوتر ما کار کنند، نیاز داریم که index.html را از طریق پروتکل http://‎ سرو کنیم، با استفاده از یک سرور HTTP محلی.

برای راه‌اندازی یک سرور HTTP محلی، ابتدا مطمئن شوید Node.js نصب شده است، سپس npx serve را از command line در همان دایرکتوری حاوی فایل HTML خود اجرا کنید. همچنین می‌توانید از هر سرور HTTP دیگری که بتواند فایل‌های استاتیک را با انواع MIME صحیح سرو کند، استفاده نمایید.

شاید متوجه شده باشید که قالب کامپوننت وارد شده به صورت یک رشته JavaScript درون خطی شده است. اگر از VS Code استفاده می‌کنید، می‌توانید افزونه es6-string-html را نصب کرده و رشته‌ها را با یک توضیح /*html*/ پیشوند دهید تا برای آن‌ها هایلایت سینتکس فعال شود.

مراحل بعدی ​

اگر از معرفی رد شده اید، ما به شدت توصیه می‌کنیم که قبل از ادامه مستندات، آن را مطالعه کنید.