آشنایی با اجزای تک فایل Vue.js (SFC)

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

دیده‌ایم که Vue.js می‌تواند به منظور افزودن ویژگی‌های اتمی در سایر برنامه‌ها/صفحات HTML باشد، به عنوان مثال، می‌توان از آن فقط در بخش نوار جستجوی یک وب‌سایت استفاده کرد، درخواست‌های جستجو را ارسال کرد و نتایج را به ازای درج شده نمایش داد. پرس و جوها

اما، مواردی وجود دارد که ما نیاز به ساخت برنامه‌های Vue.js کامل با مجموعه‌ای از ویژگی‌ها مانند مسیریابی، مدیریت وضعیت و غیره داریم. چنین برنامه‌هایی معمولاً شامل نوشتن تعداد زیادی کد Vue.js هستند، و همانطور که انتظار می‌رود در در چنین مواردی، ما فایل‌های بزرگ حاوی کدهای زیادی دریافت می‌کنیم که معمولاً منجر به انواع مشکلات نگهداری کد می‌شود.

برای جلوگیری از این مشکلات قریب‌الوقوع زمان‌بر و مصرف‌کننده منابع، ما معمولاً کد را به قطعات کوچک‌تر قابل مدیریت و وابسته تقسیم می‌کنیم، همانطور که در مؤلفه‌های Vue.js دیده‌ایم.

اما، سناریویی که در اینجا به آن اشاره می‌کنیم فراتر از تجزیه برنامه‌های Vue.js به اجزای کوچک‌تر است، بلکه بیشتر به فایل‌های مستقلی به نام Vue.js Single-File Components (SFCs) می‌رود که به خودی خود Vue.js کاملاً پیشرفته و قابل اتصال هستند. برنامه ها

در اینجا برخی از مزایای استفاده از فایل های Vue.js SFC آورده شده است:

• بهبود تجربه توسعه‌دهندگان، با تشویق به استفاده از ابزارهای ساخت که کارهای سنگین را برای ما انجام می‌دهند و به خودکارسازی کارهایی مانند زیباسازی کد، پرده‌بندی و کوچک‌سازی برای تولید کمک می‌کند تا ساخت بسته‌های استقرار سبک، بهترین شیوه‌ها و غیره را تسهیل کند. به پیش.
• ما به راحتی می‌توانیم از SFCها در برنامه‌های دیگر استفاده کنیم، جایی که می‌خواهیم ویژگی‌های مرتبط را دوباره پیاده‌سازی کنیم و از نوشتن مجدد کد خودداری کنیم.
• ما می‌توانیم کامپوننت‌ها را بسته‌بندی کنیم و پلاگین‌های قابل اشتراک‌گذاری ایجاد کنیم، به‌ویژه زمانی که اصلاح‌ها یا ویژگی‌هایی اضافه می‌شوند و تغییرات را به راحتی در همه برنامه‌هایی که این افزونه‌ها در آن‌ها استفاده می‌شوند، به اشتراک بگذاریم.
• گروه بندی همه کدها (منطق، الگو، و استایل) مربوط به یک تابع واحد در یک فایل واحد، مدیریت برنامه های ما و ویژگی های مستقل آنها را ساده می کند.

فایل های SFC Vue.js دارای یک ویژگی منحصر به فرد هستند .vue پسوند فایل که توسط همه IDE های اصلی، ویرایشگرهای متن و چندین افزونه پشتیبانی می شود که به برجسته کردن کد Vue.js و اعمال هوشمندانه کد روی آن کمک می کند.

کار با Vue.js Single-File Components (SFCs)

برای دیدن نحو و کار با SFCهای Vue.js، ابتدا باید یک پروژه Vue.js را که با ابزاری به نام Vite مدیریت می شود، داربست کنید.

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

قبل از ادامه، مطمئن شوید که آخرین نسخه LTS node.js را در سیستم خود نصب کرده اید.

دستور زیر را در ترمینال اجرا کنید تا یک فهرست پروژه Vue.js جدید ایجاد کنید.

mkdir vue-sfc-app

هنگامی که این دستور خاتمه می یابد، well باید یک فهرست جدید به نام داشته باشد vue-sfc-app. با اجرا کردن، مکان ترمینال فعال را به آن تغییر دهید cd vue-sfc-app.

