فصل جدید، پروژه‌ی نهایی دوره

به فصل جدید دوره آموزشی Vue.js خوش آمدید. در این فصل می خواهیم برخی از ویژگی هایی را که در فصل های قبل یاد گرفته ایم، در یک پروژه پیاده سازی کنیم. این پروژه یک وب سایت ساده خرید و فروش سهام است که ظاهر زیر را دارد:

ما نام این وب سایت را stock trader گذاشته ایم و می خواهیم در آن خرید و فروش سهام را داشته باشیم. در لینک دوم portfolio را داریم که سهام های خریداری شده توسط ما را نشان می دهد. لینک سوم stocks است که تمام سهام های موجود برای خرید را در آن خواهیم دید. همچنین در سمت راست End Day را داریم که با کلیک روی آن به روز بعد می رویم. طبیعتا با رفتن به روز بعد ممکن است سهام یا سقوط کند یا اینکه ارزش هر سهم بیشتر شود. در قسمت بعد save & load را داریم. این قابلیت به ما اجازه می دهد که یک روز خاص را ذخیره (Save) کنیم تا اگر در روز بعد سهام ما به شدت سقوط کرد، بتوانیم روز قبلی را load (بارگذاری) کنیم و پول خود را از دست ندهیم. در نهایت funds را داریم که سرمایه ما را نشان می دهد. برای شروع این پروژه یک فایل آماده را در اختیار شما می گذارم که باید آن را از این لینک دانلود نمایید.

با نگاه به این برنامه می توان حدس زد که یک کامپوننت جداگانه را برای header می خواهیم که لینک navigation ما است. سپس سه route جداگانه را داریم:

• صفحه اصلی یا Home Page که تصویر آن را در بالا می بینید.
• صفحه خرید سهام یا Stocks
• صفحه سهام های خریداری شده توسط ما یا Portfolio

بنابراین حداقل به چهار کامپوننت اصلی نیاز خواهیم داشت. همچنین احتمالا برای هر کدام از سهام ها یک کامپوننت دیگر نیاز داشته باشیم و زمانی که نوبت به کدنویسی آن ها رسید، فکری به حالشان می کنیم.

در قدم اول از پروژه ای که به شما دادم وارد پوشه src شده و پوشه جدیدی به نام components را ایجاد کنید. در این پوشه نیز به فایل های Home.vue و Header.vue نیاز داریم. سپس در همین پوشه components دو پوشه دیگر به نام های portfolio و stock ایجاد کنید. در پوشه portfolio یک فایل به نام Portfolio.vue و فایلی دیگر به نام Stocks.vue ایجاد می کنم. سپس در پوشه stocks دو فایل به نام های Stocks.vue و Stock.vue ایجاد می کنم.

در مرحله بعد به تک تک فایل ها می رویم و برایشان Tamplate و سپس یک تگ h1 می گذاریم تا زمانی که routing را اعمال کردیم، بدانیم آیا کامپوننت های ما بارگذاری شده اند یا خیر. من این کار را به شکل زیر انجام می دهم.

در فایل Home.vue می گویم:

<template>
  <h1>The Home Component</h1>
</template>

در فایل Header.vue می گوییم:

<template>
  <h1>The Header Component</h1>
</template>

در فایل Stocks.vue در پوشه stocks می گوییم:

<template>
  <h1>The Stocks Component</h1>
</template>

در فایل Stock.vue در پوشه stocks می گوییم:

<template>
  <h1>The Stocks - Stock Component</h1>
</template>

در فایل Portfolio.vue می گوییم:

<template>
  <h1>The Portfolio Component</h1>
</template>

در فایل Stock.vue در پوشه portfolio می گوییم:

<template>
  <h1>The Portfolio - stock Component</h1>
</template>

حالا که کامپوننت ها را آماده کرده ایم باید routing را پیاده سازی کنیم. برای شروع باید در پوشه Src فایل جدیدی به نام routes.js را می سازیم. برای اینکه route های خود را تعریف کنیم باید پکیج vue-router را داشته باشیم. برای نصب این پکیج نیز باید دستور زیر را در ترمینال اجرا کنید:

npm install --save vue-router

سپس به فایل main.js می رویم و VueRouter را در آن import می کنیم. سپس مثل همیشه از Vue.use استفاده می کنیم تا به Vue بگوییم که باید از این پکیج استفاده کند:

import Vue from 'vue'
import VueRouter from "vue-router";

import App from './App.vue'

Vue.use(VueRouter);

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

حالا به فایل routes.js برمی گردیم تا route های خود را تعریف کنیم. حتما می دانید که route ها چیزی به جز آرایه ای از اشیاء نیستند:

export const routes = [

];

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

import Home from "./components/Home.vue";
import Portfolio from "./components/Portfolio/Portfolio.vue";
import Stocks from "./components/Stocks/Stocks.vue";

export const routes = [
    { path: '/', component: Home },
    { path: '/portfolio', component: Portfolio },
    { path: '/stocks', component: Stocks }
];

در مرحله بعد به main.js برمی گردیم و route های خودمان را در آن import می کنیم:

import Vue from 'vue'
import VueRouter from "vue-router";

import App from './App.vue'
import { routes } from "./routes";

سپس router خودمان را تعریف می کنیم:

import { routes } from "./routes";

Vue.use(VueRouter);

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

نکته اول اینجاست که حتما باید قبل از تعریف router، از Vue.use استفاده کرده باشید تا پکیج router فعال شود، سپس مثل همیشه router خود را تعریف کرده ایم. من mode را روی history گذاشته ام تا # را در URL نبینیم و همچنین routes را به آن داده ام که حالت خلاصه ES6 است (به جای routes: routes). در آخرین مرحله نیز باید router را به شیء سراسری Vue پاس بدهیم:

Vue.use(VueRouter);

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

new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

در اینجا هم به جای اینکه از router: router استفاده کنم از حالت خلاصه ES6 استفاده کرده ام.

حالا که router ما راه اندازی شده است باید به App.vue رفته و اولین router-view خود را در آن تعریف کنیم:

<template>
  <div class="container">
    <router-view></router-view>
  </div>
</template>

حالا مطمئن شوید که سرور Webpack در حال اجرا است. اگر در حال اجرا نیست دستور زیر را مثل همیشه اجرا کنید:

npm run dev

بعد از اجرای این دستور، پنجره مرورگر برایتان باز می شود و در صفحه اصلی (کامپوننت Home) هستید. اگر عبارت The Home Component را به صورت تگ h1 دیدید، یعنی همه چیز مرتب است!

coreldraw lizenz kaufen