Bagaimana untuk menyambung vue ke skrip taip

Vue.js ialah rangka kerja bahagian hadapan yang popular yang boleh membantu kami membina aplikasi satu halaman yang kompleks. Walau bagaimanapun, disebabkan oleh ciri-ciri penaipan JavaScript yang lemah, kemungkinan ralat jenis pasti akan berlaku apabila kami menggunakan Vue.js. Untuk menyelesaikan masalah ini, kita boleh menggunakan TypeScript untuk meningkatkan kebolehbacaan dan kebolehselenggaraan kod. Artikel ini akan memperkenalkan cara mengintegrasikan TypeScript dalam projek Vue.js.

1. Pasang Vue.js dan TypeScript

Sebelum anda mula, anda perlu memasang Vue.js dan TypeScript. Anda boleh menggunakan npm atau benang untuk menyelesaikan pemasangan. Sila laksanakan arahan berikut:

# 安装 Vue.js
npm install vue

# 安装 TypeScript
npm install -g typescript

# 安装 TypeScript Definitions for Vue.js
npm install --save-dev @types/vue

2 Mulakan projek TypeScript

Kami akan menggunakan vue-cli untuk memulakan projek Vue.js. Perintah ini boleh membantu kami membuat aplikasi asas Vue.js dengan cepat. Sila laksanakan arahan berikut:

# 安装 vue-cli
npm install -g vue-cli

# 创建一个带有 TypeScript 的 Vue.js 项目
vue init webpack my-project --typescript

Arahan ini akan mencipta projek Vue.js dengan konfigurasi TypeScript. Kami boleh menggunakan my-project sebagai ganti nama projek anda. Dalam folder projek, anda akan melihat beberapa fail dan folder baharu, seperti tsconfig.json dan src/main.ts.

3. Konfigurasikan TypeScript

Dalam projek TypeScript, kita perlu menambah beberapa tetapan, seperti berikut:

3.1 Konfigurasikan tsconfig.json

tsconfig.json ialah fail konfigurasi utama untuk TypeScript. Dalam projek Vue.js anda, anda perlu menambah beberapa tetapan supaya TypeScript boleh mengendalikan fail .vue. Sila tambahkan kod berikut pada fail tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["esnext", "dom"],
    "experimentalDecorators": true,
    "module": "esnext",
    "moduleResolution": "node",
    "sourceMap": true,
    "noImplicitAny": true,
    "noImplicitThis": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "strict": true
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
  "exclude": ["node_modules"]
}

3.2 Konfigurasi webpack.config.js

Dalam fail webpack.config.js, kami perlu menambah beberapa tetapan. Sila tambah kod berikut di bawah objek resolve:

{
  resolve: {
    extensions: [".ts", ".js", ".vue", ".json"],
    alias: {
      vue$: "vue/dist/vue.esm.js"
    }
  }
}

Tetapan ini akan memberitahu Webpack cara menyelesaikan sambungan fail yang berbeza. Kami juga perlu menunjukkan alias vue ke fail yang betul untuk mengelakkan ralat akibat penghuraian fail.

4. Bina Komponen Fail Tunggal (SFC) Vue.js

Dalam Vue.js, kami menggunakan fail .vue untuk menulis komponen satu halaman. Memandangkan TypeScript tidak menyokong fail .vue, kami perlu menggantikannya dengan fail .tsx.

Buat fail src/components baharu dalam folder .tsx, contohnya HelloWorld.tsx. Sila ambil perhatian bahawa jika anda ingin menggunakan fungsi khusus Vue.js dalam komponen ini (seperti this.$router, this.$store, this.$refs, this.$emit, dsb.), anda perlu menambah definisi jenis yang betul untuk komponen ini .

Kita boleh menggunakan @Component penghias untuk menentukan komponen. Contohnya:

import Vue from 'vue';
import Component from 'vue-class-component';

@Component({
  props: {
    msg: String
  }
})
export default class HelloWorld extends Vue {
  // ...
}

5 Perkenalkan komponen

Dalam fail src/App.vue, kita boleh memperkenalkan komponen dan menggantikan bahagian d477f9ce7bf77f53fbcf36bec1b69b7a dengan kod berikut:

rreee

Kemudian, kita perlu memperkenalkan komponen src/main.ts dalam App.vue:

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App with TypeScript"/>
  </div>
</template>

6 Jalankan aplikasi

Sekarang kita telah melengkapkan konfigurasi Vue.js dan TypeScript, anda. boleh menggunakan Perintah berikut memulakan aplikasi:

import Vue from 'vue';
import App from './App.vue';

new Vue({
  el: '#app',
  render: h => h(App)
});

Ini akan memulakan pelayan pembangunan supaya anda boleh melihat aplikasi anda dalam penyemak imbas. Anda kini boleh menulis komponen Vue.js yang dipertingkatkan menggunakan TypeScript.

Kesimpulan

Dalam artikel ini, kami memperkenalkan cara menyambungkan TypeScript dan membina komponen satu halaman dalam projek Vue.js. Vue.js digabungkan dengan TypeScript boleh membantu kami membangunkan aplikasi web yang boleh diselenggara dengan lebih cekap. Harap artikel ini membantu anda!

Atas ialah kandungan terperinci Bagaimana untuk menyambung vue ke skrip taip. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!