Vue- und Typescript-Build-Projekt

Dieses Mal werde ich Ihnen ein Vue- und Typescript-Konstruktionsprojekt vorstellen. Was sind die Vorsichtsmaßnahmen für Vue- und Typescript-Konstruktionsprojekte?

Typescript ist im Front-End-Kreis allmählich populär geworden. Vue 2.5.0 hat die Typdeklaration verbessert und sie für TypeScript benutzerfreundlicher gemacht.

Wenn Sie TypeScript jedoch direkt verwenden möchten Im Projekt müssen Sie noch einige Änderungen am Projekt vornehmen

1. Abhängigkeiten installierenVerwenden Sie zunächst vue-cli, um das Projekt zu generieren

Dann installieren Sie das notwendige Abhängigkeiten: Typescript, TS-Loader, Vue-Class-Component

Bei der Installation des TS-Loaders oben wurde Version 3.3.1 angegeben

vue init webpack demo

npm install typescript vue-class-component -D

Dies liegt daran, dass zum Zeitpunkt des Schreibens dieses Blogs

npm install ts-loader@3.3.1 -D

(14.03.2018)

, wenn die neueste Version 4.0.1 von ts-loader installiert ist, der Projekt meldet einen Fehler Es gibt auch mehrere Bibliotheken, die bei Bedarf eingeführt werden können:

tslint: TS-Code standardisieren und benötigen zur Verwendung mit tsllint-loader. Am besten tslint-config-standard hinzufügen; , Hinzufügen mehrerer Dekoratoren (@Emit, @Prop usw.), die Vue-Funktionen kombinieren

vuex-class: Erweiterte Unterstützung für Vuex basierend auf der Vue-Klasse -Komponente.

2. Konfigurieren Sie Webpack und ändern Sie dann die Datei ./build/webpack.base.conf.js:

Fügen Sie „.ts“ in „resolve.extension“ hinzu, damit Sie beim Importieren von ts-Dateien nicht das Suffix .ts schreiben müssen

im Modul. Fügen Sie die Webpack-Analyse von TS-Dateien in Regeln hinzu

3. Andere Konfigurationen

Erstellen Sie die Datei tsconfig.json das Stammverzeichnis des Projekts:

Die vollständigen Konfigurationselemente von tsconfig.json finden Sie im offiziellen Dokument

{
  test: /\.tsx?$/,
  loader: 'ts-loader',
  exclude: /node_modules/,
  options: {
    appendTsSuffixTo: [/\.vue$/]
  }
}

Erstellen Sie die Datei vue-shim.d.ts im Verzeichnis ./src und lassen Sie ts die .vue-Datei erkennen:

4. Dateiänderung

Ändern Sie das Suffix aller js-Dateien im src Verzeichnis in .ts

// tsconfig.json{  "compilerOptions": {    // 与 Vue 的浏览器支持保持一致
    "target": "es5",    // 这可以对 `this` 上的数据属性进行更严格的推断
    "strict": true,    // 如果使用 webpack 2+ 或 rollup，可以利用 tree-shake:
    "module": "es2015",    "moduleResolution": "node"
  }
}

Ändern Sie dann den Eintrag in der Webpack-Konfigurationsdatei ./build/webpack.base.conf.js in main.ts

// vue-shim.d.tsdeclare module "*.vue" {
  import Vue from "vue";
  export default Vue;
}

Die transformierte TS-Datei. Die .vue-Datei wird nicht erkannt, daher müssen Sie beim Importieren der .vue-Datei manuell das .vue-Suffix

hinzufügen

In allen

.vue-Dateien müssen Sie das lang="ts"-Tag hinzufügen zum