CLI 3.0 Vue bu erda!

So'nggi bir necha oylar davomida biz Vue CLI-ning yangi avlodi - Vue ilovalari uchun standart qurilish moslamalari zanjiri ustida juda ko'p ishladik. Bugun biz Vue CLI 3.0 versiyasini va u bilan birga keladigan barcha ajoyib xususiyatlarni e'lon qilishdan mamnunmiz.

O'rnatilgan boy xususiyatlar

Vue CLI 3 - bu oldingi versiyasidan mutlaqo boshqa hayvon. Qayta yozishning maqsadi ikki karra:

  1. Zamonaviy frontend vositalarini sozlashda charchoqni kamaytirish, ayniqsa bir nechta vositalarni birlashtirishda;
  2. Imkon qadar iloji boricha asboblar qatoriga ilg'or tajribalarni qo'shing, shunda u har qanday Vue ilovasi uchun odatiy holga aylanadi.

Asosiysi, Vue CLI veb-paketning yuqori qismida oldindan tuzilgan sozlashni ta'minlaydi. Biz ishlab chiqaruvchilar tomonidan o'tkaziladigan konfiguratsiyani kamaytirishga intilamiz, shuning uchun har qanday Vue CLI 3 loyihasi tashqaridan qo'llab-quvvatlanadi. uchun:

  • Oldindan tuzilgan veb-sahifaning xususiyatlari, masalan, modulni almashtirish, kodni ajratish, daraxtni silkitib qo'yish, samarali uzoq muddatli keshlash, xatolarni qoplash va hk.
  • ES2017 transpilizatsiyasi (shuningdek, ob'ektlarni dam olish va dinamik ravishda import qilish kabi keng tarqalgan takliflar) va Babel 7 + oldindan o'rnatilgan-vv orqali foydalanishga asoslangan poligrafni quyish.
  • PostCSS-ni qo'llab-quvvatlash (avtoprefikser sukut bo'yicha yoqilgan) va barcha CSS-ning dastlabki protsessorlari
  • Avtomatik ravishda yaratilgan HTML va aktiv havolalari va oldindan yuklash / oldindan yuklash manbalariga oid ko'rsatmalar mavjud
  • .Env fayllari orqali muhit va kaskadli o'zgaruvchilar
  • Zamonaviy usul: mahalliy ES2017 kema + parallel to'plam va eski to'plam parallel ravishda (quyida batafsil)
  • Ko'p sahifali rejim: bir nechta HTML / JS kirish nuqtalariga ega dasturni yarating
  • Maqsadlarni yaratish: kutubxonaga yoki mahalliy veb-komponentlarga bitta faylli tarkibiy qismlarni yaratish (quyida tafsilotlar)

Bundan tashqari, siz yangi loyihani yaratishda aralashtirishingiz va moslashishingiz mumkin bo'lgan ko'plab ixtiyoriy integratsiyalar mavjud, masalan:

  • TypeScript
  • PWA
  • Vue Router va Vuex
  • ESLint / TSLint / Prettier
  • Jest yoki Mocha orqali birlik sinovlari
  • E2E Cypress yoki Nightwatch orqali sinov
O'zingiz xohlagancha yoki ozroq tanlang.

Eng muhimi shundaki, Vue CLI yuqoridagi barcha funktsiyalar yaxshi birlashtirilganligiga ishonch hosil qiladi, shunda siz sanitariya-tesisat qilmasligingiz kerak.

Chiqarishga hojat yo'qligi bilan sozlanishi

Yuqorida sanab o'tilgan barcha funktsiyalar sizning nol konfiguratsiyangiz bilan ishlaydi: siz loyihani Vue CLI 3 orqali ishlatsangiz, u Vue CLI ish vaqti xizmatini (@ vue / cli-service), tanlangan xususiyat plaginlarini o'rnatadi va kerakli konfiguratsiya fayllarini yaratadi. siz. Ko'pgina hollarda, siz faqat kodni yozishga e'tibor qaratishingiz kerak.

Shu bilan birga, asosiy qaramliklarni mavhumlashtirishga urinib ko'radigan CLI vositalari ko'pincha ushbu qaramliklar uchun ichki konfiguratsiyani nozik chizish qobiliyatidan mahrum qiladi - bunday o'zgarishlarni amalga oshirish uchun foydalanuvchi odatda "chiqarib tashlashi" kerak, ya'ni xom konfiguratsiyani tekshirish O'zgartirish kiritish uchun loyiha. Buning salbiy tomoni shundaki, siz chiqarganingizdan so'ng, o'zingizning ixtiyoringiz bor va kelajakda asbobning yangi versiyasiga yangilana olmaysiz.

Biz konfiguratsiyaga quyi darajadagi kirish huquqini olishning muhimligini tan olamiz, lekin bundan tashqari, chiqadigan foydalanuvchilarni orqada qoldirishni istamaymiz, shuning uchun siz konfiguratsiyaning deyarli barcha qirralarini chiqarib tashlamasdan turib o'zgartirishingiz mumkin bo'lgan usulni aniqladik. .

