درک بهتر فایل‌های Vue

در قسمت قبل با محیط Vue CLI آشنا شدیم و قسمت هایی از ساختار پوشه ها را بررسی کردیم اما فایلی به نام App.vue وجود دارد که هنوز بررسی نشده است. اگر یادتان باشد در قسمت های قبلی چندین بار به single file template اشاره کرده ام. این قابلیت به ما اجازه می داد کدهای خود را در فایل های مختلفی بنویسیم و سپس این فایل ها را کامپایل می کردیم و کدها به کدهای جاوا اسکریپت عادی تبدیل می شد. مهم ترین مزیت های این روش این بود که اولا نیازی به حضور کامپایلر نداشتیم بنابراین می توانستیم آن را حذف کنیم (کاهش حجم 30 درصدی)، دوما قابلیت های مختلف دیگری که در حالت های دیگر در دسترس ما نیست با single file template به ما داده می شود.

بی مقدمه به سراغ پوشه src می رویم. ابتدا فایل main.js را داریم. ما در این فایل یک شیء Vue جدید ساخته ایم:

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

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

در کد بالا el را مشاهده می کنید اما این el فقط محل بارگذاری برنامه ما را مشخص می کند نه اینکه بخواهیم قالب برنامه خود را درون آن بنویسیم. به جای این کار خصوصیت جدیدی را داریم که render نام دارد و کدهای جدید نوشته شده توسط ما را در محل مشخص شده توسط el بارگذاری می کند. در ضمن همانطور که مشخص است App.vue از درون تابع مشخص شده در render قرار می گیرد بنابراین نهایتا فایل App.vue است که در مرورگر بارگذاری می شود. حالا وارد فایل App.vue می شویم:

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <ul>
      <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
      <li><a href="https://chat.vuejs.org" target="_blank">Community Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
      <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
      <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
    </ul>
  </div>
</template>

این کد دقیقا همان کدی است که در صفحه اصلی سرور دیده بودیم. یادتان باشد که فایل های vue. همیشه ساختار بالا را دارند: در ابتدا یک تگ <template> داریم و سپس کدهای HTML ما درون آن نوشته می شوند.

همچنین در همین فایل پس از این قسمت کدهای جاوا اسکریپت را در یک تگ <script> خواهیم داشت:

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

این قسمت، کدهای Vue همین فایل را دارد. کدهایی که در این قسمت نوشته می شوند هیچ ارتباطی با کدهای فایل های دیگر ندارند. بعدا در مورد این قسمت توضیح خواهم داد. در نهایت نیز تگ های style را برای استایل های CSS خواهیم داشت:

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>

ما می توانیم هیچ استایلی ننویسیم اما حتما باید <template> را داشته باشیم تا چیزی به کاربر نمایش داده شود. من کل قسمت درون <template> را حذف کرده و به جایش یک تگ h1 قرار می دهم، سپس name و data را نیز از قسمت script و کل styles را حذف می کنیم:

<template>
    <h1>Hello World</h1>
</template>

<script>
export default {

}
</script>

<style>

</style>

من در ادامه توضیح خواهم داد که Data و دیگر موارد حذف شده چه کاری انجام می دهند. فعلا می خواهم به شما بگویم که اگر کدها را به این شکل دشته باشید (و حتی اگر export default را نیز حذف کنید)، باز هم به کاربر نمایش داده خواهد شد. ما نیازی به script و style نداریم و تا زمانی که Template را داشته باشیم (چیزی برای نمایش به کاربران داشته باشیم) می توانیم کدها را کامپایل کنیم. حالا اگر کدها را ذخیره کرده و دستور npm run dev را اجرا نمایید (اگر از قبل در حال اجرا است نیازی به اجرای دوباره نیست)، همه چیز بدون خطا کامپایل می شود و اگر به آدرس localhost:8080 برویم فقط یک تگ h1 را می بینیم که به ما می گوید Hello World.

حالا Vue به فایل index.html نگاه می کند و هر چیزی که درون div با آیدی app باشد را پاک کرده و محتویات فایل App.vue را جایگزین آن می کند. نکته مهم اینجاست که بدانید شیء داخل script که Export شده است دقیقا همان شیء Vue است که قبلا با آن کار کرده ایم بنابراین می توانیم data یا methods و انواع خصوصیات را در آن داشته باشیم.

نکته نهایی در این قسمت این است که ما دو اسکریپت جداگانه npm برای کار با فایل هایمان داریم:

• دستور npm run dev: این دستور برنامه ما را در مموری کامپایل می کند و سپس روی سرور مجازی قرار می دهد. کامپایل شدن برنامه در مموری یعنی هیچ فایلی ایجاد نمی شود و کدهای ما درون خود مموری اجرا خواهند شد بنابراین هیچ تغییری در پوشه src نخواهیم داشت. معمولا از این دستور در هنگام کدنویسی و توسعه سایت استفاده می کنیم.
• دستور npm run build: اگر با webpack کار کرده باشید می دانید که این دستور کدهای ما را بهینه سازی کرده (اعمالی مثل minify سازی و غیره) و کدهای نهایی ما را به صورت کامپایل شده در پوشه dist تحویل می دهد. این دستور برای حالت production مناسب است؛ یعنی زمانی که تمام کدنویسی را انجام داده ایم و حالا می خواهیم کدهای نهایی پروژه را در پوشه dist دریافت کنیم.

از جلسه آینده شروع به کدنویسی کرده و به سراغ کامپوننت ها می رویم.