Vue.js پروجیکٹ کو کس طرح تشکیل دیں

ذہین اور بیوقوف اجزاء کے ساتھ Vue.js کا بہترین فولڈر ڈھانچہ اور جزو فن تعمیر

ہائپ سے زیادہ ، ویو جے ایس ایک فرنٹ اینڈ فریم ورک ہے۔ شروع کرنا اور ویب ایپ بنانا آسان ہے۔ Vue.js کو اکثر چھوٹے ایپس کے فریم ورک کے طور پر اور کبھی کبھی jQuery کے متبادل کے طور پر بھی بیان کیا جاتا ہے کیونکہ یہ بہت ہی چھوٹا ہوتا ہے! ذاتی طور پر ، میرے خیال میں یہ بڑے پروجیکٹس کے لئے بھی موزوں ہے۔ اس معاملے میں ، جزو کے فن تعمیر کے معاملے میں اس کی ساخت اچھی بنانا ضروری ہے۔

میرا پہلا بڑا Vue.js پراجیکٹ شروع کرنے سے پہلے ، میں نے فولڈر ڈھانچہ ، جزو فن تعمیر ، اور نام سازی کنونشن کی تلاش کے ل some کچھ تحقیق کی۔ میں نے Vue.js دستاویزات ، کچھ مضامین ، اور بہت سے GitHub اوپن سورس پروجیکٹس دیکھے ہیں۔

مجھے اپنے کچھ سوالوں کے جوابات ڈھونڈنے تھے۔ آپ کو اس پوسٹ میں مل سکتا ہے:

  • آپ Vue.js پروجیکٹ میں فائلوں اور فولڈر کو کس طرح تشکیل دیتے ہیں؟
  • آپ کس طرح ہوشیار اور گونگے اجزا لکھتے ہیں اور آپ انہیں کہاں رکھتے ہیں؟ یہ رد عمل کا ایک تصور ہے۔
  • ویو جے کے کوڈنگ اسٹائل اور بہترین طریقہ کار کیا ہیں؟

ایک بہتر تفہیم حاصل کرنے کے ل I میں اس ذریعہ سے بھی دستاویز کروں گا جس سے میں حوصلہ افزائی کر رہا ہوں اور دیگر لنکس۔

Vue.js فولڈر ڈھانچہ

src فولڈر کے مندرجات یہ ہیں۔ میری تجویز ہے کہ آپ منصوبے کو Vue CLI کے ساتھ شروع کریں۔ ذاتی طور پر ، میں نے معیاری ویب پیک ٹیمپلیٹ کا استعمال کیا۔

. .c app.css ├── App.vue ├── اثاثے │ │ ... ├── اجزاء │ │ ... ├── main.js ├── mixins │ │ ... ├── راؤٹر │ . index.js ├── save │ ├── index.js │ ├── ماڈیول │ │ └── ... │ │ اتپریورتن اقسام. جے ایس ├── ترجمے │ └── index.js ├─ ─ برتن │ │ ... └── خیالات └── ...

