برنامه‌های Vue

ساخت، استقرار و اجرای یک برنامه Vue

در این راهنما نحوه‌ی اجرای یک برنامه Vue را در فینگ یاد خواهیم گرفت.

برنامه hello-vue

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

• ایجاد برنامه به وسیله‌ی دستور npm init vue:

$ npm init vue@latest hello-vue

بعد از ایجاد برنامه، دستور npm install را وارد می‌کنیم تا وابستگی‌ها و تنظیمات اولیه نصب شوند:

// package.json
{
  "name": "hello-vue",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview --port 5050"
  },
  "dependencies": {
    "vue": "^3.2.33"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^2.3.1",
    "vite": "^2.9.5"
  }
}

• ‌ایجاد برنامه به وسیله‌ی vue/cli:

ایجاد برنامه به وسیله‌ی Vue CLI یک سیستم کامل برای توسعه برنامه Vue.js را در اختیار ما قرار می‌دهد.

برای این منظور ابتدا Vue CLI را با یکی از دستور‌های زیر نصب می‌کنیم:

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

بعد از نصب vue/cli، با دستور زیر یک پروژه‌ی ویو ایجاد می‌کنیم:

$ vue create hello-vue

اجرای برنامه

اجرای برنامه‌ی ویو بستگی به نوع ایجاد پروژه‌ی ما دارد.

یا با دستور npm run dev آن را اجرا می‌کنیم:

$ npm run dev

> hello-vue@0.0.0 dev
> vite

  vite v2.9.9 dev server running at:

  > Local: http://localhost:3000/
  > Network: # use `--host` to expose

  ready in 674ms.

و یا با دستور yarn serve اقدام به اجرای برنامه‌ی خود می‌کنیم:

$ yarn serve
yarn run v1.22.17
# $ vue-cli-service serve
 INFO  Starting development server...

 DONE  Compiled successfully in 4481ms                                                                                              12:57:55 PM

  App running at:
  - Local:   http://localhost:8080/ 
  - Network: http://192.168.1.6:8080/

اکنون http://localhost:3000 و یا http://localhost:8080 را در مرورگر خود باز کرده تا مطمئن شویم برنامه vue ما به درستی کار می‌کند.

• بعداز اجرای موفقیت آمیز برنامه، اکنون می‌توانیم آن را جهت استقرار بر روی سرویس ابری فینگ آماده کنیم.

استقرار برنامه vue در فینگ

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

ایجاد فایل fing.yaml

در ریشه اصلی پروژه خود، فایلی را با نام fing.yaml ایجاد می‌کنیم و اطلاعات پایه‌ای برنامه‌ی خود را در آن قرار می‌دهیم. که می‌توان نام برنامه، پلتفرمی که از آن استفاده می‌کنیم و همچنین پورتی که برنامه‌ی ما بر روی آن listen می‌کند را مشخص کنیم.

# fing.yaml
app: "hello-vue"
platform: "vue"
port: 80

نصب فینگ cli و ورود به آن

برنامه‌ی vue ما آماده‌ی استقرار بر روی سکوی ابری فینگ می‌باشد و این بدین معناست که ما برای مدیریت برنامه‌های خود به فینگ cli نیاز داریم. اگر هنوز آن را نصب نکرده‌اید به راهنمای نصب ما بروید و بعد از نصب، وارد حساب خود شوید.

دستور استقرار

بعد از ورود به حساب خود در فینگ CLI، در مسیر اصلی پروژه‌ی خود دستور زیر را وارد می‌کنیم تا اولین استقرار انجام شود:

$ fing up

مشاهده خروجی

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

زیر دامنه‌ی ما به این صورت خواهد بود: https://hello-vue.onfing.ir