در داخل فهرست پروژه، اجرا کنید npm init -y تا این دایرکتوری به ریشه یک پروژه جاوا اسکریپت جدید تبدیل شود. این دستور a را اضافه می کند package.json فایل، که به سادگی فایل فراداده یک پروژه است که مانیفستی از وابستگی ها، اسکریپت ها و غیره ما را نگه می دارد. برای مطالعه بیشتر در مورد این فایل، می توانید از اسناد آن دیدن کنید.

تا کنون، این طرح دایرکتوری پروژه خواهد بود:

.
├── package.json

در اینجا چیزی است که در package.json فایل تا کنون

{
  “name”: “vue-sfc-app”,
  “version”: “1.0.0”,
  “description”: “”,
  “main”: “index.js”,
  “scripts”: {
    “test”: “echo \”Error: no test specified\” && exit 1”
  },
  “keywords”: [],
  “author”: “”,
  “license”: “ISC”
}

a اضافه کنید ”type”: “module” ویژگی های این فایل را در نظر داشته باشید و آنچه در آن موجود است را در نظر داشته باشید.

دستورات زیر را در ترمینال اجرا کنید.

npm install vue

npm install -D vite @vitejs/plugin-vue

اولین دستور بسته Vue.js npm را نصب می کند (کد کتابخانه Vue.js را در اختیار ما قرار می دهد). دستور دوم Vite و افزونه آن را برای Vue.js نصب می کند. دو وابستگی اخیر محیط توسعه محلی ما را با وظایفی مانند کامپایل کردن فایل‌های SFC و ارائه برنامه به صورت محلی اداره می‌کنند تا بتوانیم فقط بر روی ساخت برنامه خود تمرکز کنیم.

پس از نصب این دو فایل، باید متوجه یک دایرکتوری جدید شوید: node_modules که به پروژه شما اضافه شده است. اینجا جایی است که کد منبع وابستگی ها ذخیره می شود، ما معمولاً هیچ تغییری در هیچ چیزی در آن ایجاد نمی کنیم.

وقتی برمیگردی به package.json فایل، متوجه تغییراتی خواهید شد، دو بخش جدید dependencies و devDependencies با وابستگی های مربوطه و نسخه های نصب شده آنها اضافه خواهد شد.

  ...
  “devDependencies”: {
    “@vitejs/plugin-vue”: “^[SEMANTIC-VERSION]”,
    “vite”: “^[SEMANTIC-VERSION]”
  },
  “dependencies”: {
    “vue”: “^[SEMANTIC-VERSION]”
  }
  ...

اضافه کردن سه فایل به پروژه ما – index.html، index.js، و vite.config.js. کد زیر را به ترتیب در این فایل ها قرار دهید.

<!-- index.html -->
<html>
    <head>
        <title>Vue SFC App</title>
    </head>
    <body>
        <div id=“app”></div>
        <script type=“module” src=“/index.js”></script>
    </body>
</html>

// index.js
import { createApp } from “vue”;
import App from “./App.vue”

const app = createApp(App).mount(“#app”)

// vite.config.js
import { defineConfig } from “vite”;
import vue from “@vitejs/plugin-vue”;

export default defineConfig({
    plugins: [vue()]
});

در index.js فایل، ما برنامه Vue.js را در قالبی آشنا راه اندازی کرده ایم و یک فایل SFC Vue.js را ارسال کرده ایم – App.vue درون createApp() تابع.

در index.html فایل، ما نشانه گذاری معمولی HTML داریم که کد جاوا اسکریپت را از منبع خارج می کند index.js فایل.

این vite.config.js فایل یک فایل ویژه در پروژه های مدیریت شده با Vite است که در آن پیکربندی ابزار قابل انجام است. کاری که ما در این فایل انجام داده‌ایم این است که فایل افزونه را ارسال می‌کنیم تا Vite بداند وقتی با کد Vue.js و فایل‌های داخل پروژه مواجه می‌شود چه کاری انجام دهد.

ما باید یک اسکریپت داخل آن اضافه کنیم package.json برای روشن کردن سرور محلی با استفاده از دستورات ارائه شده توسط Vite و مشاهده اینکه پروژه ما چگونه به نظر می رسد.

درون scripts بخش از package.json فایل جدید اضافه کنید dev اسکریپت به شرح زیر است.

  “scripts”: {
    “test”: “echo \”Error: no test specified\” && exit 1”,
    “dev”: “vite”
  },

حالا، فرار کن npm run dev --port 3000 در ترمینال این باید یک سرور محلی بر روی راه اندازی کند 3000 پورت اگر اشغال نشده باشد – localhost:3000. سعی کنید از آن در مرورگر بازدید کنید.

اگر خطای زیر را مشاهده کردید، همه چیز طبق برنامه پیش رفت.

در این خطا، Vite به سادگی به ما می گوید که نتوانسته است آن را پیدا کند App.vue فایل SFC، که درست است زیرا ما هرگز آن را ایجاد نکردیم.

پیش بروید و آن را ایجاد کنید. اضافه کردن کد زیر به داخل

<template>
    <div>
        He{{ 1 + ‘1’ }}o World!
    </div>
</template>

Vite بارگذاری مجدد را برای وب سایت ما انجام می دهد و ما باید “He11o World!” را ببینیم. در مرورگر ما

آناتومی یک فایل SFC Vue.js

SFC های Vue.js فقط فایل های HTML بدون آن هستند <head> بخش و با الف <template> بخش جایگزین HTML آشنا <body>.
به طور کلی از 3 بخش تشکیل شده اند، الف <template> جایی که نشانه گذاری UI قرار می گیرد (مانند مثال بالا)، منطق جاوا اسکریپت مؤلفه بین <script> برچسب ها و الف <style> بخشی که در آن استایل های مؤلفه قرار می گیرد.

ما چیزی نزدیک به این نحو را هنگام یادگیری در مورد اجزای Vue.js دیده‌ایم زیرا در زمینه، این همان چیزی است اما در یک فایل مستقل.

بیایید قرار دهیم 1 + ‘1’ در یک متغیر محاسبه شده برای دیدن نحو بخش جاوا اسکریپت جزء.

<script>
export default {
    computed: {
        doubleL() {
            return 1 + ‘1’;
        }
    }
}
</script>

وقتی صفحه به‌روزرسانی می‌شود، هیچ تغییری در صفحه ایجاد نمی‌شود زیرا ما همچنان از همان منطق استفاده می‌کنیم.

بیایید نمونه دیگری را ببینیم.
دکمه زیر را به قالب اضافه کنید.

<button @click=“increment()”>Clicks {{ count }}</button>

و به روز رسانی کنید <script> بخش با اضافه کردن data و methods گزینه ها.

    data() {
        return {
            count: 0
        }
    },
    methods: {
        increment(){
            this.count++
        }
    }

اکنون باید موارد زیر را در صفحه خود مشاهده کنیم.

برای افزودن کمی فاصله بین بلوک‌های HTML، می‌توانیم مقداری استایل به مؤلفه داخل آن اضافه کنیم <style> بخش مانند این

<style scoped>
div, button{
    padding: 5px;
    margin: 5px
}
button{
    color: red;
    font-weight: 800;
}
</style>

و پس از آن صفحه اینگونه خواهد بود.

این scoped ویژگی بر روی <style> تگ بالا به Vue.js دستور می‌دهد تا استایل‌ها را فقط در این مؤلفه اعمال کند و نه در جای دیگر، وقتی قرار نمی‌گیرد، سبک این مؤلفه در زمینه جهانی برنامه اعمال می‌شود.

این <script setup> نحو قند در SFCهای Vue.js

با Vue.js 3 (و v2.7)، Vue یک API جدید به چارچوب معرفی کرد – API ترکیبی، که مجموعه‌ای از API است که به ما امکان می‌دهد به جای اعلام گزینه‌ها، مؤلفه‌های Vue.js را با استفاده از توابع وارداتی بنویسیم. ما تا این لحظه هنگام نوشتن مؤلفه‌های Vue.js این کار را انجام داده‌ایم. همانطور که در تمام مثال‌هایمان نشان داده‌ایم، Options API همچنان برای استفاده در دسترس است.

با Composition API، گزینه هایی مانند data در اجزای ما با ref() یا reactive() توابع، توابع بومی جاوا اسکریپت به جای توابع ترجیح داده می شوند methods و filters گزینه ها، و computed با onComputed() تابع. همه قلاب ها با توابع پیشوند با قرار می گیرند on در قالب شتر، به عنوان مثال، mounted، beforeUpdate، و unmounted قلاب ها با onMounted()، onBeforeUpdate()، و onUnmounted() توابع ترکیب به ترتیب.

این <script setup> شکر بعداً برای تسهیل یک نحو مختصر و ارگونومیک برای SFCها معرفی شد.

بیایید یک مثال را با تبدیل خود ببینیم App.vue جزء بالا

import {computed, ref} from “vue”
let count = ref(0)
const doubleL = computed(() => 1 + ‘1’)

function increment(){
    count.value++
}

این ref() تابع، همانطور که در بالا نشان داده شد، برای واکنش پذیر کردن متغیرها استفاده می شود. برای آزمایش واکنش پذیری، سعی کنید آن را جایگزین کنید ref(0) با 0 و count.value++ با count++ برای دیدن اینکه آیا تعداد بر روی کلیک دکمه ها افزایش می یابد یا خیر.

ref() یک مقدار درونی را می گیرد که به آن ارسال می شود و یک شی ref واکنش پذیر و قابل تغییر را برمی گرداند که دارای یک ویژگی واحد است – .value که به ارزش درونی اشاره دارد. این دلیلی است که ما استفاده می کنیم count.value و نه count درون increment() تابع برای جهش تعداد.
در داخل قالب، نیازی به استفاده نداریم .value همانطور که Vue.js به طور خودکار آن را مدیریت می کند.

برای متغیر محاسبه شده ما doubleL ما یک تابع دریافت کننده را ارسال می کنیم که یک واکنشگر را نیز برمی گرداند ref شی، به این معنی، اگر بخواهیم به مقدار آن در بخش جاوا اسکریپت برنامه خود دسترسی پیدا کنیم، از آن استفاده می کنیم .value.

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

Const doubleL = 1 + ‘1’

برخی از مزایای آشکار ما در تبدیل می بینیم App.vue جزء Composition API کاهش ردپای کد و کاربرد بیشتر جاوا اسکریپت بومی است، هرچند، ما کمی ساختار را از دست می دهیم.
برای اطلاعات بیشتر در مورد Composition API، می‌توانید اسناد رسمی Vue.js را در این زمینه بخوانید.

اتصال حالت جزء SFC به سبک ها

با SFCهای Vue.js، می‌توانیم مقادیر CSS را به حالت مؤلفه واکنشی با استفاده از آن پیوند دهیم v-bind() تابع CSS.

ببندیم count به مقدار حاشیه در سبک های ما.

div, button{
    padding: 5px;
    margin: v-bind(count + “px”)
}

هنگام کلیک بر روی دکمه باید اثر زیر را مشاهده کنیم.

توجه، برای دیدن کد منبع پروژه Vue.js SFC که به تازگی ایجاد کرده ایم، از این مخزن GitHub دیدن کنید.

خلاصه

به طور خلاصه، در این پست موارد زیر را یاد گرفتیم:

• راه اندازی یک پروژه Vue.js با استفاده از ابزارهای ساخت، در این مورد – Vite.
• ایجاد و کار با اجزای تک فایل (SFC) Vue.js.
• سینتکس و عملکرد هر بخش از یک SFC را درک کرد.
• ما با Vue.js Composition API و برخی از توابع محبوبی که در هنگام ساخت رابط با Vue.js 3 استفاده خواهیم کرد، آشنا شده ایم.
• در مورد نحوه استفاده از <script setup> قند در فایل های Vue.js SFC.
• ما همچنین دیده‌ایم که چگونه می‌توانیم حالت مؤلفه را به مقادیر CSS متصل کنیم تا جلوه‌های خلاقانه را در رابط‌های کاربری خود ارائه دهیم.

برای اطلاعات بیشتر در مورد اجزای تک فایل Vue.js، اسناد رسمی Vue.js را بخوانید.