Praktischer Kampf mit Vue+TypeScript-Projektkonfiguration

In der folgenden JS-Tutorial-Kolumne erfahren Sie, wie Sie die Vue + TypeScript-Projektkonfiguration in der Praxis verwenden. Ich hoffe, dass sie für Freunde in Not hilfreich ist!

Praktische Projektkonfiguration mit Vue+TypeScript

Projektkonstruktion

Bauen durch Gerüstbau

1. Erstellen Sie ein Vue-Projekt über Vue CLI 3

vue create vue-typescript
// 在此选择typescript支持
? Check the features needed for your project: () Babel () TypeScript ( ) Progressive Web App (PWA) Support () Router () Vuex >() CSS Pre-processors () Linter / Formatter ( ) Unit Testing ( ) E2E Testing 我是08年出道的高级前端架构师，有问题或者交流经验可以进我的扣扣裙 519293536 我都会尽力帮大家哦

rreee

Verwandte Empfehlungen: „JS Advanced Tutorial“

Starten Sie das Projekt

// 引入 vue-class-component 插件 // 以下大概是我的选择 ? Use class-style component syntax? (Y/n) y ? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes ? Use history mode for router? (Requires proper server setup for index fallback in production) Yes ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass) ? Pick a linter / formatter config: Prettier ? Pick additional lint features: Lint on save ? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files ? Save this as a preset for future projects? (y/N) n

Kann es laufen? Wenn es laufen kann, ist es ein gutes Projekt

3. Projektkonfiguration

Zu diesem Zeitpunkt hat das Gerüst tatsächlich den größten Teil der Konfiguration konfiguriert Wir müssen uns aber noch mit der Konfiguration vertraut machen.

tsconfig.json

Erstellen Sie tsconfig.json im Projektstammverzeichnis.

yarn run serve

tslint.json

Das Erstellen der Datei tslint.json im Stammpfad dient der Einführung der Standardspezifikation von ts.

Wenn die eslint-Konfigurationsdatei eingeführt wurde, muss dieser Schritt eigentlich nicht durchgeführt werden.

{
  // 编译选项
  "compilerOptions": {
    // 输出目录
    "outDir": "./output",
    // 是否包含可以用于 debug 的 sourceMap
    "sourceMap": true,
    // 以严格模式解析
    "strict": true,
    // 采用的模块系统
    "module": "esnext",
    // 如何处理模块
    "moduleResolution": "node",
    // 编译输出目标 ES 版本
    "target": "es5",
    // 允许从没有设置默认导出的模块中默认导入
    "allowSyntheticDefaultImports": true,
    // 将每个文件作为单独的模块
    "isolatedModules": false,
    // 启用装饰器
    "experimentalDecorators": true,
    // 启用设计类型元数据（用于反射）
    "emitDecoratorMetadata": true,
    // 在表达式和声明上有隐含的any类型时报错
    "noImplicitAny": false,
    // 不是函数的所有返回路径都有返回值时报错。
    "noImplicitReturns": true,
    // 从 tslib 导入外部帮助库: 比如__extends，__rest等
    "importHelpers": true,
    // 编译过程中打印文件名
    "listFiles": true,
    // 移除注释
    "removeComments": true,
    "suppressImplicitAnyIndexErrors": true,
    // 允许编译javascript文件
    "allowJs": true,
    // 解析非相对模块名的基准目录
    "baseUrl": "./",
    // 指定特殊模块的路径
    "paths": {
      "jquery": [
        "node_modules/jquery/dist/jquery"
      ]
    },
    // 编译过程中需要引入的库文件的列表
    "lib": [
      "dom",
      "es2015",
      "es2015.promise"
    ]
  }
}

Kopieren Sie den Code

Fügen Sie eine Standardkonfiguration von eslint eslintrc.js hinzu, die automatisch vom Gerüst generiert wird.

