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 angegebenvue init webpack demo
npm install typescript vue-class-component -D
npm install ts-loader@3.3.1 -D
, 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$/]
}
}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
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
