Membuat aplikasi Vue.js menggunakan alat Node.js untuk Visual Studio

2025-01-26

Visual Studio mendukung pengembangan aplikasi dengan kerangka kerja Vue.js baik di JavaScript atau TypeScript.

Fitur baru berikut mendukung pengembangan aplikasi Vue.js di Visual Studio:

Dukungan untuk blok Skrip, Gaya, dan Templat dalam file .vue
Pengenalan atribut lang pada file .vue
Vue.js templat proyek dan file

Prasyarat

Anda harus memiliki Visual Studio 2017 versi 15.8 atau yang lebih baru terpasang dan beban kerja Node.js pengembangan.

Penting

Artikel ini memerlukan fitur yang hanya tersedia mulai dari Visual Studio 2017 versi 15.8.

Jika versi yang diperlukan belum diinstal, instal Visual Studio 2019.

Jika Anda perlu menginstal beban kerja tetapi sudah memiliki Visual Studio, buka Alat >Dapatkan Alat dan Fitur..., yang membuka Alat Penginstal Visual Studio. Pilih Node.js beban kerja pengembangan, lalu pilih Ubah.
Untuk membuat proyek ASP.NET Core, Anda harus menginstal ASP.NET dan pengembangan web dan beban kerja pengembangan lintas platform .NET Core.
Anda harus menginstal runtime Node.js.

Jika Anda tidak menginstalnya, instal versi LTS dari situs web Node.js. Secara umum, Visual Studio secara otomatis mendeteksi runtime Node.js yang diinstal. Jika tidak mendeteksi runtime yang diinstal, Anda dapat mengonfigurasi proyek Anda untuk mereferensikan runtime yang diinstal di halaman properti. (Setelah Anda membuat proyek, klik kanan simpul proyek dan pilih properti ).

Membuat proyek Vue.js menggunakan Node.js

Anda dapat menggunakan templat Vue.js baru untuk membuat proyek baru. Penggunaan templat adalah cara paling mudah untuk memulai. Untuk langkah-langkah mendetail, lihat Menggunakan Visual Studio untuk membuat aplikasi Vue.js pertama Anda.

Membuat proyek Vue.js dengan ASP.NET Core dan Vue CLI

Vue.js menyediakan CLI resmi untuk memulai proyek secara cepat. Jika Anda ingin menggunakan CLI untuk membuat aplikasi Anda, ikuti langkah-langkah dalam artikel ini untuk menyiapkan lingkungan pengembangan Anda.

Penting

Langkah-langkah ini mengasumsikan bahwa Anda sudah memiliki beberapa pengalaman dengan kerangka kerja Vue.js. Jika tidak, silakan kunjungi Vue.js untuk mempelajari lebih lanjut tentang kerangka kerja.

Membuat proyek ASP.NET Core baru