Babel, TypeScript va PostCSS, Vue CLI kabi uchinchi tomon integratsiyalari uchun ushbu vositalar uchun mos keladigan konfiguratsiya fayllari hurmat qilinadi. Veb-sahifa uchun foydalanuvchi oddiy sozlamalarni yakuniy konfiguratsiyaga birlashtirish uchun veb-to'plamni birlashtirishi yoki aniq yuklab olishi mumkin bo'lgan plaginlar va plaginlarni veb-paket zanjiri orqali aylantirishi mumkin. Bunga qo'shimcha ravishda, Vue CLI sizga vue inspect buyrug'i bilan veb-paketning ichki tuzilishini tekshirishga yordam beradi. Eng yaxshi tomoni shundaki, siz kichkina chayqalishlar qilish uchun bo'shashishingiz shart emas - siz CLI xizmatini va plaginlarni tuzatish va yangi xususiyatlarni olish uchun yangilashingiz mumkin.

Html-webpack-plagin uchun imkoniyatlarni sozlash uchun veb-veb-zanjirdan foydalanish

Kengaytiriladigan plagin tizimi

Biz Vue CLI-ning jamiyat qurishi mumkin bo'lgan platforma bo'lishini xohlaymiz, shuning uchun biz birinchi kundan boshlab yangi versiyasini plagin arxitekturasi bilan yaratdik. Vue CLI 3 plagini juda kuchli bo'lishi mumkin: u dasturni o'rnatish davrida qaramlik va fayllarni kiritishi, shuningdek veb-to'plam konfiguratsiyasini sozlashi yoki CLI xizmatiga qo'shimcha buyruqlarni kiritishi mumkin. Ko'pgina o'rnatilgan Integratsiyalashgan singari integratsiya barcha plaginlar uchun mavjud bo'lgan bir xil plagin API-dan foydalangan holda plaginlar sifatida amalga oshiriladi. Agar siz o'z plaginingizni yozmoqchi bo'lsangiz, plagin dasturining qo'llanmasini ko'rib chiqing.

Vue CLI 3-da bizda endi "andozalar" yo'q - buning o'rniga siz o'zingizning plaginlaringiz va parametrlaringizni boshqa ishlab chiquvchilar bilan baham ko'rish uchun o'zingizning masofadan turib oldindan sozlashingiz mumkin.

Grafik foydalanuvchi interfeysi

Guillaume CHAU-ning ajoyib ishi tufayli, Vue CLI 3 to'la-to'kis GUI bilan ishlaydi, bu nafaqat yangi loyihalarni yaratishga, balki plaginlar va loyihalar ichidagi vazifalarni boshqarishga imkon beradi (ha, bu quyida keltirilgan xayoliy veb-to'plamning boshqaruv paneli bilan birga keladi). ):

Buning uchun Electron kerak emas - uni
Eslatma: Vue CLI 3 barqaror sifatida chiqarilgan bo'lsa ham, UI hali ham beta-versiyada. Bu erda va u erda bir nechta savollarni kuting.

Tezkor prototiplash

Siz biron-bir kodni yozmasdan oldin npm o'rnatilishini kutish juda qiziq emas. Ba'zan bizga ilhom uchqunini olish uchun ish muhitiga shu qadar tez kirish kerak. Vue CLI 3 ning vue service buyrug'i bilan Vue bitta faylli komponentlari yordamida prototiplashni boshlash uchun bajarishingiz kerak bo'lgan narsalar:

Prototiplarni ishlab chiquvchi server standart dastur bilan bir xil sozlamalar bilan ta'minlanadi, shuning uchun prototip * .vue faylini to'g'ri ishlangan loyihaning src papkasiga osongina ko'chirishingiz mumkin.

Ko'p qirrali va kelajakka tayyor

Zamonaviy rejim

Babel bilan biz ES2015 + tilidagi barcha yangi xususiyatlardan foydalana olamiz, ammo bu eski brauzerlarni qo'llab-quvvatlash uchun transpil-polietilen to'plamlarni jo'natishimiz kerakligini anglatadi. Ushbu transpillangan to'plamlar ko'pincha original ES2015 + kodiga qaraganda ko'proq verbaldir, shuningdek ularni tahlil qiladi va sekin ishlaydi. Bugungi kunda zamonaviy brauzerlarning aksariyati mahalliy ES2015 + uchun munosib qo'llab-quvvatlanishini hisobga olsak, bu eski brauzerlarni qo'llab-quvvatlashimiz kerakligi sababli bu brauzerlarga chiqindilarni tashish og'irroq va unchalik samarasiz.

Vue CLI sizga ushbu muammoni hal qilishga yordam beradigan "Zamonaviy rejim" ni taklif qiladi. Quyidagi buyruq bilan ishlab chiqarish uchun qurilishda:

vue-cli-service build -modern

Vue CLI ilovangizning ikkita versiyasini ishlab chiqaradi: biri ES modullarini qo'llab-quvvatlovchi zamonaviy brauzerlarga mo'ljallangan zamonaviy to'plam va eski brauzerlarga mo'ljallangan eski to'plam.

Shunisi qiziqki, joylashtirish uchun maxsus talablar yo'q. Yaratilgan HTML-fayl avtomatik ravishda Filipp Uoltonning ajoyib postida muhokama qilingan usullardan foydalanadi:

  • Zamonaviy to'plam uni qo'llab-quvvatlaydigan brauzerlarda