آموزش Vue.js: ایجاد نخستین اپلیکیشن با Vue CLI — بخش دوم

۲۱۲ بازدید
آخرین به‌روزرسانی: ۱۴ شهریور ۱۴۰۲
زمان مطالعه: ۸ دقیقه
آموزش Vue.js: ایجاد نخستین اپلیکیشن با Vue CLI — بخش دوم

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

مثال اول: نخستین اپلیکیشن

ابتدا از یک مثال ساده برای ساخت اپلیکیشن Vue آغاز می‌کنیم.

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

1<html>
2  <body>
3    <div id="example">
4      <p>{{ hello }}</p>
5    </div>
6    <script src="https://unpkg.com/vue"></script>
7    <script>
8        new Vue({
9            el: '#example',
10            data: { hello: 'Hello World!' }
11        })
12    </script>
13  </body>
14</html>

این فایل را در مرورگر باز کنید. این نخستین اپلیکیشن Vue است. این صفحه پیام «Hello World!» را نمایش می‌دهد.

این تگ‌های اسکریپت را در انتهای بدنه طوری قرار می‌دهیم که به ترتیب پس از بارگذاری DOM اجرا شوند.

کاری که این کد انجام می‌دهد این است که وهله جدیدی از اپلیکیشن Vue می‌سازد و آن را به عنصر #example به عنوان قالبش متصل می‌سازد. این وهله به طور معمول با استفاده از یک سلکتور CSS تعریف می‌شود، اما می‌توان یک HTMLElement نیز ارسال کرد.

سپس این قالب را به شیء data اتصال می‌دهد. این یک شیء خاص است که میزبان داده‌های Vue برای رندر است.

در این قالب تگ خاص {{ }} نشان می‌دهد که بخشی از قالب است که حالت دینامیک دارد و محتوای آن باید در داده‌های اپلیکیشن Vue بررسی شود. برای ملاحظه این مثال به این صفحه (+) مراجعه کنید.

البته طرز کار CodePen کمی از HTML متفاوت است و باید آن را طوری پیکربندی کنید که به محل کتابخانه Vue در تنظیمات Pen اشاره کند:

Vue CLI

مثال دوم: اپلیکیشن پیش‌فرض Vue CLI

در این بخش کمی سطح کار را ارتقا می‌دهیم. اپلیکیشن بعدی ما یک اپلیکیشن از قبل ساخته شده و در واقع اپ پیش‌فرض Vue CLI است.

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

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

استفاده محلی از Vue CLI

در روش اول باید Vue CLI را روی رایانه خود نصب کرده و دستور زیر را اجرا کنید:

1vue create <enter the app name>

استفاده از CodeSandbox

یک روش ساده‌تر که نیاز به نصب هیچ چیز ندارد مراجعه به وب‌سایت CodeSandbox (+) است. این صفحه اپلیکیشن پیش‌فرض Vue CLI را باز می‌کند.

CodeSandbox یک ادیتور کد جالب است که امکان ساخت اپلیکیشن را در کلود فراهم می‌سازد. بدین ترتیب می‌توانید از همه پکیج‌های npm استفاده کنید و می‌توانید به سادگی با Zeit Now (+) ادغام کنید تا فرایند توسعه تسهیل شود. همچنین استفاده از گیت‌هاب به مدیریت نسخه‌بندی نرم‌افزار کمک می‌کند.

چه بخواهید از Vue CLI به صورت محلی استفاده کنید و چه از CodeSandbox استفاده کنید، در ادامه به بررسی جزییات اپلیکیشن Vue می‌پردازیم.

ساختار فایل

در کنار فایل package.json که شامل پیکربندی پروژه است فایل‌های زیر نیز شامل ساختار ابتدایی پروژه هستند:

  • index.html
  • src/App.vue
  • src/main.js
  • src/assets/logo.png
  • src/components/HelloWorld.vue

فایل index.html

فایل index.html فایل اصلی اپلیکیشن ما است. این فایل در بدنه خود شامل یک عنصر ساده به صورت زیر است:

1<div id="app"></div>

این همان عنصری است که اپلیکیشن Vue را به DOM متصل می‌کند:

1<!DOCTYPE html>
2<html>
3
4<head>
5  <meta charset="utf-8">
6  <meta name="viewport" content="width=device-width,initial-scale=1.0">
7  <title>CodeSandbox Vue</title>
8</head>
9
10<body>
11  <div id="app"></div>
12  <!-- built files will be auto injected -->
13</body>
14
15</html>

