Vue+TypeScriptプロジェクト構成による実践的な戦闘

次の js チュートリアル コラムでは、実際に Vue TypeScript プロジェクト構成を使用する方法を紹介します。

Vue TypeScript の使用によるプロジェクト構成の実践

プロジェクトの構築

スキャフォールディングによる構築

1. Vue CLI を使用して vue プロジェクトを作成します。 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 我都会尽力帮大家哦

// 引入 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

関連する推奨事項: 「js 高度なチュートリアル #」

2. プロジェクトを開始します

yarn run serve

実行できますか?実行できれば、それは良いプロジェクトです

3. プロジェクト構成

この時点で、スキャフォールディングは構成の大部分を構成するのに実際に役立ちました。ただし、構成についてよく理解しておく必要があります。

tsconfig.json

プロジェクトのルート ディレクトリに tsconfig.json を作成します。

{
  // 编译选项
  "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"
    ]
  }
}

tslint.json

ルート パスに tslint.json ファイルを作成することは、ts の標準仕様を導入することです。

eslint 構成ファイルが導入されている場合、この手順を実行する必要はありません。

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

コードをコピー

スキャフォールディング eslintrc.js によって自動的に生成された eslint のデフォルト構成を添付します。

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"
  }
};

4. ES6/ES7 のサポート

tsconfig.json に、es6/es7 のサポートを追加します。詳細な構成については、「tsconfig - コンパイル オプション」を参照してください。

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

5. Vuex を設定する

最初のステップは、依存関係を最初にインストールすることです。

yarn add vuex vuex-class

コードをコピー

vuex: vue でアプリケーションのステータスを一元管理

vuex-class: vue-class-Bind でコンポーネント書き込みの vuex。

vuex-classを引用した後でも、本来の書き方とは少し異なります。

vuex ストアの書き方、書き方、参考は以下の通り:

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);
  }
}

6. vue mixin 機能のサポート

src 配下に新しい mixins ディレクトリを作成、ビジネス再利用モジュール部門構造によると。

Vue で開発する場合、ミックスインを使用することが多いのですが、TypeScript と組み合わせた場合、ミックスインには大きく分けて 2 つの方法があります。

1 つは vue-property-decorator によって提供されます

// 定义 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?')
  }
}

// 引入 mixin
import { Component, Prop, Vue, Mixins } from 'vue-property-decorator'
import routerMixins from '@/mixins/router'
@Component
export default class HelloWorld extends Mixins(routerMixins) {
  created() {
    this.routerTest()
  }
}

2 つ目は @Component に混合されます。

// mixins.ts
import { Vue, Component } from 'vue-property-decorator';
declare module 'vue/types/vue' {
    interface Vue {
        value: string;
    }
}
@Component
export default class myMixins extends Vue {
    value: string = 'Hello'
}

// 混入
import { Vue, Component, Prop } from 'vue-property-decorator';
import myMixins from '@/mixins/myMixins';
@Component({
    mixins: [myMixins]
})
export default class myComponent extends Vue{
    created(){
        console.log(this.value) // => Hello
    }
}

皆さんもやりますか？理解できない場合は、私のことを思い出してください。私は 2008 年にデビューしたシニア フロントエンド アーキテクトです。質問がある場合、または経験を交換する場合は、私のボタン スカート 519293536 を入力してください。皆様のお役に立てるように最善を尽くします。

のテキストと写真この記事はインターネットからのものであり、私自身のアイデアを追加しています。学習とコミュニケーションのみを目的としており、商業目的はありません。著作権は元の著者に属します。ご質問がある場合は、処理に間に合うようご連絡ください# ＃＃＃＃＃ ＃＃＃＃＃＃（つづく...）＃ ＃＃

以上がVue+TypeScriptプロジェクト構成による実践的な戦闘の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。