اولین صفحه SFC (First SFC Page)
می خواهیم «اولین SFC» را از صفر بسازیم. SFC یعنی «کامپوننت تک فایل (Single File Component)». این فایل سه بخش دارد: template، script و style. سپس نتیجه را در مرورگر می بینیم و تغییرات را سریع می گیریم.
ساخت پروژه تمیز
محتوای نمونه را پاک کن. در App.vue هر سه بخش را خالی کن. ویژگی های اضافی مثل setup و scoped را بردار. پوشه های assets و components را حذف کن.
<script><\/script>
<template><\/template>
<style><\/style>
در main.js خط های import اضافی را حذف کن تا فقط اپ سوار شود.
import { createApp } from 'vue';
import App from './App.vue';
createApp(App).mount('#app');
نوشتن کد در App.vue
یک هدر ساده داخل <template> بگذار. سپس فایل را ذخیره کن. مرورگر در حالت توسعه خودکار به روزرسانی می شود.
<template>
<h1>Hello World!<\/h1>
<\/template>
<script><\/script>
<style><\/style>
نمونه کمی بزرگ تر
متغیر (Variable) یعنی جعبه نگهداری داده. پیام را از data می گیریم و در صفحه نشان می دهیم.
<template>
<h1>{{ message }}<\/h1>
<\/template>
<script>
export default {
data() {
return {
message: 'This is some text';
};
}
};
<\/script>
<style><\/style>
نکته: export default اجازه می دهد main.js فایل را import کند و روی div#app سوار کند.
گام های عملی سریع
- App.vue را خالی و مرتب کن.
- main.js را ساده نگه دار و mount کن.
- یک تیتر ساده بساز و ذخیره کن.
- به مرورگر برو و نتیجه را ببین.
جمع بندی سریع
- اولین SFC سه بخش اصلی دارد.
- نمونه ها در مرورگر سریع تازه می شوند.
- data پیام را به template می دهد.
- export default برای import لازم است.
برای ادامه مسیر به صفحه کامپوننت ها برو. همچنین مرور «چرا، چگونه و راه اندازی» را در Why/How/Setup ببین. صفحه اولین SFC مرجع شروع سریع تو است.