Skip to content

شروع سریع

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

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

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

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

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

پیش‌نیازها

  • آشنایی با خط فرمان (command line)
  • نصب Node.js نسخه 18.0 یا بالاتر

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

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

npm
pnpm
yarn
bun
sh
$ 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 دنبال کنید:

npm
pnpm
yarn
bun
sh
$ cd <your-project-name>
$ npm install
$ npm run dev

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

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

npm
pnpm
yarn
bun
sh
$ npm run build

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

مراحل بعدی >

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

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

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

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

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

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

لینک بالا بیلد سراسری Vue را بارگذاری می‌کند که در آن تمام API‌های سطح بالا به عنوان پراپرتی‌هایی روی آبجکت سراسری Vue در دسترس هستند. اینجا یک نمونه کامل با استفاده از بیلد سراسری است:

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

نمونه در Codepen

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

نمونه در Codepen

نکته

بسیاری از نمونه‌های Composition API در سراسر راهنما از سینتکس <script setup> استفاده خواهند کرد که نیاز به ابزارهای بیلد دارد. اگر قصد استفاده از Composition API بدون مرحله بیلد گرفتن را دارید، استفاده از ویژگی setup()‎ را مشاهده کنید.

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

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

html
<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>
html
<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 را ایمپورت می‌کنیم، اما در بقیه مستندات شما کدی مانند این خواهید دید:

js
import { createApp } from 'vue'

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

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

نمونه در Codepen

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

نمونه در Codepen

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

پشتیبانی مرورگر از Import Maps

Import Maps یک ویژگی نسبتاً جدید مرورگر است. مطمئن شوید از یک مرورگر در محدوده پشتیبانی آن استفاده می‌کنید. به طور خاص، تنها در Safari 16.4+ پشتیبانی می‌شود.

نکاتی درباره استفاده در محیط پروداکشن

مثال‌های تا اینجا از نسخه توسعه Vue استفاده کرده‌اند - اگر قصد دارید از Vue از طریق CDN در محیط پروداکشن استفاده کنید، حتماً راهنمای استقرار پروداکشن را بررسی کنید.

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

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

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

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

  createApp(MyComponent).mount('#app')
</script>
js
// my-component.js
export default {
  data() {
    return { count: 0 }
  },
  template: `<div>count is {{ count }}</div>`
}
js
// 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 درون خطی شده است. اگر از VSCode استفاده می‌کنید، می‌توانید افزونه es6-string-html را نصب کرده و رشته‌ها را با یک توضیح /*html*/ پیشوند دهید تا برای آن‌ها هایلایت سینتکس فعال شود.

مراحل بعدی

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

شروع سریع has loaded