شروع سریع ​

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

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

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

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

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

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

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

> npm 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

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

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

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

حالا شما باید اولین پروژه Vue خود را بصورت اجرا شده داشته باشید! توجه داشته باشید که کامپوننت‌های نمونه در پروژه ایجاد شده با استفاده از Composition API و <script setup> نوشته شده‌اند، به جای Options API. چند نکته بیشتر:

• IDE توصیه شده Visual Studio Code + افزونه Volar است. اگر از ویرایشگرهای دیگر استفاده می‌کنید، بخش پشتیبانی IDE را بررسی کنید.
• جزئیات بیشتر ابزار، از جمله یکپارچه‌سازی با فریم‌ورک‌های بک‌اند، در راهنمای ابزارها مورد بحث قرار گرفته.
• برای یادگیری بیشتر در مورد ابزار ساخت پایه Vite، مستندات Vite را بررسی کنید.
• اگر TypeScript را انتخاب کردید، راهنمای استفاده از TypeScript را بررسی کنید.

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

> npm 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) استفاده کنید.

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

لینک بالا بیلد سراسری ویو را بارگذاری می‌کند که در آن تمام 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'

ما می‌توانیم به مرورگر بگوییم که vue را از کجا وارد کند با استفاده از Import Maps:

<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 را از خط فرمان در همان دایرکتوری حاوی فایل HTML خود اجرا کنید. همچنین می‌توانید از هر سرور HTTP دیگری که بتواند فایل‌های ایستا را با انواع MIME صحیح سرو کند، استفاده نمایید.

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

مراحل بعدی ​

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