aspdotnet vuejs
v3.0.0
Dotnet Core 3.0 + VueJsIde utama proyek ini adalah menyediakan cara mudah untuk memulai proyek baru menggunakan .Net Core WebAPI di sisi server dan VueJs di sisi klien. Untuk tujuan ini, kami menyiapkan konfigurasi utama untuk mengaktifkan integrasi ini menggunakan beberapa utilitas sebagai hot reload dan beberapa perpustakaan frontend sebagai Element-UI dan FontAwesome.
Tujuan kami adalah menyediakan SPA sederhana dengan ketergantungan dan masalah kinerja minimum. VueJs dikonfigurasi dengan Vuex dan Vue Router, tetapi ini dapat dihapus jika Anda merasa tidak memenuhi kebutuhan Anda. Hal yang sama berlaku untuk perpustakaan komponen. Pada template ini, kami juga memberikan contoh fungsi utamanya.
Template ini terinspirasi dan diadaptasi dari proyek Mark Pieszak dan proyek Nordes.
* Pekerjaan Sedang Berlangsung. Tersedia dalam rilis mendatang.
Untuk mengunduh dan menginstal templat, cukup ketik:
> dotnet new -i aspdotnet-vuejsAnda dapat melihat daftar template yang diinstal dengan menggunakan perintah
dotnet new -l.
Kemudian untuk membuat proyek Anda cukup menggunakan perintah di bawah ini di direktori:
> dotnet new vue Ini secara otomatis akan menjalankan dotnet restore . Tapi itu bisa diubah dalam konfigurasi template. Lihat dotnet new vue -h sebelum menggunakan perintah sebelumnya.
Solusi dan nama proyek akan menjadi nama direktori.
Untuk memperbarui instalasi Anda, Anda hanya perlu mengulangi proses instalasi. Selama nomor versinya tidak sama, Anda tidak akan mengalami perilaku yang tidak terduga.
Ketik perintah berikut dari shell:
> dotnet new -u aspdotnet-vuejsUntuk mulai mengembangkan aplikasi Anda, cukup gunakan perintah .Net CLI:
> dotnet run YourAplication.csprojAnda cukup mengetik
dotnet rundi direktori proyek atau mengonfigurasi IDE Anda untuk dijalankan. Dalam kasus terakhir ini jangan lupa untuk meneruskan variabel lingkunganASPNETCORE_ENVIRONMENT=Development.
Ini juga akan menjalankan semua dependensi node seperti npm i .
Aplikasi akan dimulai dalam mode Pengembangan dengan hot reload diaktifkan di
https://localhost:5001danhttp://localhost:5000.
Anda perlu memastikan bahwa wwwroot Anda kosong sebelum memulai proses.
Cukup gunakan cara penerbitan biasa menggunakan .Net Core CLI
> dotnet publish YourProject.csproj -c release -o ./publish/Anda juga dapat menambahkan semua parameter lainnya dari dotnet cli. Silakan kunjungi situs MSDN untuk mengetahui lebih banyak tentangnya.
Ini akan membangun kembali proyek Anda dan kemudian menggunakan target khusus untuk membangun kembali klien Anda (vuejs) dalam mode produksi.
Jika Anda menerbitkan di belakang server NginX, Anda mungkin memerlukan lebih banyak konfigurasi.
Katakanlah Anda memiliki situs dasar http://www.example.com dan dalam konfigurasi NginX Anda ingin memiliki aplikasi dotnet dalam http://www.example.com/myApp . Dalam skenario seperti itu, Anda perlu menyetel uri dasar untuk index.html. Daripada melakukan itu secara manual antara pengembangan dan produksi, Anda memiliki file ./build/base.prod.config.js yang berisi kemungkinan penggantian.
Cukup atur override Anda seperti berikut:
module . exports = {
baseUriPath : '/myApp/'
}Saat Anda mempublikasikannya di lain waktu, jalur tersebut akan diperhitungkan dan jalur uri dasar akan ditetapkan secara otomatis.
Proyek ini sudah menambahkan beberapa kontainer buruh pelabuhan yang tersedia melalui Docker Hub. Anda dapat menarik gambarnya jika Anda mau. Ini akan membuat sampel tersedia secara lokal. Gambar tersebut menggunakan versi Alpine sehingga hanya menggunakan tapak kecil saja.
Karena container di docker cukup populer, Dockerfile juga disertakan dalam folder root template. Jangan lupa .dockerignore di mana beberapa file diabaikan untuk menghindari beberapa file yang tidak diinginkan disalin sebelum dipublikasikan.
Pastikan Anda telah menginstal Docker.
Kode ini memiliki kompresi Gzip bawaan pada HTTPs. Ada baiknya menggunakan kode itu terutama jika Anda menggunakan Kestrel. Jika tidak, jika Anda menggunakan IIS, harap hapus kode spesifik yang ditemukan di Startup.cs . Biasanya, IIS menawarkan modul kompresinya sendiri yang lebih berperforma.
Ada beberapa otomatisasi terkait Components yang tersedia dalam ./ClientApp/components/**/* . Semua file yang dimulai dengan kata kunci base akan dideklarasikan sebagai global dan nama komponen yang akan digunakan di mana saja akan ditentukan dalam bentuk ular tanpa kata kunci base .
Contoh: baseHelloWorld akan didaftarkan sebagai hello-world dan Anda akan dapat menggunakannya di Templat Vue Anda.
< template >
< div >
< hello-world /> works!
</ div >
</ template >Ada contoh nyata dalam proyek untuk komponen kartu untuk setiap halaman. Nama komponennya adalah
baseCard.vue.
Css tidak dibuat saat Anda berada dalam mode pengembangan. Mereka akan dibuat hanya ketika Anda akan menggunakan perintah dotnet publish atau sebagai alternatif, Anda juga dapat mengetik npm run build -- --prod yang akan meluncurkan build produksi dengan minifikasi dan ekstraksi file.
Penting: Saat ini, webpack membersihkan seluruh folder wwwroot dalam proyek .Net. Jadi, jika Anda memiliki file statis, pindahkan file tersebut ke dalam folder ./ClientApp/static/ .
Untuk membantu mempercepat pengembangan, kami menyediakan instalasi pustaka komponen Element-UI. Dokumentasi perpustakaan ini dapat ditemukan di situsnya.
Itu dapat dihapus secara normal di
main.jsjika Anda tidak membutuhkannya.
