سلام دوستان. توی این پست می‌خوایم با Vue CLI خیلی ساده یک برنامه SPA یا Single Page Application بسازیم.

 

۱. نصب Vue CLI

ابتدا باید Vue CLI رو سیستم ما نصب باشه. اگه نصب ندارین دستور زیر رو وارد کنین:

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

نکته‌: برای نصب روی بعضی از سیستم‌ها نیاز به دسترسی sudo و Administrator هست. برای اینکه مطمئن بشیم نصب شده از دستور زیر استفاده می‌کنیم:

vue --version

که باید ورژن Vue CLI رو به ما برگردونه.

 

۲. ساخت برنامه

بعد از نصب نوبت به ساختن برنامه هست. با دستور زیر توی خط فرمان برنامه‌مون رو می‌سازیم:

vue create ditty

ditty اسم برنامه‌ی ما هست. با enter زدن دستور بالا یک پیام میاد با عنوان Please pick a preset که دوباره یک enter می‌زنیم تا تنظیمات پیشفرض برای ما ساخته بشه. بعد از چند لحظه یک پوشه به اسم ditty ساخته میشه که شامل برنامه‌ی ما هست:

تمام کدهایی که می‌نویسیم توی پوشه src قرار می‌گیرن. دستور زیر رو وارد می‌کنیم تا وارد این پوشه بشیم:

cd ditty

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

npm run serve

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

اگه این صفحه رو ببینیم یعنی تا اینجا کارها رو درست انجام دادیم. برای ادامه‌ی کار توی ترمینال با کیبرد ctrl+c بزنین.

 

۳. نصب Vue Router

برای اینکه یک برنامه SPA داشته باشیم نیاز به Vue Router داریم. این پکیج رو با دستور زیر نصب می‌کنیم:

npm install vue-router

بعد از نصب فایل src/main.js رو باز می‌کنیم. این فایل شامل کدهای زیر هست:

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

Vue.config.productionTip = false

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

مرحله بعد باید vue-router رو وارد و به برنامه شناسایی کنیم و روت‌هامون رو بسازیم. کد زیر رو جایگزین کدهای فایل main.js کنین تا به توضیحاتش بپردازیم:

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

Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    component: require('./components/Home.vue').default
  },
  {
    path: '/users',
    component: require('./components/Users.vue').default
  }
];

const router = new VueRouter({
  mode: 'history',
  routes: routes
})

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router: router,
  render: h => h(App)
})
  1. خط ۳ پلاگین روتر رو اضافه و توی خط ۵ اون رو به ویوو شناسایی کردیم.
  2. توی خط ۷ یک متغیر ساختیم به اسم routes که توی اون مسیرهای برنامه‌مون رو مشخص می‌کنیم. این متغیر باید آرایه‌ای از آبجکت‌ها باشه. هر آبجکت یک مسیر هست. هر مسیری یک path داره و یک component. وقتی توی مرورگر مسیر path باز شد، کامپوننت مربوط به اون هم باز میشه (هنوز کامپوننت‌ها رو نساختیم).
  3. توی خط ۱۸ یک آبجکت از کلاس VueRouter ساختیم. به این کلاس یک آبجکت پاس دادیم که شامل مسیرهایی هست که مرحله قبل ساختیم و همچنین نوع مسیریابی. در حالت پیشفرض مسیریابی توی آدرس‌بار با # انجام میشه. اگه با # نمی‌خوایم mode رو برابر history قرار می‌دیم.
  4. توی خط ۲۷ آبجکتی که از کلاس VueRouter ساختیم رو به نمونه (Vue Instance) پاس می‌دیم.

 

۴. ساختن کامپوننت‌ها

ما برای دو تا مسیر دو تا کامپوننت مشخص کردیم. باید اول اونها رو توی مسیر src/components بسازیم:

ابتدا فایل Home.vue رو با محتویات زیر می‌سازیم:

<template>
    <p>
        This is 🏠
    </p>
</template>

و بعد فایل Users.vue:

<template>
    <p>
        Welcome darling 💚!
    </p>
</template>

 

۵. اضافه کردن تگ <router-view />

این تگ توسط پکیج روتر به برنامه اضافه شده و مسئول نمایش محتویات کامپوننت‌هایی هست که ساختیم. محتویات فایل src/App.vue رو پاک و کدهای زیر رو بهش اضافه می‌کنیم:

<template>
  <div>
    <nav>
      <router-link to="/">Home </router-link>
      <router-link to="/users">Users</router-link>
    </nav>
    <router-view />
  </div>
</template>

router-view رو توی خط ۷ می‌بینید. یک تگ دیگه وجود داره به اسم router-link توی خط‌های ۴ و ۵. وقتی می‌خوایم یک لینک برای رفتن به یک صفحه دیگه بسازیم از این تگ استفاده می‌کنیم. اینطوری باعث میشه صفحه refresh نشه. این تگ یک attribute می‌گیره به اسم to که توی اون باید مقدار path ـی رو بنویسیم که توی تعریف مسیرها نوشتیم.

 

۶. ساخت فایل vue.config.js

خب این مرحله آخر هست. یک فایل به اسم vue.config.js رو توی مسیر اصلی برنامه می‌سازیم با محتویات زیر:

module.exports = {
    runtimeCompiler: true
}

این فایل شامل تنظیمات برنامه هست که اگه وجود نداشت تنظیمات پیشفرض در نظر گرفته میشه.

 

اجرا کردن برنامه

حالا توی خط فرمان دستور npm run serve رو می‌زنیم تا برنامه‌مون رو ببینیم. اگه چنین چیزی می‌بینید، تبریک! شما اولین SPA رو ساختید 👌💪