Kemahiran pembangunan Vue3+TS+Vite: Cara menggunakan Vite untuk pembungkusan pantas dan muat semula panas

Kemahiran pembangunan Vue3+TS+Vite: Cara menggunakan Vite untuk pembungkusan pantas dan muat semula panas

Dengan perkembangan pesat teknologi hadapan, Vue.js telah menjadi salah satu rangka kerja JavaScript yang paling popular. Dalam ekosistem Vue, Vue3, sebagai versi terkini, membawakan banyak ciri dan penambahbaikan baharu yang menarik. Sebagai alat pembinaan baharu, Vite mencapai permulaan sejuk dan penggantian modul panas yang sangat pantas dengan menggunakan sokongan asli modul ES, menjadikannya alat pembangunan pilihan untuk Vue3. Artikel ini akan memperkenalkan cara menggunakan Vite untuk pembangunan Vue3, termasuk petua untuk pembungkusan pantas dan muat semula panas.

1. Pasang dan mulakan projek Vite

Pertama, kita perlu memasang Vite dan memulakan projek Vue3:

npm install -g create-vite
create-vite my-vue-project
cd my-vue-project
npm install

2 Gunakan Vite untuk pembangunan

Membangun dengan Vite adalah sangat mudah. Kami hanya perlu menjalankan arahan berikut:

npm run dev

Vite akan memulakan pelayan pembangunan secara setempat dan secara automatik membuka tetingkap penyemak imbas. Pada ketika ini, kita boleh mula menulis kod. Vite akan memuatkan modul yang sepadan secara automatik mengikut keperluan, membolehkan hanya kod yang diperlukan dimuatkan dan bukannya membungkus keseluruhan aplikasi ke dalam satu fail. Ini menjadikan proses pembangunan lebih cepat dan lebih cekap.

3. Pembungkusan pantas

Selepas kami menyelesaikan pembangunan, kami perlu membungkus projek ke dalam fail yang boleh digunakan. Pembungkusan dengan Vite sangat mudah, cuma jalankan arahan berikut:

npm run build

Vite akan mengoptimumkan kod secara automatik dan menjana fail yang dioptimumkan. Kelajuan pembungkusan Vite sangat pantas, terima kasih kepada sokongan aslinya untuk modul ES.

4. Muat semula panas

Muat semula panas adalah fungsi yang sangat penting dalam pembangunan Vue secara automatik selepas kami mengubah suai kod, supaya proses pembangunan tidak memerlukan muat semula halaman secara manual. Vite melaksanakan pemuatan semula panas yang cekap dengan menggunakan pemalam penggantian modul panas yang disediakan oleh Snowpack.

Apabila menggunakan Vite untuk membangunkan projek Vue3, muat semula panas didayakan secara lalai secara automatik. Kami boleh menyemak konsol dalam alat pembangun penyemak imbas untuk mendapatkan maklumat muat semula panas terperinci.

Selain muat semula panas, Vite juga mempunyai beberapa ciri terbina dalam yang sangat berguna, seperti prapemproses CSS, import dinamik, dsb. Kami boleh menggunakan arahan berikut untuk menambah sokongan SCSS:

npm install -D sass

Dalam kod, kami boleh terus memperkenalkan fail SCSS:

import "./styles.scss"

5. Gunakan TypeScript

Vue3 menyediakan sokongan asli untuk TypeScript, dan kami boleh terus menggunakan TypeScript untuk pembangunan Vue . Dalam projek Vite, kami boleh mendayakan TypeScript melalui konfigurasi mudah.

Mula-mula, kita perlu menukar fail main.js kepada main.ts dan mengubah suai kandungan fail: main.js文件改为main.ts，并修改文件内容：

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

然后，在项目根目录下新增一个tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "resolveJsonModule": true,
    "lib": ["esnext", "dom"]
  },
  "exclude": ["node_modules"]
}

Kemudian, tambahkan utama yang baharu. ts fail dalam kod direktori akar projek>tsconfig.json fail, isikan kandungan berikut:

rrreee

Dengan konfigurasi di atas, kita boleh menggunakan TypeScript dalam projek Vite. Kita boleh menulis komponen Vue sama seperti menggunakan JavaScript sambil masih mendapat faedah pemeriksaan jenis.

Ringkasan

Menggunakan Vite untuk pembangunan Vue3 ialah pilihan yang cekap dan pantas. Dengan menggunakan sokongan asli modul ES, ia mencapai pembungkusan pantas dan pemuatan semula panas, meningkatkan kecekapan pembangunan. Selain itu, Vite juga menyokong prapemproses CSS dan TypeScript, menjadikan proses pembangunan kami lebih kaya dan lebih fleksibel. Saya harap artikel ini akan membantu anda dalam pembangunan Vue3+TS+Vite anda. 🎜

Atas ialah kandungan terperinci Kemahiran pembangunan Vue3+TS+Vite: Cara menggunakan Vite untuk pembungkusan pantas dan muat semula panas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!