ان میں سے ہر فولڈر کے بارے میں کچھ تفصیلات:

  • اثاثے۔ یہ وہ جگہ ہے جہاں آپ نے تمام اثاثے رکھے ہیں جو آپ کے اجزاء میں درآمد ہوں گے
  • اجزاء - منصوبوں کے سارے اجزاء جو مرکزی خیالات نہیں ہیں
  • مکسنس - مکسنس جاوا اسکرپٹ کوڈ کے ٹکڑے ہیں جو مختلف اجزاء میں دوبارہ استعمال کیے جاتے ہیں۔ ایک مرکب میں آپ Vue.js سے ہر جزو کے طریقے داخل کرسکتے ہیں۔ وہ اس جزو کے ساتھ ضم ہوجاتے ہیں جو ان کو استعمال کرتا ہے۔
  • روٹر - آپ کے پروجیکٹس کے تمام روٹس (میرے معاملے میں میں ان کو انڈکس انڈیا میں رکھتا ہوں)۔ بنیادی طور پر Vue.js میں ہر چیز ایک جزو ہے۔ لیکن سب ایک طرف نہیں ہیں۔ کسی صفحے کا راستہ "/ ڈیش بورڈ" ، "/ ترتیبات" یا "/ تلاش" جیسے ہوتا ہے۔ اگر کسی جز کے پاس راستہ ہے تو ، اسے آگے بڑھایا جاتا ہے۔
  • اسٹور (اختیاری) - ویویکس مستقل مزاج کی قسم. جے ایس میں ، ذیلی فولڈر کے ماڈیولز میں وویکس ماڈیول (جو پھر انڈیکس. جے ایس میں بھری ہوئی ہیں)۔
  • ترجمہ (اختیاری) - لوکلز فائلیں ، میں Vue-i18n استعمال کر رہا ہوں اور یہ بہت عمدہ کام کرتا ہے۔
  • utils (اختیاری) - وہ افعال جو میں کچھ اجزاء میں استعمال کرتا ہوں ، جیسے۔ B. ریجیکس ویلیو ٹیسٹ ، مستقل یا فلٹر۔
  • ملاحظہ کریں - پروجیکٹ کو پڑھنے میں آسانی پیدا کرنے کے ل I'll ، میں راستہ دار اجزاء کو الگ کرکے اس فولڈر میں ڈالوں گا۔ میرے لئے جو اجزاء روٹ ہوتے ہیں وہ صرف ایک جزو سے زیادہ ہوتے ہیں جس میں وہ صفحات کی نمائندگی کرتے ہیں اور اس کے راستے ہوتے ہیں۔ تب میں نے انہیں "ویوز" میں رکھا ، جب آپ کسی صفحے کا جائزہ لیں تو اس فولڈر میں سوئچ کریں۔

آپ ضرورت کے مطابق دوسرے فولڈر شامل کرسکتے ہیں ، جیسے۔ B. فلٹر یا مستحکم ، API۔

کچھ وسائل جس نے مجھے متاثر کیا

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

ہوشیار بمقابلہ گونگا اجزاء Vue.js کے ساتھ

ہوشیار اور گونگے اجزاء ایک ایسا تصور ہے جو میں نے ردact عمل سے سیکھا ہے۔ ذہین اجزاء کو کنٹینر بھی کہا جاتا ہے۔ وہی ہیں جو ریاست کی تبدیلیوں سے نمٹتے ہیں۔ آپ کس طرح کام کرتے ہیں اس کے ذمہ دار ہیں۔ اس کے برعکس ، بیوقوف اجزاء ، جسے پریزنٹیشن اجزاء بھی کہا جاتا ہے ، صرف ظاہری شکل سنبھالتے ہیں۔

ایک بار جب آپ ایم وی سی پیٹرن سے واقف ہوجائیں تو ، آپ بیک اپ کے اجزاء کو قول اور سمارٹ اجزاء کو کنٹرولر سے موازنہ کرسکتے ہیں!

ری ایکٹ میں ، ہوشیار اور گونگے اجزا عام طور پر مختلف فولڈر میں ڈالے جاتے ہیں ، جبکہ ویو جے میں آپ سب کو ایک ہی فولڈر میں ڈال دیتے ہیں: اجزاء۔ Vue.js میں فرق کرنے کے لئے نامی کنونشن کا استعمال کریں۔ ہم کہتے ہیں کہ آپ کے پاس بیوقوف کارڈ جزو ہے۔ تب آپ کو درج ذیل میں سے ایک نام استعمال کرنا چاہئے:

  • بیس کارڈ
  • ایپ کارڈ
  • وی کارڈ

اگر آپ کے پاس اسمارٹ جزو ہے جو بیس کارڈ کو استعمال کرتا ہے اور اس میں کچھ طریقے شامل کرتا ہے تو ، مثال کے طور پر آپ اپنے پروجیکٹ کے لحاظ سے اس کا نام دے سکتے ہیں۔

  • پروفائل کارڈ
  • آئٹم کارڈ
  • نیوز کارڈ

