Kemahiran pembangunan Vue3+TS+Vite: Cara membina persekitaran pembangunan Vue3+TS+Vite dengan cepat

Kemahiran pembangunan Vue3+TS+Vite: Cara membina persekitaran pembangunan Vue3+TS+Vite dengan cepat

Dalam pembangunan web moden, Vue.js ialah salah satu rangka kerja bahagian hadapan yang paling popular. Vue3, sebagai versi terkini Vue.js, membawa lebih banyak ciri dan peningkatan prestasi. TypeScript, sebagai superset JavaScript yang ditaip secara statik, menyediakan alatan pembangunan yang lebih berkuasa dan keupayaan menyemak jenis. Vite ialah alat pembinaan yang sangat pantas yang memfokuskan pada persekitaran pembangunan dan boleh membantu kami membina persekitaran pembangunan untuk projek Vue3+TS dengan cepat. Artikel ini akan memperkenalkan cara menggunakan Vite untuk membina persekitaran pembangunan Vue3+TS, dan menyediakan beberapa petua pembangunan dan contoh kod.

Persediaan

Sebelum anda bermula, pastikan anda memasang versi terkini Node.js dan npm.

Mulakan projek menggunakan Vite

Pertama, kita perlu memasang alat baris arahan Vite secara global. Buka terminal dan jalankan arahan berikut:

npm install -g create-vite

Selepas pemasangan selesai, kami menggunakan arahan create-vite untuk mencipta projek baharu. Jalankan arahan berikut dalam terminal:

create-vite my-vue3-project --template vue-ts

Arahan di atas akan mencipta projek Vue3+TS bernama my-vue3-project dan secara automatik memulakan beberapa konfigurasi asas dan fail.

Masukkan direktori projek:

cd my-vue3-project

Pasang kebergantungan projek:

npm install

Mulakan projek:

npm run dev

Buka http://localhost:3000 dalam penyemak imbas, anda akan melihat aplikasi asas Vue3+TS berjalan.

Tambah Vuex dan Vue Router

Dalam banyak projek sebenar, kami sering menggunakan Vuex sebagai perpustakaan pengurusan negeri dan Vue Router untuk pengurusan penghalaan. Di bawah ini kami akan memperkenalkan cara menambahkannya pada projek Vue3+TS kami.

Mula-mula, pasang Penghala Vuex dan Vue:

npm install vuex@next vue-router@next

Buat direktori kedai dalam direktori src dan buat fail index.ts di dalamnya untuk memulakan Vuex. Kod sampel adalah seperti berikut:

import { createStore } from 'vuex'

// 创建一个基本的store
const store = createStore({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    },
    decrement(state) {
      state.count--
    }
  }
})

export default store

Buat direktori penghala dalam direktori src dan buat fail index.ts di dalamnya untuk memulakan Vue Router. Kod sampel adalah seperti berikut:

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

Kini, kita perlu memperkenalkan dan menggunakan kedai dan penghala dalam fail main.ts. Kod sampel adalah seperti berikut:

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

const app = createApp(App)

app.use(store)
app.use(router)

app.mount('#app')

Konfigurasi TypeScript

Untuk TypeScript berfungsi dengan betul, kami perlu menambah fail tsconfig.json dalam direktori akar projek dan melakukan beberapa konfigurasi asas.

Buat fail tsconfig.json dalam direktori akar projek dan tambah kandungan berikut:

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "typeRoots": ["./node_modules/@types", "./src/types"],
    "types": ["vite/client"]
  }
}

Dengan cara ini, kami telah melengkapkan pemulaan dan konfigurasi asas projek Vue3+TS+Vite. Kini, kami boleh membangunkan mengikut keperluan sebenar dan memanfaatkan ciri dan alatan yang disediakan oleh Vue3 dan TypeScript untuk meningkatkan kecekapan pembangunan.

Ringkasan

Artikel ini memperkenalkan cara membina persekitaran pembangunan Vue3+TS+Vite dengan cepat dan menyediakan beberapa contoh kod dan petua pembangunan. Dengan menggunakan Vite, kami boleh mencipta persekitaran projek Vue3+TS moden dengan cepat. Menggunakan TypeScript boleh menyediakan alat pembangunan yang lebih berkuasa dan keupayaan menyemak jenis, membantu kami menulis kod yang lebih dipercayai dan boleh diselenggara. Saya harap petua ini dapat membantu anda meningkatkan kecekapan dan kualiti pembangunan dalam projek Vue3+TS anda.

Atas ialah kandungan terperinci Kemahiran pembangunan Vue3+TS+Vite: Cara membina persekitaran pembangunan Vue3+TS+Vite dengan cepat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!