ساخت اپلیکیشن‌ تک‌ صفحه‌ای (Single Page Application) یکی از اهداف مهم توسعه‌دهندگان وب مدرن است. این نوع اپلیکیشن‌ها با بارگذاری محتوای جدید بدون راه‌اندازی مجدد صفحه، تجربه بهتری برای کاربر فراهم می‌کنند. در این مقاله از کدیتی، به بررسی مراحل ساخت اپلیکیشن تک‌ صفحه ای با Vue.js می‌پردازیم.

آشنایی با Vue.js

Vue.js یک فریم‌ورک جاوا اسکریپت پروگرسیو است که برای توسعه رابط‌های کاربری استفاده می‌شود. این فریم‌ورک با استفاده از اصولی مانند کامپوننت‌بندی و کشش داده‌ها (data binding)، به توسعه‌دهندگان این امکان را می‌دهد که با سرعت و سهولت بیشتری اپلیکیشن‌های مدرن را بسازند.

نصب و راه‌اندازی محیط

برای ساخت اپلیکیشن تک‌ صفحه ای با Vue.js، ابتدا باید محیط توسعه‌تان را آماده کنید. به مراحل زیر دقت کنید:

  1. نصب Node.js: Vue.js به Node.js بستگی دارد، بنابراین ابتدا باید Node.js را نصب کنید. می‌توانید آن را از وب‌سایت رسمی Node.js دانلود و نصب کنید.
  2. نصب Vue CLI: Vue CLI ابزار خط فرمان برای توسعه و مدیریت پروژه‌های Vue.js است. با اجرای دستور زیر در ترمینال، Vue CLI را نصب کنید: 
    npm install -g @vue/cli
  3. ایجاد پروژه جدید: پس از نصب Vue CLI، می‌توانید با استفاده از دستور زیر یک پروژه جدید ایجاد کنید: 
    vue create my-spa

    در این مرحله، تنظیمات مختلفی درخواست می‌شود که می‌توانید از تنظیمات پیش‌فرض استفاده کنید یا تنظیمات سفارشی ایجاد کنید.

ساختار پروژه

پس از ایجاد پروژه، ساختار دایرکتوری به شکل زیر خواهد بود:

my-spa/
├── node_modules/
├── public/
├── src/
│   ├── assets/
│   ├── components/
│   ├── views/
│   ├── App.vue
│   └── main.js
├── package.json
└── vue.config.js
  • src/components/: محل قرارگیری کامپوننت‌های قابل استفاده دوباره.
  • src/views/: محل قرارگیری صفحات مختلف اپلیکیشن.
  • src/App.vue: کامپوننت اصلی اپلیکیشن.
  • src/main.js: نقطه ورودی اپلیکیشن.

ایجاد کامپوننت‌ ها

در Vue.js، شما می‌توانید کامپوننت‌های جداگانه‌ای ایجاد کنید که هر کدام وظایف خاصی را بر عهده دارند. برای مثال، می‌توانید یک کامپوننت برای navbar یا یک فرم ایجاد کنید.

برای ایجاد کامپوننت، کافی است فایلی جدید با پسوند .vue در دایرکتوری src/components/ ایجاد کنید:

<template>
  <nav>
    <h1>مینی اپلیکیشن SPA</h1>
  </nav>
</template>

<script>
export default {
  name: 'Navbar'
}
</script>

<style scoped>
nav {
  background-color: #333;
  color: white;
  padding: 10px;
}
</style>

ایجاد صفحات

برای ایجاد صفحات مختلف، می‌توانید از دایرکتوری src/views/ استفاده کنید. فرض کنید می‌خواهید یک صفحه “درباره ما” بسازید:

<template>
  <div>
    <h2>درباره ما</h2>
    <p>ما یک تیم توسعه‌دهنده نرم‌افزار هستیم.</p>
  </div>
</template>

<script>
export default {
  name: 'About'
}
</script>

Routing در Vue.js

برای مدیریت ناوبری در یک SPA، شما به یک کتابخانه routing نیاز دارید. Vue Router ابزاری قدرتمند برای این منظور است. برای نصب Vue Router، از دستور زیر استفاده کنید:

npm install vue-router

سپس، یک فایل routing جدید ایجاد کنید تا مسیرها را پیکربندی کنید:

import Vue from 'vue';
import Router from 'vue-router';
import About from './views/About.vue';

Vue.use(Router);

const routes = [
  {
    path: '/about',
    component: About
  }
];

export default new Router({
  mode: 'history',
  routes
});

ادغام Router با اپلیکیشن

حالا شما باید Vue Router را به اپلیکیشن خود اضافه کنید. در src/main.js، به شکل زیر Vue Router را اضافه کنید:

import Vue from 'vue';
import App from './App.vue';
import router from './router';

new Vue({
  render: h => h(App),
  router
}).$mount('#app');

نتیجه‌ گیری

با دنبال کردن مراحل بالا، شما به سادگی می‌توانید یک اپلیکیشن SPA با استفاده از Vue.js بسازید. این فریم‌ورک، با استفاده از کامپوننت‌ها و مدیریت مسیر، امکان توسعه اپلیکیشن‌های مدرن و پویا را فراهم می‌کند. همچنین، با مستندات جامع Vue.js و منابع آنلاین، می‌توانید مهارت‌های خود را در توسعه اپلیکیشن‌های وب بهبود ببخشید.