اگر آپ کا سمارٹ جزو طریقوں کے ساتھ صرف "ہوشیار" بیس کارڈ نہیں ہے تو ، بس کوئی بھی نام استعمال کریں جو بیس (یا ایپ یا وی) سے شروع کیے بغیر آپ کے جزو کے مطابق ہو۔ مثال:

  • ڈیش بورڈاسٹیٹسٹکس
  • تلاش کے نتائج
  • صارف پروفائل

یہ نام سازی کنونشن Vue.j سے سرکاری طرز گائیڈ کے ذریعہ آیا ہے ، جس میں نام کنونشنز بھی شامل ہیں!

نام رکھنے کے قواعد

سرکاری Vue.j طرز طرز ہدایت نامہ کے کچھ کنونشنز یہ ہیں کہ آپ کو اپنے منصوبے کو اچھی طرح سے ترتیب دینے کی ضرورت ہوگی۔

  • جزو کے ناموں میں ہمیشہ روٹ ایپ کے اجزاء کو چھوڑ کر متعدد الفاظ پر مشتمل ہونا چاہئے۔ مثال کے طور پر ، "کارڈ" کے بجائے "یوزر کارڈ" یا "پروفائل کارڈ" استعمال کریں۔
  • ہر جزو اپنی فائل میں ہونا چاہئے۔
  • ایک فائل کے اجزاء کے فائل کا نام یا تو ہمیشہ پاسکل کیس یا ہمیشہ کباب کیس ہونا چاہئے۔ "یوزرکارڈ ڈاٹ وییو" یا "یوزر کارڈ-ڈویژن" استعمال کریں۔
  • اجزاء جو صرف ایک بار استعمال ہوتے ہیں وہ "The" کے ماقبل سے شروع ہونا چاہئے اس بات کی نشاندہی کرنے کے کہ وہاں صرف ایک ہی ہوسکتا ہے۔ مثال کے طور پر ، نیویگیشن بار یا فوٹر کے لئے ، TheNavbar.vue یا TheFooter.vue استعمال کریں۔
  • بچوں کے اجزاء کو ان کے والدین کے نام کا استعمال کرنا چاہئے۔ مثال کے طور پر ، اگر آپ "یوزرکارڈ" میں "فوٹو" اجزاء استعمال کرنا چاہتے ہیں تو ، اس کا نام "یوزرکارڈ فوٹو" رکھیں۔ یہ بہتر پڑھنے کے قابل ہے ، کیوں کہ فولڈر میں موجود فائلوں کو عام طور پر حرف تہجی کے مطابق ترتیب دیا جاتا ہے۔
  • اپنے اجزاء کے نام پر مخفف کی بجائے پورا پورا نام ہمیشہ استعمال کریں۔ مثال کے طور پر ، "یو ڈی سیٹنگز" نہیں بلکہ "یوزر ڈیش بورڈ سیٹنگز" استعمال کریں۔

Vue.js آفیشل اسٹائل گائیڈ

چاہے آپ Vue.js کے ساتھ ترقی یافتہ ہو یا ابتدائی ، اس Vue.js اسٹائل گائیڈ کو پڑھنا چاہئے۔ اس میں بہت سارے نکات اور نام کنونشنز بھی شامل ہیں۔ اس میں کام کرنے اور نہ کرنے کے متعدد مثالیں ہیں۔

اگر آپ کو اس پوسٹ سے لطف اندوز ہوا ہے تو ، براہ کرم اپنی حمایت ظاہر کرنے کے لئے ذیل میں گپ شپ کے بٹن پر کچھ بار کلک کریں! نیز بلا جھجک تبصرہ کریں اور کسی بھی طرح کی رائے دیں۔ میری پیروی کرنا مت بھولنا!

کیا آپ اس طرح کی مزید اشیاء دیکھنا چاہیں گے؟ پیٹریون on پر میرا ساتھ دیں