Untuk contoh ini, Anda menggunakan Aplikasi inti ASP.NET kosong (C#). Namun, Anda dapat memilih dari berbagai proyek dan bahasa pemrograman.

Membuat proyek Kosong

Buka Visual Studio dan buat proyek baru.

Di Visual Studio 2019, pilih Buat proyek baru di jendela mulai. Jika jendela mulai belum terbuka, pilih File>Jendela Mulai. Ketik aplikasi web, pilih C# sebagai bahasa, lalu pilih ASP.NET Core Empty, lalu pilih Berikutnya. Pada layar berikutnya, beri nama proyek aplikasi klien, lalu pilih Berikutnya.

Pilih kerangka kerja target yang direkomendasikan atau .NET 6, lalu pilih Buat.

Jika Anda tidak melihat templat proyek ASP.NET Core Web Application, Anda harus menginstal komponen pengembangan ASP.NET dan web serta komponen pengembangan.NET Core terlebih dahulu. Untuk menginstal workload, klik tautan Buka Penginstal Visual Studio di panel kiri kotak dialog Proyek Baru (pilih File>Baru>Proyek). Penginstal Visual Studio diluncurkan. Pilih beban kerja yang diperlukan.

Mengonfigurasi file startup untuk proyek

Buka file ./Startup.cs, dan tambahkan baris berikut ke metode Konfigurasi:

app.UseDefaultFiles(); // Enables default file mapping on the web root.
app.UseStaticFiles(); // Marks files on the web root as servable.

Menginstal Vue CLI

Untuk menginstal modul npm vue-cli, buka prompt perintah dan ketik npm install --g vue-cli atau npm install -g @vue/cli untuk versi 3.0 (saat ini dalam versi beta).

Scaffold aplikasi klien baru menggunakan Vue CLI

Buka perintah Anda dan ubah direktori saat ini ke folder akar proyek Anda.
Ketik vue init webpack client-app dan ikuti langkah-langkah saat diminta untuk menjawab pertanyaan tambahan.

Nota

Untuk file .vue, Anda perlu menggunakan webpack atau kerangka kerja serupa dengan loader untuk melakukan konversi. TypeScript dan Visual Studio tidak tahu cara mengkompilasi file .vue. Hal yang sama berlaku untuk bundling; TypeScript tidak tahu cara mengonversi modul ES2015 (yaitu pernyataan import dan export) menjadi satu file .js akhir untuk dimuat di browser. Sekali lagi, webpack adalah pilihan terbaik di sini. Untuk mendorong proses ini dari dalam Visual Studio menggunakan MSBuild, Anda harus memulai dari templat Visual Studio. Saat ini, tidak ada templat ASP.NET yang tersedia langsung untuk pengembangan Vue.js.

Ubah konfigurasi webpack untuk menghasilkan file bawaan ke wwwroot

Buka file ./client-app/config/index.js, dan ubah build.index dan build.assetsRoot ke jalur wwwroot:

// Template for index.html
index: path.resolve(__dirname, '../../wwwroot/index.html'),

// Paths
assetsRoot: path.resolve(__dirname, '../../wwwroot'),

Menunjukkan proyek untuk membangun aplikasi klien setiap kali build dipicu

Di Visual Studio, buka Project>Properti>Build Events.
Pada perintah baris peristiwa pra-build, ketik npm --prefix ./client-app run build.

Mengonfigurasi nama modul keluaran webpack

Buka file ./client-app/build/webpack.base.conf.js, dan tambahkan properti berikut ke properti output:

devtoolModuleFilenameTemplate: '[absolute-resource-path]',
devtoolFallbackModuleFilenameTemplate: '[absolute-resource-path]?[hash]'

Menambahkan dukungan TypeScript dengan Vue CLI

Langkah-langkah ini memerlukan vue-cli 3.0, yang saat ini dalam versi beta.

Buka perintah Anda dan ubah direktori saat ini ke folder akar proyek.
Ketik vue create client-app, lalu pilih Pilih fitur secara manual.
Pilih TypeScript, lalu pilih opsi lain yang diinginkan.
Ikuti langkah-langkah yang tersisa dan tanggapi pertanyaan.

Mengonfigurasi proyek Vue.js untuk TypeScript

Buka file ./client-app/tsconfig.json dan tambahkan noEmit:true ke opsi pengkompilasi.

Dengan mengatur opsi ini, Anda menghindari kekacauan proyek setiap kali Anda membangun di Visual Studio.

Selanjutnya, buat file vue.config.js di ./client-app/ dan tambahkan kode berikut.

module.exports = {
    outputDir: '../wwwroot',

    configureWebpack: {
        output: {
            devtoolModuleFilenameTemplate: '[absolute-resource-path]',
            devtoolFallbackModuleFilenameTemplate: '[absolute-resource-path]?[hash]'
        }
    }
};

Kode sebelumnya mengonfigurasi paket web dan mengatur folder wwwroot.

Membangun dengan vue-cli 3.0

Masalah yang tidak diketahui dengan vue-cli 3.0 mungkin mencegah otomatisasi proses build. Setiap kali Anda mencoba me-refresh folder wwwroot, Anda perlu menjalankan perintah npm run build di folder client-app.

Atau, Anda dapat membangun proyek vue-cli 3.0 sebagai peristiwa pra-build menggunakan properti proyek ASP.NET. Klik kanan proyek, pilih properti , dan sertakan perintah berikut di tab Build, di kotak teks baris perintah peristiwa pra-build.

cd ./client-app
npm run build
cd ../

Keterbatasan

atribut lang hanya mendukung bahasa JavaScript dan TypeScript. Nilai yang diterima adalah: js, jsx, ts, dan tsx.
atribut lang tidak berfungsi dengan tag templat atau gaya.
Men-debug blok skrip di file .vue tidak didukung karena sifatnya yang telah diproses sebelumnya.
TypeScript tidak mengenali file .vue sebagai modul. Anda memerlukan file yang berisi kode seperti berikut untuk memberi tahu TypeScript seperti apa file .vue (templat vue-cli 3.0 sudah menyertakan file ini).
```
// ./client-app/vue-shims.d.ts
declare module "*.vue" {
    import Vue from "vue";
    export default Vue;
}
```
Menjalankan command npm run build sebagai event pra-build pada properti proyek tidak berfungsi menggunakan vue-cli 3.0.

Bagikan melalui