{
  "extends": "tslint-config-standard",
  "globals": {
    "require": true
  }
}

4. Unterstützung für ES6/ES7

Fügen Sie in tsconfig.json Unterstützung für es6/es7 hinzu. Weitere Informationen finden Sie unter tsconfig – Kompilierungsoptionen.

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    "plugin:vue/essential",
    "eslint:recommended",
    "@vue/typescript/recommended",
    "@vue/prettier",
    "@vue/prettier/@typescript-eslint"
  ],
  parserOptions: {
    ecmaVersion: 2020
  },
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off"
  }
};

5. Vuex konfigurieren

Zuallererst natürlich die Abhängigkeiten installieren.

Garn Vuex Vuex-Klasse hinzufügen

Code kopieren

Vuex: Anwendungsstatus in Vue zentral verwalten

Vuex-Klasse: in Vue-Klasse- Binden Vuex beim Schreiben von Komponenten.

Nachdem ich die Vuex-Klasse zitiert habe, unterscheidet sie sich immer noch ein wenig vom Originaltext.

Wie man im Vuex Store schreibt und wie man es schreibt, die Referenz lautet wie folgt:

"lib": [
    "dom",
    "es5",
    "es6",
    "es7",
    "es2015.promise"
]

6. Unterstützen Sie die Vue-Mixin-Funktion

Erstellen Sie ein neues Mixins-Verzeichnis unter src, entsprechend der Abteilungsstruktur des Business Reuse-Moduls.

Bei der Entwicklung mit Vue verwenden wir häufig Mixins. Nach der Kombination mit TypeScript gibt es im Allgemeinen zwei Methoden für Mixins.

Einer wird von vue-property-decorator bereitgestellt

import { Component, Prop, Vue } from "vue-property-decorator";
import { State, Getter, Action, Mutation, namespace } from "vuex-class";
// 声明使用的是哪个模块
const commonModule = namespace("common");
@Component
export default class HelloWorld extends Vue {
  @Prop() private msg!: string;
  // 获取vuex中的数据
  @commonModule.State("token") token!: string;
  @commonModule.Getter("getToken") getToken!: string;
  @commonModule.Action("setToken") actionSetToken: (arg0: string) => void;
  @commonModule.Mutation("setToken") mutationSetToken: unknown;
  // @State token
  // @Getter("token") getterToken;
  // @Action("token") actionToken;
  // @Mutation("token") mutationToken;
  created() {
    this.actionSetToken("123");
    alert(this.token);
  }
}

rrree

Der zweite wird in @Component gemischt.

// 定义 routerMixins.ts文件
// mixin router 公共方法
import Vue from 'vue'
import Component from 'vue-class-component'
@Component
export default class myMixins extends Vue {
  /**
   * @author: WangXinYu
   * @describe: 浏览器后退事件
   * @param: {}
   * @return:
   **/
  goBack() {
    this.$router.go(-1)
  }
  /**
   * @author: WangXinYu
   * @describe: test
   * @param: {}
   * @return:
   **/
  routerTest() {
    console.log('are you ok?')
  }
}

rrree

Machst du alles? Wenn Sie es nicht verstehen, erinnern Sie sich an mich. Ich bin ein leitender Front-End-Architekt, der 2008 sein Debüt gab. Wenn Sie Fragen haben oder Erfahrungen austauschen, können Sie meinen Knopfrock 519293536 eingeben. Ich werde mein Bestes geben, um allen zu helfen

Der Text und die Bilder davon Der Artikel stammt aus dem Internet und enthält meine eigenen Ideen. Er dient nur dem Lernen und der Kommunikation und hat keinen kommerziellen Zweck. Wenn Sie Fragen haben, kontaktieren Sie uns bitte rechtzeitig zur Bearbeitung >

(Fortsetzung folgt...)

Das obige ist der detaillierte Inhalt vonPraktischer Kampf mit Vue+TypeScript-Projektkonfiguration. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!