فایل src/main.js

این همان فایل اصلی جاوا اسکریپت است که اپلیکیشن ما را اجرا می‌کند. ابتدا کتابخانه Vue و کامپوننت App را از App.vue ایمپورت می‌کنیم. ما productionTip را روی false تنظیم می‌کنیم تا Vue را از ارائه نکته «you’re in development mode» در خروجی بازداریم. سپس یک وهله از Vue می‌سازیم و با انتساب آن به عنصر DOM که به وسیله app# شناسایی می‌شود و در index.html تعریف شده است به اپلیکیشن می‌گوییم که از کامپوننت از App استفاده کند.

1// The Vue build version to load with the `import` command
2// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
3import Vue from 'vue'
4import App from './App'
5
6Vue.config.productionTip = false
7
8/* eslint-disable no-new */
9new Vue({
10  el: '#app',
11  components: { App },
12  template: '<App/>'
13})

فایل src/App.vue

App.vue یک کامپوننت فایل منفرد است. این کامپوننت شامل سه دسته کد به صورت HTML ،CSS و جاوا اسکریپت است. این وضعیت شاید در ابتدا عجیب به نظر برسد، اما «کامپوننت‌های فایل منفرد» (Single File Components) روشی عالی برای ایجاد کامپوننت‌های خودکفایی هستند که همه موارد مورد نیاز را در یک فایل واحد گرد هم می‌آورند.

بدین ترتیب ما در حال حاضر فایل‌های markup، جاوا اسکریپتی که قرار است با آن تعامل پیدا کند و استایلی که روی آن اعمال می‌شود را در اختیار داریم که می‌تواند دارای دامنه باشد یا نباشد. در این مورد کد ما دارای دامنه‌بندی نیست و صرفاً آن CSS را که مانند CSS معمولی روی صفحه اعمال می‌شود در خروجی ارائه می‌کند.

بخش جالب ماجرا در تگ script قرار دارد. ما یک کامپوننت را از فایل components/HelloWorld.vue که در ادامه توضیح خواهیم داد ایمپورت می‌کنیم. این کامپوننت قرار است در کامپوننت ما مورد ارجاع قرار گیرد و یک وابستگی است. می‌خواهیم کد زیر را در خرجی ارائه کنیم:

1<div id="app">
2  <img width="25%" src="./assets/logo.png">
3  <HelloWorld/>
4</div>

در این کامپوننت چنان که می‌بینید ارجاعی به کامپوننت HelloWorld صورت گرفته است. Vue به صورت خودکار این کامپوننت را درون این مکان آماده قرار می‌دهد.

1<template>
2  <div id="app">
3    <img width="25%" src="./assets/logo.png">
4    <HelloWorld/>
5  </div>
6</template>
7
8<script>
9import HelloWorld from './components/HelloWorld'
10
11export default {
12  name: 'App',
13  components: {
14    HelloWorld
15  }
16}
17</script>
18
19<style>
20#app {
21  font-family: 'Avenir', Helvetica, Arial, sans-serif;
22  -webkit-font-smoothing: antialiased;
23  -moz-osx-font-smoothing: grayscale;
24  text-align: center;
25  color: #2c3e50;
26  margin-top: 60px;
27}
28</style>

فایل src/components/HelloWorld.vue

این همان کامپوننت HelloWorld است که توسط کامپوننت App گنجانده شده است. این کامپوننت یک مجموعه از لینک‌ها را همراه با یک پیام در خروجی ارائه می‌کند.

به خاطر داشته باشید که ما در بخش قبل در مورد CSS در App.vue صحبت کردیم که دامنه‌بندی نشده است. کامپوننت HelloWorld دارای CSS دامنه‌بندی شده است. این مسئله را می‌توان به سادگی با بررسی تگ style متوجه شد. اگر دارای خصوصیت scoped باشد، یعنی دامنه‌بندی شده است:

1<style scoped>

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

پیامی که کامپوننت در خروجی ارائه می‌کند در مشخصه data وهله Vue ذخیره می‌شود و در قالب به صورت {{ msg }} عرضه می‌شود. هر چیزی که در data ذخیره شود به صورت مستقیم در قالب از طریق نام خودش قابل دسترسی خواهد بود. ما نیازی نداریم که به این منظور از data.msg استفاده کنیم و کافی است به msg اشاره کنیم:

