একটি Vue.js প্রকল্প কীভাবে গঠন করবেন

বুদ্ধিমান এবং মূ .় উপাদানগুলির সাথে Vue.js এর নিখুঁত ফোল্ডার কাঠামো এবং উপাদান আর্কিটেকচার

হাইপ এর চেয়েও বেশি, ভ্যু.জেএস একটি দুর্দান্ত ফ্রন্ট এন্ড ফ্রেমওয়ার্ক। এটি শুরু করা এবং একটি ওয়েব অ্যাপ তৈরি করা সহজ। Vue.js প্রায়শই ছোট অ্যাপ্লিকেশনগুলির কাঠামো হিসাবে বর্ণনা করা হয় এবং কখনও কখনও এটি jQuery এর বিকল্প হিসাবে খুব ছোট হিসাবেও বর্ণনা করা হয়! ব্যক্তিগতভাবে, আমি এটি বড় প্রকল্পগুলির জন্যও উপযুক্ত বলে মনে করি। এই ক্ষেত্রে, উপাদান আর্কিটেকচারের দিক থেকে এটির কাঠামোগত গঠন করা গুরুত্বপূর্ণ।

আমার প্রথম বড় Vue.js প্রকল্প শুরু করার আগে, আমি নিখুঁত ফোল্ডার কাঠামো, উপাদান আর্কিটেকচার এবং নামকরণের কনভেনশন সন্ধান করার জন্য কিছু গবেষণা করেছি। আমি Vue.js ডকুমেন্টেশন, কিছু নিবন্ধ এবং অনেক গিটহাব ওপেন সোর্স প্রকল্প দেখেছি।

আমার কিছু প্রশ্নের উত্তর খুঁজে পেতে হয়েছিল। আপনি এই পোস্টে এটি পেতে পারেন:

  • আপনি Vue.js প্রকল্পে ফাইল এবং ফোল্ডারগুলি কীভাবে গঠন করবেন?
  • আপনি কীভাবে স্মার্ট এবং বোবা উপাদান লিখবেন এবং কোথায় রাখবেন? এটি প্রতিক্রিয়া থেকে একটি ধারণা।
  • ভ্যু.জে এর কোডিং শৈলী এবং সর্বোত্তম অনুশীলনগুলি কী কী?

আমি আরও ভাল বোঝার জন্য উত্স থেকে অনুপ্রাণিত হয়েছিল এবং অন্যান্য লিঙ্কগুলির সাথেও নথি করব will

Vue.js ফোল্ডার কাঠামো

এখানে src ফোল্ডারের বিষয়বস্তু রয়েছে। আমি আপনাকে Vue CLI দিয়ে প্রকল্পটি শুরু করার পরামর্শ দিচ্ছি। ব্যক্তিগতভাবে, আমি স্ট্যান্ডার্ড ওয়েবপ্যাক টেম্পলেট ব্যবহার করেছি।

। .C app.css ├── App.vue ├── সম্পদ │ │ ... ├── উপাদান │ │ ... ├── main.js ├── মিশ্রণ │ │ ... ├── রাউটার │ । Index.js ├── save │ ├── index.js │ ├── মডিউলগুলি │ │ └── ... │ │ রূপান্তর-প্রকার .js ├── অনুবাদসমূহ └──। Index.js ├─ ─ বাসনগুলি │ │ ... └── দর্শন └── ...

এই ফোল্ডারগুলির প্রতিটি সম্পর্কে কিছু বিশদ:

  • সম্পদ - এটি যেখানে আপনি আপনার সম্পত্তিগুলিতে আমদানি করা সমস্ত সম্পদ রাখবেন
  • উপাদান - প্রকল্পগুলির সমস্ত উপাদান যা মূল মতামত নয়
  • মিশিনস - মিক্সিনগুলি জাভাস্ক্রিপ্ট কোডের টুকরো যা বিভিন্ন উপাদানগুলিতে পুনরায় ব্যবহৃত হয়। একটি মিশ্রণে আপনি Vue.js. থেকে প্রতিটি উপাদানগুলির পদ্ধতি সন্নিবেশ করতে পারেন এগুলি যে উপাদান ব্যবহার করে সেগুলির সাথে মিশে যায়।
  • রাউটার - আপনার প্রকল্পের সমস্ত রুট (আমার ক্ষেত্রে আমি সেগুলি index.js এ থাকি)। মূলত Vue.js এর প্রতিটি জিনিসই একটি উপাদান। তবে সব এক দিক নয়। একটি পৃষ্ঠার "/ ড্যাশবোর্ড", "/ সেটিংস" বা "/ অনুসন্ধান" এর মতো একটি রুট রয়েছে। যদি কোনও উপাদানটির রুট থাকে তবে তা এগিয়ে দেওয়া হয়।
  • স্টোর (alচ্ছিক) - মিউটেশন-টাইপ.জেএস-এ ভ্যুয়াক্স কনস্ট্যান্টস, সাব-ফোল্ডার মডিউলগুলির মধ্যে ভুেক্স মডিউলগুলি (যা পরে সূচি.জেজে লোড করা হয়)।
  • অনুবাদসমূহ (alচ্ছিক) - লোকেল ফাইলগুলি, আমি ভ্যু-আই 18 এন ব্যবহার করছি এবং এটি বেশ ভালভাবে কাজ করে।
  • ব্যবহারগুলি (alচ্ছিক) - ফাংশন যা আমি কয়েকটি উপাদানগুলিতে ব্যবহার করি, যেমন। বি। রেজেক্স মান পরীক্ষা, ধ্রুবক বা ফিল্টার।
  • ভিউজ - প্রকল্পটি পড়া সহজ করার জন্য, আমি রুটেড উপাদানগুলিকে আলাদা করব এবং সেগুলি এই ফোল্ডারে রেখে দেব। আমার জন্য যে উপাদানগুলি রুট করা হয়েছে সেগুলি কেবল এমন উপাদানগুলির চেয়ে বেশি যেগুলি পৃষ্ঠাগুলি উপস্থাপন করে এবং তার জন্য রুট রয়েছে। আমি তখন এগুলিকে "ভিউজে" রেখেছি, যখন আপনি কোনও পৃষ্ঠা পর্যালোচনা করেন, সেই ফোল্ডারে স্যুইচ করুন।

আপনি প্রয়োজন হিসাবে অন্যান্য ফোল্ডার যুক্ত করতে পারেন, উদা। বি ফিল্টার বা ধ্রুবক, এপিআই।

কিছু সংস্থান যা আমাকে অনুপ্রাণিত করেছিল

  • 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 এর সাথে স্মার্ট বনাম বোবা উপাদান

স্মার্ট এবং বোবা উপাদানগুলি একটি ধারণা যা আমি প্রতিক্রিয়া থেকে শিখেছি। বুদ্ধিমান উপাদানগুলিকে পাত্রেও বলা হয়। তারা হ'ল যারা রাষ্ট্রের পরিবর্তনগুলি নিয়ে কাজ করে। কীভাবে জিনিসগুলি কাজ করে তার জন্য আপনি দায়বদ্ধ। বিপরীতে, নির্বোধ উপাদানগুলি, যাকে উপস্থাপনা উপাদানও বলা হয়, কেবল চেহারাটি গ্রহণ করে।

একবার আপনি এমভিসি নিদর্শনগুলির সাথে পরিচিত হয়ে গেলে আপনি ব্যাকআপ উপাদানগুলি ভিউয়ের সাথে এবং স্মার্ট উপাদানগুলি নিয়ন্ত্রণকারীর সাথে তুলনা করতে পারেন!

প্রতিক্রিয়াতে, স্মার্ট এবং বোবা উপাদানগুলি সাধারণত বিভিন্ন ফোল্ডারে রাখা হয়, যখন Vue.js এ আপনি সেগুলি একই ফোল্ডারে রাখেন: উপাদানগুলি। Vue.js. এ পার্থক্য করতে একটি নামকরণ কনভেনশন ব্যবহার করুন ধরা যাক আপনার একটি বোকা কার্ড উপাদান রয়েছে। তারপরে আপনার নীচের একটি নাম ব্যবহার করা উচিত:

  • বেসকার্ড
  • অ্যাপকার্ড
  • ভিসার্ড

যদি আপনার কাছে এমন স্মার্ট উপাদান রয়েছে যা বেসকার্ড ব্যবহার করে এবং এতে কিছু পদ্ধতি যুক্ত করে, তবে উদাহরণস্বরূপ আপনি আপনার প্রকল্পের উপর নির্ভর করে এটির নাম রাখতে পারেন:

  • প্রোফাইলকার্ড
  • আইটেমকার্ড
  • নিউজকার্ড

