מדריך Vue.js למפתחי מתחילים: למד את היסודות והשתמש במבנה Vue Starter זה

מדריך Vue.js למפתחי מתחילים


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

מה זה Vue.js? למה אכפת לך?

Vue.js או Vue בקיצור היא מסגרת JavaScript לבניית ממשקי משתמש. בהשוואה למסגרות אחרות, כמו Angular או React, Vue ניגש יותר ואינו תלול עקומת למידה..

Vue הוא גם מודולרי, ויאפשר לכם לפצל את הקוד לרכיבים שניתנים לשימוש חוזר. לכל אחד מהם סימון HTML, CSS וקוד JavaScript משלהם.

מה היקף לימוד Vue.js זה?

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

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

מה שאנחנו הולכים לעשות זה להשתמש בתבנית מוגדרת מראש לתוספי וורדפרס באמצעות Vue. אתה יכול למצוא אותו במאגר הבא של GitHub אם אתה רוצה להעיף מבט מעמיק יותר: https://github.com/abaicus/vue-wp-bootstrap.

הדרכה Vue.js: דרישות קדם

ישנם כמה דברים שכבר היית צריך להגדיר במחשב שלך כדי להמשיך במדריך זה:

ראשית, אתה זקוק לערימת LAMP – אתה יכול להשתמש ב- XAMPP ב- Windows או Mac, או Local by Flywheel ב- Mac, ואז להגדיר לעצמך התקנת וורדפרס מקומית טרייה..

ודא שיש לך את מנהל החבילות של NodeJS (npm) המותקן במחשב שלך. יהיה עליכם להתקין שתי חבילות נוספות דרך הטרמינל – ה- Vue CLI וכלי האתחול של תבנית Vue. ככה:

התקן $ npm -g @ vue / cli
התקן $ npm -g @ vue / cli-init

לאחר התקנת שתי התלות האלו, עליך לשנות את הספרייה הפעילה לספריית ה- wp-content / plugins של מופע ה- WordPress המקומי שלך ואז להפעיל שם את הפקודה הבאה:

$ vue init abaicus / vue-wp-bootstrap my-vue-dashboard-plugin

בשלב הבא תתבקש לענות על כמה שאלות הנוגעות להגדרת הפרויקט.

בשורת ה- Build, פשוט קדימה ובחר באפשרות הראשונה לעת עתה "Runtime + Compiler: מומלץ לרוב המשתמשים".

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

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

בסופו של דבר, מסוף ייראה פחות או יותר כזה אחרי שתסיים:

תוכלו להמשיך ולעקוב אחר ההוראות שעל המסך. שנה את הספרייה לספריית התוספים החדשה שנוצרה והפעל את הפקודות המוצגות בשורת המסוף. זה יפעיל את היישום שלך, יחכה לשינויים בקוד שלך וזה יעביר את קוד ה- Vue ל- JavaScript.

מה זה עושה?

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

מבנה פיגומי התוסף

בואו נסתכל על מבנה הקבצים עבור התוסף החדש שנוצר. אנו מתעלמים מרוב קבצי התצורה במדריך Vue.js זה כדי שנוכל להתמקד במבנה היישום:

ראשית, יש לנו את קובץ plugin.php שזו נקודת הכניסה לתוסף בפועל. הנה, יש לנו את העיקרי חיבור מעמד. זה המקום בו המרכיבים העיקריים של היישום כלולים ומופעלים.

בשלב הבא יש את הקובץ package.json בו מוגדרים כל התלות וקבוצה של פרטי פרויקט אחרים. החלק בו יתעניין אתה חי תחת "תסריטים" שדה. שם, יש לך את כל הפקודות שאתה יכול להריץ עם קידומת הריצה npm. החשובות, לעת עתה, צריכות להיות NPM run dev (הבונה את האפליקציה לפיתוח) ו- npm run build (שאותם עליך להריץ ברגע שתהיה מוכן לפרוס את האפליקציה שלך לייצור). הפקודות האחרות צמודות לשניים אלה או מבצעים דברים אחרים שלא צריך לדאוג להם ברגע זה.

בתוך הספרייה הכוללת, ישנם שלושה קבצים:

  • כיתת rest.php לא עושה שום דבר כרגע, אבל יש לך כבר מבנה להוסיף את מסלולי ה- RestAPI שלך
  • כיתת הנכסים .php מטפלת בסגירת סגנון ותסריט. כאן, קובץ ה- JavaScript מקומי כדי להעביר נתונים מתחילים מ- PHP לאפליקציית Vue שלנו. כרגע נשלחים רק שני טקסטים, אך אתה יכול לכלול כל מה שתרצה.
  • קובץ admin.php הוא זה שדואג להוסיף דף חדש בלוח המחוונים ולעבד את דף התוסף בפועל. אתה תשים לב שהאפליקציה עצמה מוצגת כשני תגיות ריקות בפונקציית plugin_page (). הסיבה לכך היא ש- JavaScript יטפל בעיבוד היישום בפועל לאחר טעינה.

בתוך ספריית הנכסים, תמצא עוד ארבעה ספריות:

  • ספריית ה- src – קבצי המקור עבור אפליקציית Vue שעליה נדבר בהמשך.
  • ספריית ה- scss – קובצי הסגנון של SCSS מהם אנו מייצרים את גיליון הסגנונות של CSS.
  • ספריית js – הקוד המשודר הנוצר מהקבצים שלנו בספריית ה- src.
  • ספריית ה- css – הסגנון הידור מקבצי SCSS.

ספריית ה- src וקובצי תבנית Vue

בתוך ספריה זו, ישנם שני קבצים: main.js ו- App.vue. קובץ main.js הוא נקודת הכניסה ליישום. זה מצרף את רכיב האפליקציה Vue לאלמנט DOM עם המזהה המקביל.

/ * jshint esversion: 6 * /
ייבא Vue מ- ‘vue’
ייבא יישום מ- ‘./App.vue’

windows.addEventListener (‘עומס’, פונקציה () {
new Vue ({// eslint-disable-line no-new
el: ‘# mvdp-app’,
רכיבים: {App},
לדקלם: (ח) => ח (אפליקציה)
})
})

סימון היישום בפועל נמצא בתבנית App.vue:

/ * jshint esversion: 6 * /

{{this.strings.title}}

{{this.strings.description}}

/ * MVDP גלובלי * /
ייצוא ברירת מחדל {
נתונים () {
חזור {
מיתרים: מיתרי MVDP.
}
},
שם: ‘App.vue’
}

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

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

אל תשכח להצטרף לקורס ההתרסקות שלנו בנושא זירוז אתר וורדפרס שלך. עם כמה תיקונים פשוטים, אתה יכול להפחית את זמן הטעינה שלך אפילו ב 50-80%:

פריסה, מצגת ועריכה מאת קרול K.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map