1<template>
2  <div class="hello">
3    <h1>{{ msg }}</h1>
4    <h2>Essential Links</h2>
5    <ul>
6      <li>
7        <a
8          href="https://vuejs.org"
9          target="_blank"
10        >
11          Core Docs
12        </a>
13      </li>
14      <li>
15        <a
16          href="https://forum.vuejs.org"
17          target="_blank"
18        >
19          Forum
20        </a>
21      </li>
22      <li>
23        <a
24          href="https://chat.vuejs.org"
25          target="_blank"
26        >
27          Community Chat
28        </a>
29      </li>
30      <li>
31        <a
32          href="https://twitter.com/vuejs"
33          target="_blank"
34        >
35          Twitter
36        </a>
37      </li>
38      <br>
39      <li>
40        <a
41          href="http://vuejs-templates.github.io/webpack/"
42          target="_blank"
43        >
44          Docs for This Template
45        </a>
46      </li>
47    </ul>
48    <h2>Ecosystem</h2>
49    <ul>
50      <li>
51        <a
52          href="http://router.vuejs.org/"
53          target="_blank"
54        >
55          vue-router
56        </a>
57      </li>
58      <li>
59        <a
60          href="http://vuex.vuejs.org/"
61          target="_blank"
62        >
63          vuex
64        </a>
65      </li>
66      <li>
67        <a
68          href="http://vue-loader.vuejs.org/"
69          target="_blank"
70        >
71          vue-loader
72        </a>
73      </li>
74      <li>
75        <a
76          href="https://github.com/vuejs/awesome-vue"
77          target="_blank"
78        >
79          awesome-vue
80        </a>
81      </li>
82    </ul>
83  </div>
84</template>
85
86<script>
87export default {
88  name: 'HelloWorld',
89  data() {
90    return {
91      msg: 'Welcome to Your Vue.js App'
92    }
93  }
94}
95</script>
96
97<!-- Add "scoped" attribute to limit CSS to this component only -->
98<style scoped>
99h1,
100h2 {
101  font-weight: normal;
102}
103ul {
104  list-style-type: none;
105  padding: 0;
106}
107li {
108  display: inline-block;
109  margin: 0 10px;
110}
111a {
112  color: #42b983;
113}
114</style>

اجرای اپلیکیشن

CodeSandbox یک کارکرد جالب پیش‌نمایش دارد. بدین ترتیب می‌توان اپلیکیشن را اجرا کرد و هر چیزی را در کد منبع ویرایش کرد تا به صورت بی‌درنگ در پیش‌نمایش اعمال شود.

Vue CLI

Vue CLI

CodeSandbox برای کدنویسی آنلاین و کار بدون نیاز به راه‌اندازی محلی Vue کاملاً مناسب است. یک روش عالی برای کار محلی، راه‌اندازی Vue CLI (رابط خط فرمان) است. در ادامه در این مورد بیشتر توضیح می‌دهیم.

در مثال قبلی یک نمونه کد بر مبنای Vue CLI معرفی کردیم. همچنین توضیح دادیم که Vue CLI چیست و چگونه در اکوسیستم Vue CLI جای می‌گیرد. اینک به بررسی شیوه راه‌اندازی یک پروژه محلی مبتنی بر Vue CLI می‌پردازیم.

نکته: هم اینک تیم توسعه Vue در زمان ارتقا از نسخه 2 به 3 در حال ایجاد تغییرات بزرگی روی Vue CLI است. با این که نسخه 3 هنوز نسخه پایداری نیست، اما ما به توضیح نسخه 3 می‌پردازیم، زیرا نسبت به نسخه 2 بهبود عظیمی را موجب شده است و کاملاً متفاوت است.

نصب

Vue CLI یک ابزار خط فرمان است و می‌توان آن را با استفاده از npm به صورت سراسری نصب کرد:

1npm install -g @vue/cli

همچنین می‌توان از Yarn استفاده کرد:

1yarn global add @vue/cli

زمانی که این کار را انجام دادید، می‌توانید دستور vue را اجرا کنید.

Vue CLI

Vue CLI چه چیزی ارائه می‌کند؟

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

این ابزار انعطاف‌پذیری است. زمانی که یک پروژه را با CLI ایجاد کنید، می‌توانید در ادامه پیکربندی را بدون نیاز به eject کردن اپلیکیشن دستکاری کنید. این وضعیت شبیه کاری است که در create-react-app انجام می‌دهیم. زمانی که در create-react-app اقدام به reject بکنید، می‌توانید هر آن چه که می‌خواهید را به دستکاری و به‌روزرسانی کنید، اما نمی‌توانید روی قابلیت‌های جالبی که create-react-app ارائه می‌کند حساب کنید.

