כיצד לבנות פרויקט Vue.js

מבנה התיקיות המושלם וארכיטקטורת הרכיבים של Vue.js עם רכיבים חכמים וטיפשים

יותר מ- hype, Vue.js הוא מסגרת חזיתית נהדרת. קל להתחיל וליצור אפליקציית אינטרנט. Vue.js מתואר לעתים קרובות כמסגרת לאפליקציות קטנות ולעיתים אפילו כחלופה ל- jQuery מכיוון שהיא קטנה מאוד! באופן אישי, אני חושב שזה מתאים גם לפרויקטים גדולים יותר. במקרה זה, חשוב לבנות אותו היטב מבחינת ארכיטקטורת הרכיבים.

לפני שהתחלתי את פרויקט Vue.js הגדול הראשון שלי, ערכתי מחקר כדי למצוא את מבנה התיקיות המושלם, ארכיטקטורת הרכיבים וכינוס השמות. בדקתי את תיעוד Vue.js, כמה מאמרים ופרויקטים רבים של GitHub קוד פתוח.

הייתי צריך למצוא תשובות לכמה מהשאלות שלי. תוכלו למצוא זאת בפוסט זה:

  • איך מבנים את הקבצים והתיקיות בפרויקט Vue.js?
  • איך כותבים רכיבים חכמים ואילמים ואיפה מניחים אותם? זה מושג מ- React.
  • מה סגנון הקידוד של Vue.j ושיטות העבודה המומלצות?

כמו כן, אתעד עם המקור שקיבלתי השראה וקישורים אחרים להבנה טובה יותר.

מבנה התיקיות Vue.js

להלן תוכן תיקיית src. אני ממליץ להתחיל את הפרויקט עם Vue CLI. באופן אישי, השתמשתי בתבנית החבילה הסטנדרטית.

. ├── app.css ├── App.vue ├── נכסים │ │ ... ├── רכיבים │ │ ... ├── main.js ├── mixins │ │ ... ├── נתב │ └── index.js ├── שמור │ ├── index.js │ ├── מודולים │ │ └── ... │ │ מוטציה- types.js ├── תרגומים │ └── index.js ├─ ─ כלים │ │ ... └── צפיות └── ...

כמה פרטים על כל אחת מהתיקיות האלה:

  • נכסים - כאן אתה שם את כל הנכסים שיובאו לרכיבים שלך
  • רכיבים - כל מרכיבי הפרויקטים שאינם התצוגה העיקרית
  • mixins - המיקסינים הם החלקים של קוד Javascript שעושים שימוש חוזר ברכיבים שונים. במיקסין תוכלו להכניס את השיטות של כל רכיב מ Vue.js. הם מוזגו עם אלה של הרכיב המשתמש בהם.
  • נתב - כל מסלולי הפרויקטים שלך (במקרה שלי יש לי אותם ב- index.js). בעיקרון הכל ב- Vue.js הוא רכיב. אבל לא הכל צד אחד. לדף יש מסלול כמו "/ לוח מחוונים", "/ הגדרות" או "/ חיפוש". אם לרכיב יש מסלול, הוא מועבר.
  • חנות (אופציונלי) - הקבועים של Vuex ב- mutation-type.js, המודולים של Vuex במודולים של תיקיות המשנה (אשר נטענים לאחר מכן ל- index.js).
  • תרגומים (אופציונלי) - מקבצים מקומיים, אני משתמש ב- Vue-i18n וזה עובד די טוב.
  • utils (אופציונלי) - פונקציות בהן אני משתמש בחלק מהרכיבים, למשל ב. מבחני ערך, קבועים או פילטרים של רגקס.
  • צפיות - כדי להקל על הקריאה של הפרויקט, אפריד בין הרכיבים המנותבים ואכניס אותם לתיקיה זו. הרכיבים המנותבים עבורי הם יותר מסתם רכיב בכך שהם מייצגים דפים ויש להם מסלולים. לאחר מכן שמתי אותם ב"תצוגות ", כשאתה סוקר דף, עבור לתיקייה זו.

ניתן להוסיף תיקיות אחרות לפי הצורך, למשל. ב. מסננים או קבועים, API.

