როგორ შევქმნათ Vue.js პროექტი

Vue.js საქაღალდის შესანიშნავი სტრუქტურა და კომპონენტების არქიტექტურა ინტელექტუალური და სულელური კომპონენტებით

Hue– ზე მეტი, Vue.js შესანიშნავი წინა ჩარჩოა. მარტივია დაწყება და ვებ – აპლიკაციის შექმნა. Vue.js ხშირად აღწერილია როგორც პატარა აპლიკაციების ჩარჩო და ზოგჯერ jQuery- ს ალტერნატივაც კი, რადგან ის ძალიან მცირეა! პირადად მე ვფიქრობ, რომ ის უფრო დიდი პროექტებისთვისაც შესაფერისია. ამ შემთხვევაში, მნიშვნელოვანია მისი კარგად სტრუქტურირება კომპონენტის არქიტექტურის თვალსაზრისით.

ჩემი პირველი დიდი Vue.js პროექტის დაწყებამდე, მე გამოვიკვლიე საქაღალდეების სრულყოფილი სტრუქტურა, კომპონენტების არქიტექტურა და დასახელების კონვენცია. გადავხედე Vue.js– ის დოკუმენტაციას, ზოგიერთ სტატიას და GitHub– ის მრავალ ღია პროექტს.

ჩემს ზოგიერთ კითხვაზე პასუხის პოვნა მომიწია. ამის ნახვა შეგიძლიათ ამ პოსტში:

  • როგორ ადგენთ ფაილებსა და საქაღალდეებს Vue.js პროექტში?
  • როგორ წერთ ჭკვიან და მუნჯ კომპონენტებს და სად ათავსებთ მათ? ეს არის რეაქციის კონცეფცია.
  • რა არის Vue.j- ის კოდირების სტილი და საუკეთესო პრაქტიკა?

მე ასევე დავამყარებ დოკუმენტს ჩემს მიერ შთაგონებული წყაროსთან და სხვა ბმულებთან უკეთ გასაგებად.

Vue.js საქაღალდის სტრუქტურა

აქ მოცემულია src საქაღალდის შინაარსი. ვურჩევ პროექტის დაწყებას Vue CLI– ით. მე პირადად გამოვიყენე სტანდარტული პაკეტის შაბლონი.

. ├── app.css ├── App.vue ets აქტივები │ │ ... კომპონენტები │ │ ... ├── main.js ├── mixins │ │ ... ├── როუტერი . Index.js ├── დაზოგეთ │ ├── index.js ules მოდულები │ │ └── ... │ mutation-types.js ├── თარგმანი └── index.js ჭურჭელი │ │ ... └── ნახვები └── ...

რამდენიმე დეტალი ამ საქაღალდეების შესახებ:

  • აქტივები - აქ განთავსდება ყველა აქტივი, რომლებიც იმპორტირდება თქვენს კომპონენტებში
  • კომპონენტები - პროექტების ყველა კომპონენტი, რომლებიც არ წარმოადგენს მთავარ შეხედულებებს
  • mixins - მიქსინები არის Javascript კოდის ის ნაწილები, რომლებიც მრავალჯერადად გამოიყენება სხვადასხვა კომპონენტებში. მიქსინში შეგიძლიათ ჩასვათ თითოეული კომპონენტის მეთოდები Vue.js. ისინი გაერთიანებულია იმ კომპონენტთან, რომელიც იყენებს მათ.
  • როუტერი - თქვენი პროექტების ყველა მარშრუტი (ჩემს შემთხვევაში ისინი მე მაქვს index.js). ძირითადად ყველაფერი Vue.js– ში არის კომპონენტი. მაგრამ ყველაფერი ერთი მხარე არ არის. გვერდს აქვს მარშრუტი, როგორიცაა "/ დაფა", "/ პარამეტრები" ან "/ ძებნა". თუ კომპონენტს აქვს მარშრუტი, ის გადაგზავნილია.
  • მაღაზია (სურვილისამებრ) - Vuex მუდმივები მუტაციის ტიპის. js- ში, Vuex მოდულები ქვე საქაღალდის მოდულებში (რომლებიც შემდეგ იტვირთება index.js- ში).
  • თარგმანები (არასავალდებულო) - ფაილების ლოკალიზება, მე ვიყენებ Vue-i18n- ს და ის საკმაოდ კარგად მუშაობს.
  • utils (არასავალდებულო) - ფუნქციები, რომლებსაც ვიყენებ ზოგიერთ კომპონენტში, მაგ. B. Regex მნიშვნელობის ტესტები, მუდმივები ან ფილტრები.
  • ნახვები - პროექტის წაკითხვის გასაადვილებლად მე გამოვყოფ მარშრუტირებულ კომპონენტებს და ჩავდებ ამ საქაღალდეში. ჩემთვის მარშრუტიზებული კომპონენტები უფრო მეტია ვიდრე მხოლოდ კომპონენტი, რადგან ისინი წარმოადგენენ გვერდებს და აქვთ მარშრუტები. შემდეგ ისინი მოვათავსე "Views" - ში, როდესაც გვერდს გადახედავთ, გადადით ამ საქაღალდეზე.