بدین ترتیب می‌توانید همه چیز را پیکربندی کنید و همچنان امکان به‌روزرسانی آسان همه چیز را دارید. پس از این که اپلیکیشن را ایجاد و پیکربندی کردید به عنوان یک ابزار وابستگی زمان اجرا عمل می‌کند که بر مبنای Webpack ساخته شده است. نخستین مواجهه ما با CLI زمانی است که یک پروژه جدید Vue می‌سازیم.

شیوه استفاده از CLI برای ایجاد یک پروژه جدید Vue

نخستین چیزی که قرار است با CLI انجام دهیم ساخت یک اپلیکیشن Vue است:

1vue create example

نکته جالب این است که این یک فرایند تعاملی است. شما باید یک preset انتخاب کنید. به صورت پیش‌فرض یک preset وجود دارد که ادغام Babel و ESLint ارائه می‌کند:

Vue CLI

در این بخش کلید فلش جهت پایین را روی کیبورد فشار می‌دهیم و قابلیت‌هایی که می‌خواهیم را انتخاب کنیم:

Vue CLI

با فشردن کلید space می‌توان یکی از چیزهایی که لازم است را انتخاب کرد و سپس با زدن اینتر به ادامه کار پرداخت. از آنجا که گزینه Linter / Formatter را انتخاب کرده‌ایم، CLI به ما هشدار می‌دهد که باید آن را پیکربندی کنیم. ما گزینه ESLint + Prettier را نیز انتخاب می‌کنیم، زیرا تنظیمات خوبی است:

Vue CLI

چیز دیگری که انتخاب می‌کنیم شیوه اعمال linting است. به این منظور گزینه Lint on save را انتخاب می‌کنیم.

Vue CLI

سپس نوبت به تست کردن می‌رسد. Vue CLI امکان انتخاب بین دو راه‌حل تست unit محبوب یعنی Mocha + Chai و Jest را می‌دهد.

Vue CLI

Vue CLI از ما می‌پرسد که همه این پیکربندی‌ها را کجا قرار دهیم. ما می‌توانیم پیکربندی را در فایل package.json یا در فایل‌های پیکربندی اختصاصی برای هر کدام از ابزارها ذخیره کنیم. انتخاب ما گزینه دوم بوده است.

Vue CLI

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

Vue CLI

در این مرحله Vue CLI سؤال می‌کند استفاده از Yarn یا NPM را ترجیح می‌دهیم:

Vue CLI

این آخرین سؤال Vue CLI محسوب می‌شود و سپس به دانلود وابستگی‌ها برای ایجاد اپلیکیشن Vue اقدام می‌کند.

Vue CLI

شیوه آغاز اپلیکیشن Vue CLI اخیراً ایجاد شده

اکنون Vue CLI اپلیکیشن را برای ما ساخته است، می‌توانیم به پوشه example برویم و با اجرای دستور زیر نخستین اپلیکیشن را در حالت توسعه بسازیم:

yarn serve

Vue CLI

سورس اپلیکیشن نمونه آغازین شامل چند فایل است که package.json را نیز در خود دارد:

Vue CLI

این همان جایی است که دستورهای CLI از جمله yarn serve که کمی قبل‌تر استفاده کردیم، تعریف شده‌اند. دستورهای دیگر شامل موارد زیر هستند:

  • yarn build برای آغاز ساخت یک اپلیکیشن
  • yarn lint برای اجرای linter
  • yarn test:unit برای اجرای تست‌های واحد

بدین ترتیب به پایان این بخش از راهنمای جامع Vue.js می‌رسیم. در بخش بعدی به توضیح اپلیکیشن‌های ساده ایجاد شده توسط Vue CLI می‌پردازیم.

برای مطالعه بخش بعدی این مجموعه مطلب آموزشی روی لینک زیر کلیک کنید:

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

==

بر اساس رای ۸ نفر
آیا این مطلب برای شما مفید بود؟
اگر بازخوردی درباره این مطلب دارید یا پرسشی دارید که بدون پاسخ مانده است، آن را از طریق بخش نظرات مطرح کنید.
منابع:
freecodecamp
نظر شما چیست؟

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *