Vue.js 2.5 yayınlandı ve bu ekip, Vue ile küçük programlar geliştirmek için bir çerçeve geliştirdi
Youda Weibo'nun "TypeScript için bazı iyileştirmeler sunacağından" bir hafta sonra, Seviye E kod adlı Vue.js 2.5 rüzgarla bize geldi. Sürüm Notlarından da görebileceğiniz gibi, Vue.js 2.5, daha iyi TypeScript entegrasyonuna, daha iyi hata işlemeye ve ortamla hiçbir ilgisi olmayan tek dosyalı bileşenler ve sunucu tarafı işlemedeki işlevsel bileşenler için daha iyi desteğe sahiptir. detaylar aşağıdaki gibidir:
Daha iyi TypeScript entegrasyonu
TypeScript ekibinin yardımı sayesinde, 2.5 büyük ölçüde geliştirilmiş bir tür bildirimi sağlar:
-
Varsayılan Vue API kullanılırken, bunun için uygun tip çıkarımı kullanılabilir. Tek dosya bileşenlerinde de çalışabilir!
-
Bileşenin props seçeneğine bağlı olarak, buradaki props girdisini çıkarın.
-
en önemlisi, Bu iyileştirmeler aynı zamanda saf JavaScript kullanıcılarına da çok fayda sağlıyor! VSCode ve harika Vetur uzantısını kullanırsanız, büyük ölçüde iyileştirilmiş otomatik tamamlama önerileri alırsınız ve hatta Vue bileşenlerinde saf JavaScript kullanırken giriş istemleri bile alabilirsiniz! Bunun nedeni, vue-language-server'ın Vue bileşenlerini analiz etmekten sorumlu dahili paket olmasıdır ve kodunuz hakkında daha fazla bilgi almak için TypeScript derleyicisini kullanabilirsiniz. Ek olarak, dil sunucusu protokolünü destekleyen herhangi bir düzenleyici, benzer işlevleri sağlamak için vue-dil-sunucusunu kullanabilir.
Not: TypeScript kullanıcıları, tip bildirimleriyle uyumlu olmak için aşağıdaki paketleri en son sürüme güncellemelidir: vue-router, vuex, vuex-router-sync ve vue-class-component.
Daha iyi hata işleme
2.4 ve önceki sürümlerde, uygulamadaki beklenmedik hataları işlemek için genellikle genel config.errorHandleroption kullanırız. Oluşturma işlevindeki hataları işlemek için renderError bileşen seçeneğine de sahibiz. Bununla birlikte, uygulamanın belirli bölümlerindeki genel hataları ele alacak bir mekanizmamız yok.
2.5'te, yeni bir errorCaptured hook'u tanıttık. Bu kancaya sahip bir bileşen, alt bileşen ağacındaki (kendini hariç tutarak) tüm hataları yakalar (zaman uyumsuz geri çağırmalarda çağrılanlar hariç). React'e aşina iseniz, bu, React 16'da tanıtılan hata sınırı ile uyumludur (https://reactjs.org/blog/2017/07/26/error-handling-in-react-16.html#introducing-error-boundaries) Konsept benzer. Kanca, genel errorHandler ile aynı parametreleri alır. Hataları incelikle işlemek ve görüntülemek için bu kancayı kullanabilirsiniz (https://gist.github.com/yyx990803/9bdff05e5468a60ced06c29c39114c6b#error-handling-with-errorcaptured-hook).
SFC'deki işlevsel bileşenler için daha iyi destek
Vue-loader kullanın > = 13.3.0 ve Vue 2.5, * .vue dosyalarında tek dosya bileşenleri olarak tanımlanan işlevsel bileşenler artık doğru şablon derlemesini, kapsamlı CSS'yi ve çalışırken yeniden yükleme desteğini alabilir. Bu, performans optimizasyonu için yaprak bileşenlerini işlevsel olanlara dönüştürmeyi kolaylaştırır.
Ortamdan bağımsız sunucu tarafı işleme
Varsayılan vue-server-renderer yapısı bir Node.js ortamını varsayar, bu da onu bazı JavaScript çalışma zamanlarında (php-v8js veya Nashorn gibi) kullanılamaz kılar. 2.5'te, bir tarayıcıda veya saf bir JavaScript motorunda kullanılabilen, ortamdan bağımsız bir vue-server-renderer sürümünü yayınladık. Bu, Vue sunucu tarafı oluşturmayı doğrudan PHP sürecinde kullanmak gibi ilginç stratejiler açabilir.
Benzer şekilde, v-on, v-model, kapsamlı yuva, sağlama / enjeksiyon vb. Dahil olmak üzere diğer API iyileştirmeleri hakkında bilgi edinmek için tam sürüm notlarını kontrol etmeniz önerilir.
Vue 2.5.0 kaynak kodu indirmesi: https://codeload.github.com/vuejs/vue/zip/v2.5.0
Vue.js, 2013'te piyasaya sürülmesinden bu yana aşamalı bir JavaScript çerçevesidir. Özlü gramer tasarımı, hafif ve hızlı özellikleri teknik topluluk tarafından sevilmiştir.Yerinde ve yurtdışında, örneğin Are You Hungry? Gibi yaygın olarak kullanılmış ve genişletilmiştir. Açık kaynak bileşen kitaplığının Element UI'si Vue tarafından geliştirildi ve Alibaba'nın Weex ve Vue de işbirliği yapıyor.
Bugün, Meituan-Dianping tarafından geliştirilen ve WeChat uygulamacıkları geliştirmek için Vue.js kullanan bir ön uç çerçevesini tanıtalım mpVue . Bu çerçeveyi kullanarak, geliştiriciler eksiksiz bir Vue.js geliştirme deneyimi elde edecek ve aynı zamanda H5 ve uygulama kodunu yeniden kullanma yetenekleri sağlayacaktır. H5 projesini küçük bir programa dönüştürmek istiyorsanız ya da küçük bir program geliştirdikten sonra onu H5'e dönüştürmek istiyorsanız mpVue çok uygun bir çözüm olacaktır.
Geliştirme verimliliğini artırmak ve geliştirme deneyimini iyileştirmek için, küçük programlar geliştirmek için Vue kullanan bir tekerlek oluşturduk.
Mini Program Geliştirmenin Özellikleri
WeChat uygulaması, basit bir geliştirme yöntemi önerir ve çok sayfalı birleştirme yoluyla hafif ürün işlevlerini tamamlar. Uygulama çevrimdışı paket biçiminde yerel pakete indirilir, WeChat istemcisi aracılığıyla yüklenir ve başlatılır, geliştirme özellikleri basittir, teknoloji paketi eksiksizdir ve geliştirme sistemi bağımsızdır.Native ve H5'in gölgesine sahiptir, ancak hiçbir şekilde aynı değildir.
Uygulamanın kendisi, karmaşık uygulamalar geliştirmek için resmi olarak tavsiye edilmeyen basit bir mantıksal görünüm katmanı çerçevesi olarak konumlandırılmıştır, ancak iş gereksinimlerinin düzene sokulması zordur. Karmaşık uygulamaların, bileşenler ve modülerleştirme, otomatik oluşturma ve entegrasyon, kod yeniden kullanımı ve geliştirme verimliliği gibi geliştirme yöntemleri için daha yüksek gereksinimleri vardır, ancak küçük program geliştirme özellikleri, yeteneğin bu bölümünü büyük ölçüde sınırlar. Yukarıdaki sorunları çözmek ve daha iyi bir geliştirme deneyimi sağlamak için, Vue.js kullanarak WeChat uygulamalarını geliştirmek için mpVue oluşturduk.
MpVue nedir
mpVue, küçük programlar geliştirmek için konumlandırılmış bir ön uç geliştirme çerçevesidir. Temel amacı, geliştirme verimliliğini artırmak ve geliştirme deneyimini iyileştirmektir. Bu çerçeveyi kullanarak, geliştiricilerin küçük program geliştirme özelliklerini anlamasına gerek yoktur, başlamak için yalnızca Vue.js'nin temel sözdizimine aşina olmaları gerekir. Çerçeve, eksiksiz bir Vue.js geliştirme deneyimi sağlar. Geliştiriciler, Vue.js kodunu yazar ve mpVue, bunu küçük programlara ayrıştırır ve bunların doğru şekilde çalışmasını sağlar. Ek olarak, çerçeve, geliştiricilere CLI aracı aracılığıyla Hızlı Başlangıç örnek kodu sağlar.Geliştiricilerin çalıştırılabilir bir proje elde etmek için yalnızca basit bir komutu yürütmesi gerekir.
Neden mpVue
Küçük program dahili testinin başlangıcında, H5 ile kıyaslanan bir ürün uygulamasını hızla yinelemeyi planlıyoruz. Temel talepler hızlı uygulama, kodun yeniden kullanımı, düşük maliyet ve yüksek verimliliktir. Daha sonra, iş senaryoları, teknoloji seçimi ve küçük program geliştirme yöntemleriyle birleştirilen bir dizi küçük programın yapımını gerçekleştirdik ve geliştirme aşamasında karşılaşılan ana sorunları özetledik:
Bileşenleştirme mekanizması mükemmel değil;
Kod çoğullama yeteneğinin olmaması;
Uygulama çerçevesi ve ekip teknolojisi yığını organik olarak birleştirilemez;
Mini programların öğrenme maliyeti yeterince düşük değil.
Özellikle şu şekilde somutlaştırılmıştır:
-
Bileşen mekanizması: Mini program mantığı ve görünüm katmanı kodu birbirinden ayrılır. Ortak bileşenler, ayıklamadan sonra tek bir dosya girişinde toplanamaz. Bileşenlerin sırasıyla görünüm katmanında ve mantık katmanında tanıtılması gerekir, bu da bakım kolaylığı açısından zayıftır; bileşenlerin ad alanı mekanizması yoktur ve olay geri çağrıları genel işlevler olarak ayarlanmalıdır. Tasarım, çakışmaları adlandırma riskine sahiptir ve veri kapsülleme güçlü değildir. Geliştiriciler, ES modülleri aracılığıyla bir kez içe aktarılabilen dostça bir kod düzenleme yöntemine ihtiyaç duyar; bileşen verileri iyi bir şekilde kapsüllenmiştir. Olgun bir bileşen mekanizması, mühendislik gelişimi için çok önemlidir.
-
Çok terminalli çoklama: Mevcut H5 ürünlerini küçük program uygulamalarına veya tam tersine dönüştüren iki yaygın iş senaryosu vardır. Verimlilik açısından, geliştiriciler kodu yeniden kullanarak geliştirmeyi tamamlamayı umuyor, ancak küçük program geliştirme çerçevesi bunu yapamıyor. H5 kodunu statik kod analizi ile küçük programlara dönüştürmeye çalıştık, ancak sadece görünüm katmanı dönüşümü yapıldı, bu da daha fazla fayda sağlayamadı. Çoklu terminal kod yeniden kullanımı daha olgun çözümler gerektirir.
Öte yandan, küçük program geliştirme yöntemi H5'e benzer, bu nedenle kodun H5 ile yeniden kullanılmasını düşünüyoruz. Aynı zamanda, ekibin teknoloji yığını seçimini takiben, Vue.js'yi küçük program geliştirme spesifikasyonu olarak belirledik. Küçük programlar geliştirmek için Vue.js kullanmak, aşağıdaki geliştirme verimliliğini doğrudan artıracaktır:
H5 kodu, minimum değişiklikle küçük programlarda yeniden kullanılabilir;
Küçük programların ve H5 bileşenlerinin yeniden kullanımını gerçekleştirebilen küçük programlar geliştirmek için Vue.js bileşen mekanizmasını kullanın;
Teknoloji yığınının birleştirilmesinden sonra, mini programların öğrenme maliyeti azalır ve geliştiricilerin H5'ten mini programlara geçerken daha fazla öğrenmesine gerek kalmaz;
Kod bakım maliyetleri azalır, Vue.js kodu, tüm ön uçların geliştirme ve bakıma doğrudan katılmasına olanak tanır.
Vue.js neden? Bu, ekip teknolojisi yığını seçimine bağlıdır.Yeni seçimlerin tanıtımı, teknoloji yığınının birleştirilmesine ve geliştirme verimliliğinin iyileştirilmesine aykırıdır ve geliştirme aracı hizmet işinin asıl amacına aykırıdır.
MpVue'nun evrimi
MpVue'nun oluşumu iş senaryoları ve gereksinimlerinden kaynaklandı ve nihai plan üç aşamada belirlendi.
-
İlk aşama: İlk seferde kod geliştirmenin verimliliğini artırmak için görünüm düzeyinde bir kod dönüştürme aracı uyguladık. H5 görünüm katmanı kodunu, HTML etiketi eşleme, Vue.js şablonu ve stil dönüştürme dahil olmak üzere küçük program koduna dönüştürerek, bu hedef kod üzerinde ikincil geliştirme gerçekleştirilir. Sınırlı kod yeniden kullanımı başardık, ancak bileşen geliştirme ve küçük program öğreniminin maliyeti etkili bir şekilde iyileştirilmedi.
-
ikinci sahne: Kod bileşenleştirme mekanizmasını geliştirmeye odaklanıyoruz. Kod organizasyon formu, Vue.js bileşen spesifikasyonuna referansla tasarlanır ve kod, kod dönüştürme aracı aracılığıyla küçük programlara ayrıştırılır. Dönüştürme aracı temel olarak veri senkronizasyonu, yaşam döngüsü ilişkilendirmesi ve bileşenler arasındaki ad alanı sorunlarını çözer. Sonunda, Vue.js sözdiziminin bir alt kümesini uyguladık, ancak daha fazla özellik uygulamak veya Vue.js sürümüyle yinelemek istersek, iş yükünü tahmin etmek zorlaşır ve hiç bitmeyeceği duygusu vardır.
-
Üçüncü aşama: Amacımız, Vue.js sözdiziminin tamamını desteklemek ve küçük programlar geliştirmek için Vue.js'yi kullanma amacına ulaşmaktır. Ve Vue.js dilbilgisini desteklemek için Vue.js RunTime'ı sunarak, böylece insan eti dilbilgisi uyarlamasından kaçınarak. Şimdiye kadar, küçük programlar geliştirmek için Vue.js'yi kullanma amacımızı tamamladık. Teknoloji yığınlarını birleştirme, bileşenli geliştirme, çoklu terminal kod yeniden kullanımı, öğrenme maliyetlerini düşürme ve geliştirme verimliliğini artırma hedeflerine daha iyi ulaşılır.
mpVue tasarım fikirleri
Hem Vue.js hem de apletler tipik mantıksal görünüm katmanı çerçeveleridir. Mantıksal katman ile görünüm katmanı arasındaki çalışma modu şudur: veri değişiklikleri sürücü görünümü güncellemelerini; görüntüleme etkileşimi olayları tetikler ve olay yanıtı işlevleri, şekilde gösterildiği gibi görünüm güncellemelerini tekrar tetiklemek için verileri değiştirir 1 gösterilmektedir.
Şekil 1 Mini Program Uygulama Prensibi
Vue.js ve Mini Programların tutarlı çalışma prensibi ışığında, Mini Programları geliştirme amacına ulaşmak için Mini Programların işlevlerini Vue.js'de barındırmayı ve veri değişikliklerini doğru zamanda Mini Programlara senkronize etmeyi düşünüyoruz. Bu şekilde, enerjimizi Vue.js'ye odaklayabilir ve karşılık gelen küçük program kodunu Vue.js'ye göre yazabiliriz. Küçük program, görünüm katmanının görüntülenmesinden sorumludur. Tüm iş ve mantık, Vue.js'ye yakınsanır. Vue.js verileri değiştirildikten sonra Şekil 2'de gösterildiği gibi uygulama ile senkronize edin. Bu sayede Vue.js yolunda küçük programlar geliştirme yeteneği kazandık. Bu amaçla planı şu şekilde tasarladık:
Şekil 2 mpVue uygulama prensibi
Vue kodu:
Uygulama sayfasını Vue.js uygulaması olarak yazın;
Üst-alt bileşen ilişkisi, Vue.js geliştirme belirtimine göre gerçekleştirilir.
Mini program kodu:
Görünüm katmanı şablonunu küçük program geliştirme özelliklerine göre derleyin;
Yaşam döngüsü işlevlerini yapılandırın ve veri güncelleme çağrılarını ilişkilendirin;
Vue.js verilerini uygulama veri modeliyle eşleyin.
Ve bu temelde, aşağıdaki mekanizmalar eklenmiştir:
Vue örneği, Mini Program Sayfası örneğiyle ilişkilidir;
Mini program ve Vue yaşam döngüsü, mini program yaşam döngüsünde Vue yaşam döngüsünü tetikleyebilen bir eşleme ilişkisi kurar;
Mini program olayları bir proxy mekanizması oluşturur ve olay proxy işlevinde karşılık gelen Vue bileşeni olay yanıtını tetikler.
Bu mekanizmanın özetlenmesi çok basittir, ancak uygulanması oldukça karmaşıktır. Spesifik uygulamayı açıklamadan önce, okuyucuların aşağıdaki gibi bazı soruları olabilir:
Vue.js ve uygulamalarını aynı anda korumak için kod uygulamasının iki sürümünü yazmam gerekir mi?
Uygulama, görünüm katmanının görüntülenmesinden sorumludur.Vue.js'nin görünüm katmanına hala ihtiyaç var mı ve buna ihtiyaç yoksa ne yapılmalı?
Yaşam döngüsünden nasıl geçilir ve veri senkronizasyon güncellemesi nasıl gerçekleştirilir?
Yukarıdaki sorular, mpVue çerçevesinin temel içeriğini içerir ve size aşağıda dikkatlice anlatacağım. Her şeyden önce, mpVue verimliliği artırmak için doğmuştur.Küçük program kodunu otomatik olarak üretme yeteneği sağlar. Küçük program kodu, Vue.js koduna dayalı olarak oluşturulur ve aynı anda iki kod seti geliştirmeye gerek yoktur.
Vue.js görünüm katmanı oluşturma işlemi, Render yöntemiyle tamamlanırken, bellekte sanal bir DOM tutulurken, mpVue'nun görünüm katmanı oluşturmayı tamamlamak için Vue.js kullanması gerekmez, bu nedenle görünüm katmanı oluşturmayı engellemek için Render yöntemini değiştirdik. Kaynak koduna aşina olan okuyucular, Vue RunTime'ın birden fazla platform uygulamasına sahip olduğunu bilir, ortak web platformumuza ek olarak Weex de vardır. Şu andan itibaren, yeni bir mpVue platformu ekledik.
Üçüncü soruya bakıldığında, yaşam döngüsü ve veri senkronizasyonu mpVue çerçevesinin ruhudur.Vue.js ve apletlerin verileri birbirinden izole edilmiştir ve her birinin farklı bir güncelleme mekanizması vardır. mpVue, yaşam döngüsü ve olay geri çağırma işlevlerini keser ve Vue.js veri güncellemelerini tetiklediğinde veri senkronizasyonunu gerçekleştirir. Mini programlar, kullanıcılara görünüm katmanı aracılığıyla sunulur ve etkinlikler aracılığıyla kullanıcı etkileşimlerine yanıt verir. Vue.js, arka planda veri değişikliklerini ve mantığı korur. Gördüğünüz gibi, veri güncellemesi uygulamadan kaynaklanır ve Vue.js'den işlenir ve ardından Vue.js verileri değiştikten sonra uygulama ile senkronize edilir. Veri senkronizasyonunu elde etmek için mpVue, Vue.js RunTime uygulamasını değiştirdi ve Vue.js'nin yaşam döngüsünde uygulama verilerinin güncellenmesi mantığını ekledi.
Kullanıcı etkileşimiyle tetiklenen veri güncellemesi, olay proxy mekanizması aracılığıyla yapılır. Vue.js kodunda, olay yanıtı işlevi, bileşenin yöntem yöntemine karşılık gelir ve Vue.js, bağlam ortamını otomatik olarak korur. Ancak, uygulamada benzer bir mekanizma yoktur ve Vue.js yürütme ortamı, tam olarak uygulamanın görünüm katmanına karşılık gelen gerçek zamanlı bir sanal DOM'u koruduğu için. Uygulama bileşeni düğümünde bir olayı tetikledikten sonra, sanal DOM'daki ilgili düğüm bulunduğu sürece, karşılık gelen olayın tetiklemesinin tamamlanmadığını düşünüyoruz. Vue.js olay yanıtı bir veri güncellemesini tetiklerse, yaşam döngüsü işlevi güncellemesi otomatik olarak tetiklenir ve uygulama verileri bu işlevde eşzamanlı olarak güncellenir ve veri senkronizasyonu sağlanır.
MpVue nasıl kullanılır
MpVue çerçevesinin kendisi birden fazla npm modülünden oluşur. Giriş modülü bağımlılıkları ele almıştır. Geliştiricilerin yerel proje oluşturmayı tamamlamak için yalnızca aşağıdaki kodu çalıştırması gerekir.
# Vue-cli'yi yükle
$ npm yükleme --global vue-cli
# Şu anda bir intranet adresi olan ve geçici olarak açık olan şablon projeye dayalı yerel bir proje oluşturun
$ vue init "bitbucket: xxx.meituan.com: hfe / mpvue-quickstart" - projemi kopyala
# Bağımlılıkları yükleyin ve otomatik derlemeyi başlatın
$ cd projem
$ npm yükleme
$ npm geliştirme devi
Yukarıdaki komutu çalıştırdıktan sonra, uygulama hedef kodu mevcut projenin uzak alt dizininde oluşturulacaktır Yerel hata ayıklamayı ve önizlemeyi başlatmak için dist dizini yüklemek için uygulama geliştirici aracını kullanın.
Örnek proje, Vue.js şablon proje spesifikasyonunu takip eder ve Vue.js komut satırı aracı vue-cli tarafından oluşturulur. Kod organizasyonu, resmi Vue.js örneğiyle tutarlıdır. Uygulama için Vue.js RunTime ve Webpack yükleyicisini özelleştirdik ve bağımlılığın bu kısmı da projeye dahil edildi.
Küçük programların geliştirilmesinde iki ortak kod yeniden kullanım senaryosunu hedefleyen mpVue çerçevesi, geliştiricilere çözümler ve teknik destek sağlar.Geliştiricilerin yalnızca bu kılavuz altında proje yapılandırması ve dönüşümünü gerçekleştirmesi gerekir.
Uygulamayı H5'e dönüştür
Küçük programlar geliştirmek için doğrudan Vue.js spesifikasyonunu kullanın, kodun kendisi H5'ten farklı değildir, belirli kod farklılıkları platform API bölümünde yoğunlaşacaktır. Ek olarak, belirgin bir değişiklik gerekli değildir ve dönüşüm esas olarak aşağıdaki bölümlere ayrılmıştır:
Uygulama platformunun Vue.js çerçevesini standart Vue.js ile değiştirin;
Uygulama platformunun Vue yükleyici yükleyicisini standart Vue yükleyici ile değiştirin;
Mini programı ve H5'in temelindeki API farkını uyarlayın ve dönüştürün.
H5'i uygulamaya dönüştür
Vue.js ile H5'i geliştirdikten sonra, aşağıdakileri tamamlamanız gerekir:
Standart Vue.js'yi, uygulama platformunun Vue.js çerçevesiyle değiştirin;
Standart Vue yükleyici yükleyiciyi uygulama platformunun Vue yükleyicisiyle değiştirin;
Mini programı ve H5'in temelindeki API farkını uyarlayın ve dönüştürün.
Uygulama geliştirme platformunun sağladığı yeteneklere göre, Vue.js'nin söz dizimi özelliklerini büyük ölçüde destekledik, ancak bu aşamada bazı işlevler henüz uygulanmadı.Ayrıntılar için Tablo 1'e bakın.
Tablo 1 mpVue tarafından desteklenmeyen sözdizimi özellikleri
MpVue çerçevesinin amacı, maksimum kod yeniden kullanımı sağlamak için Vue.js aracılığıyla mini program ile H5 geliştirme yöntemi arasında bir ilişki kurmaktır. Ancak, platform farklılıklarının nesnel varlığı nedeniyle (esas olarak uygulama mekanizmalarındaki ve temeldeki API yeteneklerindeki farklılıklara odaklanmıştır), kodun% 100 yeniden kullanımını sağlayamıyoruz ve platform farklılıklarının dönüşüm maliyetlerinden kaçınılamaz. Kod yeniden kullanım senaryoları için geliştiricilerin aşağıdaki konulara odaklanmaları ve hazırlıklı olmaları gerekir:
Platformda bulunmayan, dönüştürme ve uyarlama maliyeti gerektirmeyen dilbilgisi özelliklerini kullanmaya çalışın;
Dönüştürme maliyetlerini azaltmak için yuva, filtre vb. Gibi desteklenmeyen dilbilgisi özelliklerini kullanmaktan kaçının;
Belirli bir platform API'si kullanıyorsanız, adaptasyon katmanı arayüzünü soyutlamayı düşünün ve alt katmanı değiştirerek platform dönüşümünü tamamlayın.
mpVue en iyi uygulamaları
Tablo 2'de, farklı çerçevelerin odak noktasını anlamanıza ve iş senaryolarına ve geliştirme alışkanlıklarına dayalı teknik çözümleri belirlemenize yardımcı olmak için WeChat uygulaması, mpVue ve WePY'nin üç geliştirme çerçevesinin temel yeteneklerinin ve özelliklerinin yatay bir karşılaştırmasını yaptık. MpVue'nun küçük program geliştirme için nasıl daha iyi kullanılacağı konusunda, bazı en iyi uygulamaları özetledik.
Tablo 2 Çerçevenin temel yeteneklerinin ve özelliklerinin karşılaştırması
Projeyi oluşturmak için vue-cli komut satırı aracını kullanın ve geliştirme için Vue 2.x sözdizimi belirtimini kullanın;
Çerçeve tarafından desteklenmeyen gramer özelliklerini kullanmaktan kaçının, yani bazı Vue.js gramerler küçük programlarda kullanılamaz, mpVue ve Vue.js özelliklerini paylaşmaya çalışın;
Veri modelini makul bir şekilde tasarlayın ve performans sorunlarından kaçınmak için veri güncellemesi ve işleminin ayrıntılı denetimini sağlayın;
Kodun yeniden kullanımını iyileştirmek için küçük programların bileşen tabanlı geliştirmesini makul şekilde kullanın.
Sonuç
MpVue çerçevesi iş projelerinde uygulanmış ve doğrulanmıştır ve geliştirme belgeleri artık hazırdır ve son hazırlıklar, aplet ve Vue.js ekolojisine katkıda bulunmayı umarak açık kaynaktan önce yapılmaktadır. MpVue'nun asıl amacı, Vue.js geliştiricilerinin küçük programların geliştirilmesine düşük bir maliyetle erişmesine izin vermektir. Yetenekleri ve deneyiminin daha fazla test edilmesi gerekir. Gelecekte, daha fazla geliştiriciye yardımcı olmak için mevcut işlevleri genişletmeye, kullanıcı sorunlarını ve ihtiyaçlarını çözmeye, geliştirme deneyimini optimize etmeye ve çevredeki ekolojik yapıyı iyileştirmeye devam edeceğiz.
MpVue'nun fork Vue.js kaynak kodu aracılığıyla ikincil geliştirme için kullanıldığı ve mp platformunun Vue.js uygulamasının yeni eklendiği açıklanmalıdır. Vue.js sürüm yükseltmesini takip etme yeteneğimizi koruyoruz ve gelecekte daha iyi yetenekler elde etmeyi umuyoruz. Son olarak, sektöre getirilen kolaylık için Vue.js çerçevesine ve WeChat uygulamasına teşekkür etmek isterim.
Yazar:
-
Su Mi, Bayan CSDN;
-
Meituan Dianpingin şarap ve seyahat işletme grubunun ön uç teknik uzmanı Hu Chengquan, şu anda mobil terminallerin ve küçük programların teknik yönüyle ilgileniyor ve kendini küçük programların mühendislik geliştirme ve işletme düzeyindeki uygulamalarına adamıştır.