საჭიროებისამებრ შეგიძლიათ დაამატოთ სხვა საქაღალდეები, მაგ. B. ფილტრები ან მუდმივები, 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
  • აპლიკაცია
  • VCard

თუ თქვენ გაქვთ ჭკვიანი კომპონენტი, რომელიც იყენებს BaseCard- ს და უმატებს მას ზოგიერთ მეთოდს, შეგიძლიათ დაასახელოთ თქვენი პროექტის მიხედვით, მაგალითად:

  • ProfileCard
  • საქონლის ბარათი
  • ახალი ამბების ბარათი

თუ თქვენი ჭკვიანი კომპონენტი არ არის მხოლოდ ”უფრო ჭკვიანი” BaseCard მეთოდებით, უბრალოდ გამოიყენეთ ნებისმიერი სახელი, რომელიც შეესაბამება თქვენს კომპონენტს Base (ან აპიდან ან V- ით) დაწყების გარეშე. მაგალითი:

  • დაფა სტატისტიკა
  • Ძიების შედეგები
  • Მომხმარებლის პროფილი

დასახელების ეს კონვენცია მოდის ოფიციალური სახელმძღვანელოდან Vue.j, რომელიც ასევე შეიცავს დასახელების კონვენციებს!

დასახელების წესი

აქ მოცემულია რამდენიმე კონვენცია ოფიციალური Vue.j სტილის სახელმძღვანელოდან, რომელიც გჭირდებათ თქვენი პროექტის კარგად ორგანიზებისთვის:

  • კომპონენტის სახელები ყოველთვის უნდა შედგებოდეს მრავალი სიტყვისგან, გარდა root app კომპონენტებისა. მაგალითად, "ბარათის" ნაცვლად გამოიყენეთ "UserCard" ან "ProfileCard".
  • თითოეული კომპონენტი უნდა იყოს საკუთარ ფაილში.
  • ერთი ფაილის კომპონენტების ფაილების სახელები ან ყოველთვის უნდა იყოს PascalCase ან ყოველთვის ქაბაბი. გამოიყენეთ "UserCard.vue" ან "user-card.vue".
  • კომპონენტები, რომლებიც გამოიყენება მხოლოდ ერთხელ თითო მხარეზე, უნდა დაიწყოს პრეფიქსით "The", რომ მხოლოდ ერთი იყოს. მაგალითად, სანავიგაციო ზოლის ან ქვედა კოლონტიტულისთვის გამოიყენეთ TheNavbar.vue ან TheFooter.vue.
  • ბავშვის კომპონენტებს უნდა ჰქონდეთ პრეფიქსი მათი მშობლის სახელით. მაგალითად, თუ გსურთ "UserCard" - ში გამოიყენოთ "Photo" კომპონენტი, დაარქვით მას "UserCardPhoto". ეს უკეთ წაკითხვისთვისაა, რადგან საქაღალდეში არსებული ფაილები ჩვეულებრივ ანბანური დალაგებულია.
  • ყოველთვის გამოიყენეთ სრული სახელი თქვენი კომპონენტების სახელწოდების აბრევიატურას ნაცვლად. მაგალითად, არ გამოიყენოთ "UDSettings", არამედ "UserDashboardSettings".

Vue.js ოფიციალური სახელმძღვანელო

ხართ თუ არა გამოცდილი Vue.js– ით თუ დამწყები, ამ Vue.js სტილის სახელმძღვანელო უნდა წაიკითხოთ. იგი შეიცავს უამრავ რჩევას და ასევე სახელდების კონვენციებს. იგი შეიცავს უამრავ მაგალითს, რაც უნდა გაკეთდეს და არ გაკეთდეს.

თუ მოგეწონათ ეს პოსტი, გთხოვთ, რამდენჯერმე დააწკაპუნოთ ქვემოთ მოცემული ჭორების ღილაკზე თქვენი მხარდაჭერის საჩვენებლად! ასევე, თავისუფლად შეგიძლიათ კომენტარი გააკეთოთ და რაიმე სახის უკუკავშირი მოგცეთ. არ დაგავიწყდეს გამომყევი!

გსურთ ნახოთ მეტი ნივთი, როგორიც არის ეს? დამეხმარე პატრეონზე