آموزش Vue.js: گام به گام برای شروع توسعه وب مدرن

Vue.js یکی از محبوب‌ترین فریمورک‌های جاوااسکریپت برای ساخت رابط کاربری پویا است. در این آموزش Vue.js سعی می‌کنیم تا مفاهیم پایه تا پیشرفته را به صورت گام به گام توضیح دهیم تا بتوانید پروژه‌های حرفه‌ای خود را با اطمینان پیاده‌سازی کنید.

۱. پیش‌نیازها و نصب Vue.js

برای شروع آموزش Vue.js به یک مرورگر به‌روز و محیط Node.js نیاز دارید. پس از نصب Node.js می‌توانید از طریق npm یا yarn فریمورک را نصب کنید:

npm install -g @vue/cli
# یا
yarn global add @vue/cli

سپس برای ساخت یک پروژه جدید فرمان زیر را اجرا کنید:

vue create my-vue-app

۲. ساختار پوشه‌های پروژه

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

src/ – شامل کدهای اصلی برنامه
src/components/ – کامپوننت‌های قابل استفاده مجدد
src/views/ – صفحات اصلی برنامه (در صورت استفاده از روتینگ)
src/router/ – پیکربندی مسیرها
src/store/ – مدیریت وضعیت با Vuex (در صورت نیاز)

۳. کامپوننت‌ها در Vue.js

یک کامپوننت ساده می‌تواند به شکل زیر تعریف شود:

<template>
  <div class="welcome">
    <h2>به آموزش Vue.js خوش آمدید!</h2>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Vue.js یک فریمورک ساده و قدرتمند است.'
    };
  }
};
</script>

<style scoped>
.welcome {
  text-align: center;
  margin-top: 20px;
}
</style>

۴. مسیردهی (Routing) با Vue Router

برای ایجاد یک برنامه تک صفحه‌ای (SPA) می‌توانید از Vue Router استفاده کنید. در فایل src/router/index.js مسیرهای خود را به این صورت تعریف کنید:

import { createRouter, createWebHistory } from 'vue-router';
import Home from '@/views/Home.vue';
import About from '@/views/About.vue';

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

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

۵. مدیریت وضعیت با Vuex

در برنامه‌های بزرگ، استفاده از Vuex به شما کمک می‌کند تا وضعیت (state) برنامه را به صورت مرکزی مدیریت کنید. نمونه‌ای ساده از تنظیمات Vuex:

import { createStore } from 'vuex';

export default createStore({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment');
    }
  },
  getters: {
    currentCount: (state) => state.count
  }
});

۶. مثال عملی: ساخت یک برنامه Todo List

در ادامه یک مثال ساده از برنامه Todo List ارائه می‌کنیم که تمام مفاهیم کلیدی آموزش Vue.js را به کار می‌گیرد.

کامپوننت TodoItem.vue

<template>
  <li>
    {{ todo.text }}
    <button @click="$emit('remove', todo.id)">حذف</button>
  </li>
</template>

<script>
export default {
  props: {
    todo: Object
  }
};
</script>

کامپوننت TodoApp.vue

<template>
  <div>
    <h1>لیست کارها</h1>
    <input v-model="newTodo" placeholder="کار جدید..." @keyup.enter="addTodo"/>
    <ul>
      <TodoItem
        v-for="item in todos"
        :key="item.id"
        :todo="item"
        @remove="removeTodo"
      />
    </ul>
  </div>
</template>

<script>
import TodoItem from './TodoItem.vue';
import { nanoid } from 'nanoid';

export default {
  components: { TodoItem },
  data() {
    return {
      newTodo: '',
      todos: []
    };
  },
  methods: {
    addTodo() {
      if (this.newTodo.trim() === '') return;
      this.todos.push({ id: nanoid(), text: this.newTodo });
      this.newTodo = '';
    },
    removeTodo(id) {
      this.todos = this.todos.filter(t => t.id !== id);
    }
  }
};
</script>

۷. نکات پیشرفته برای تسلط بیشتر

استفاده از ترکیب API (Composition API) برای سازماندهی بهتر کدها.
به‌کارگیری TypeScript در پروژه‌های بزرگ.
بهینه‌سازی بارگذاری با Lazy Loading برای کامپوننت‌ها.
استفاده از ابزارهای تست مانند Jest و Cypress.

نتیجه‌گیری

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

آموزش vue js