כמה משאבים שהעניקו לי השראה

  • https://vuex.vuejs.org/en/structure.html
  • https://github.com/vuejs/vue-hackernews-2.0/tree/master/src
  • https://github.com/mchandleraz/realworld-vue/tree/master/src

רכיבים חכמים לעומת מטומטמים עם Vue.js

רכיבים חכמים ואילמים הם מושג שלמדתי מ- React. רכיבים חכמים נקראים גם מכולות. הם אלה שעוסקים בשינויי מדינה. אתה אחראי לאופן שבו הדברים עובדים. נהפוך הוא, הרכיבים המטופשים, הנקראים גם רכיבי מצגת, מקבלים רק את המראה.

ברגע שמכירים את דפוסי MVC, תוכלו להשוות רכיבי גיבוי לתצוגה ורכיבים חכמים לבקר!

ב- React, רכיבים חכמים ואילמים בדרך כלל מכניסים לתיקיות שונות, ואילו ב- Vue.js שמים את כולם באותה תיקייה: רכיבים. השתמש בכינוס למתן שמות כדי להבדיל בין Vue.js. נניח שיש לך רכיב כרטיסים טיפשי. אז עליך להשתמש באחד מהשמות הבאים:

  • BaseCard
  • AppCard
  • כרטיס אשראי

אם יש לך רכיב חכם המשתמש ב- BaseCard ומוסיף לו כמה שיטות, תוכל למנות אותו בהתאם לפרויקט שלך למשל:

  • פרופיל כרטיס
  • ItemCard
  • NewsCard

אם הרכיב החכם שלך הוא לא רק BaseCard "חכם" יותר עם שיטות, פשוט השתמש בכל שם שמתאים לרכיב שלך מבלי להתחיל עם Base (או App או V). דוגמא:

  • DashboardStatistics
  • תוצאות חיפוש
  • פרופיל משתמש

כינוס שמות זה מגיע ממדריך הסגנון הרשמי של Vue.j, המכיל גם מוסכמות שמות!

כללי שמות

להלן מספר מוסכמות מהמדריך הרשמי לסגנון Vue.j שעליך יהיה לבנות את הפרויקט שלך היטב:

  • שמות רכיבים צריכים להיות מורכבים תמיד ממילים מרובות, למעט רכיבי אפליקציית השורש. לדוגמה, השתמש ב- "UserCard" או "ProfileCard" במקום ב"כרטיס ".
  • כל רכיב צריך להיות בקובץ משלו.
  • שמות קבצים של רכיבי קובץ יחיד צריכים להיות תמיד PascalCase או תמיד Kebab-case. השתמש ב- "UserCard.vue" או "user-card.vue".
  • רכיבים המשמשים פעם אחת בלבד לכל צד צריכים להתחיל בקידומת "The" כדי לציין שיכול להיות רק אחד. לדוגמה, עבור סרגל ניווט או כותרת תחתונה, השתמש ב- TheNavbar.vue או TheFooter.vue.
  • רכיבי ילד צריכים להקדים את שם ההורה שלהם. לדוגמא, אם ברצונך להשתמש ברכיב "תמונה" ב- "UserCard", קרא לו "UserCardPhoto". זה נועד לקריאה טובה יותר, מכיוון שהקבצים בתיקיה ממוינים בדרך כלל לפי אלפבית.
  • השתמש תמיד בשם המלא במקום בקיצור בשם הרכיבים שלך. לדוגמא, אל תשתמש ב- "UDSettings", אלא "UserDashboardSettings".

מדריך הסגנון הרשמי של Vue.js

בין אם אתה מתקדם עם Vue.js או מתחיל, יש לקרוא את המדריך לסגנון Vue.js זה. הוא מכיל טיפים רבים וגם מוסכמות למתן שמות. הוא מכיל הרבה דוגמאות לדברים שיש לעשות ולא לעשות.

אם נהנית מהפוסט הזה, אנא לחץ על כפתור הרכילות למטה כמה פעמים כדי להראות את תמיכתך! כמו כן, אל תהסס להגיב ולתת משוב כלשהו. אל תשכח לעקוב אחרי!

האם תרצה לראות פריטים נוספים כמו זה? תמכו בי בפטרון