যদি আপনার স্মার্ট উপাদানটি পদ্ধতিগুলির সাথে কেবল একটি "স্মার্ট" বেসকার্ড না হয় তবে কেবল বেস (বা অ্যাপ্লিকেশন বা ভি) দিয়ে শুরু না করে আপনার উপাদানটির উপযুক্ত অনুসারে যে কোনও নাম ব্যবহার করুন। উদাহরণ:

  • ড্যাশবোর্ড স্ট্যাটিক্স
  • অনুসন্ধান ফলাফল
  • ব্যাবহারকারীর বিস্তারিত

এই নামকরণ কনভেনশনটি ভ্যু.জে থেকে অফিসিয়াল স্টাইল গাইড থেকে আসে, এতে নামকরণের সম্মেলনও রয়েছে!

নামকরণের নিয়ম

অফিসিয়াল ভ্যু.জে স্টাইল গাইডের কিছু কনভেনশন রয়েছে যা আপনার প্রকল্পটি ভালভাবে সাজানো দরকার:

  • মূল অ্যাপের উপাদানগুলি বাদ দিয়ে কম্পোনেন্টের নামগুলিতে সর্বদা একাধিক শব্দ থাকা উচিত cons উদাহরণস্বরূপ, "কার্ড" এর পরিবর্তে "ইউজারকার্ড" বা "প্রোফাইলকার্ড" ব্যবহার করুন।
  • প্রতিটি উপাদান নিজস্ব ফাইলে থাকা উচিত।
  • একক-ফাইলের উপাদানগুলির ফাইলের নামগুলি সর্বদা প্যাসকেলকেস বা সর্বদা কাবাব-কেস হওয়া উচিত। "ইউজারকার্ড.ভ্যু" বা "ইউজার-কার্ড.ভুই" ব্যবহার করুন।
  • প্রতি পার্শ্ব শুধুমাত্র একবার ব্যবহার করা হয় এমন উপাদানগুলির কেবলমাত্র "একটি" থাকতে পারে তা বোঝাতে উপসর্গ "দ্য" দিয়ে শুরু করা উচিত। উদাহরণস্বরূপ, নেভিগেশন বার বা পাদচরণের জন্য, TheNavbar.vue বা TheFooter.vue ব্যবহার করুন।
  • শিশু উপাদানগুলি তাদের পিতামাতার নামের উপসর্গ করা উচিত। উদাহরণস্বরূপ, আপনি যদি "ইউজারকার্ড" তে কোনও "ফটো" উপাদান ব্যবহার করতে চান তবে এটির নাম "ইউজারকার্ডফোটো" রাখুন। এটি আরও ভাল পঠনযোগ্যতার জন্য, কারণ কোনও ফোল্ডারে থাকা ফাইলগুলি সাধারণত বর্ণানুক্রমিকভাবে সাজানো হয়।
  • সর্বদা আপনার উপাদানগুলির নামে সংক্ষিপ্তসার পরিবর্তে পুরো নামটি ব্যবহার করুন। উদাহরণস্বরূপ, "ইউডিএসটিটিং" ব্যবহার না করে "ইউজারড্যাশবোর্ডসেটেটিংস" ব্যবহার করুন।

Vue.js অফিশিয়াল স্টাইল গাইড

আপনি Vue.js বা উন্নত শিক্ষাক্রমে উন্নত হন না কেন, এই Vue.js স্টাইল গাইডটি পড়া উচিত। এটিতে অনেক টিপস এবং নামকরণের সম্মেলন রয়েছে। এটি করা এবং করা না হওয়ার অনেকগুলি উদাহরণ রয়েছে।

আপনি যদি এই পোস্টটি উপভোগ করেন তবে দয়া করে আপনার সমর্থনটি দেখানোর জন্য কয়েকবার নীচে গসিপ বোতামটি ক্লিক করুন! এছাড়াও, বিনা দ্বিধায় মন্তব্য করতে এবং কোনও ধরণের প্রতিক্রিয়া জানাতে পারেন। আমাকে অনুসরণ করতে ভুলবেন না!

আপনি কি এই জাতীয় আরও আইটেম দেখতে চান? প্যাট্রিয়নে আমাকে সমর্থন করুন