Combat pratique avec la configuration du projet Vue+TypeScript

La colonne du didacticiel js suivante vous présentera comment utiliser la configuration du projet Vue+TypeScript dans la pratique. J'espère qu'elle sera utile aux amis dans le besoin !

Configuration pratique du projet avec Vue+TypeScript

Construction du projet

Construction via des échafaudages

1. Créez un projet vue via 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 我都会尽力帮大家哦

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

Recommandations associées : "Tutoriel avancé JS"

2. 🎜>

yarn run serve

Peut-il fonctionner ? S'il peut fonctionner, c'est un bon projet

3 Configuration du projet

À ce stade, l'échafaudage a en fait configuré la majeure partie de la configuration. nous, mais nous devons encore nous familiariser avec sa configuration.

tsconfig.json

Créez tsconfig.json dans le répertoire racine du projet.

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

Créer le fichier tslint.json dans le chemin racine consiste à introduire la spécification standard de ts.

Si le fichier de configuration eslint a été introduit, cette étape n'est en fait pas nécessaire.

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

Copiez le code

Joindre une configuration par défaut d'eslint eslintrc.js générée automatiquement par l'échafaudage.

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. Prise en charge d'ES6/ES7

Dans tsconfig.json, ajoutez la prise en charge d'es6/es7. Pour plus de configuration, veuillez consulter tsconfig - options de compilation.

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

5. Configurer Vuex

Tout d'abord, bien sûr, installez d'abord les dépendances.

yarn add vuex vuex-class

Copier le code

vuex : gérer de manière centralisée le statut de l'application dans vue

vuex-class : dans vue-class- Bind vuex dans l'écriture de composants.

Après avoir cité vuex-class, c'est encore un peu différent de l'écriture originale.

Comment écrire dans vuex store, et comment l'écrire, lorsqu'il est cité comme suit :

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. Prise en charge de la fonction vue mixin

Créez un nouveau répertoire mixins sous src. , selon la structure de la division du module de réutilisation de l'entreprise.

Nous utilisons souvent des mixins lors du développement avec Vue. Après combinaison avec TypeScript, il existe généralement deux méthodes de mixins.

L'un est fourni par 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?')
  }
}

rrree

Le second est mixé dans @Component.

// 引入 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()
  }
}

rrree

Est-ce que tu fais tout ça ? Si tu ne comprends pas, souviens-toi de moi. Je suis un architecte front-end senior qui a débuté en 2008. Si vous avez des questions ou échangez des expériences, vous pouvez saisir ma jupe boutonnée 519293536. Je ferai de mon mieux pour aider tout le monde

Le texte et les photos de ceci L'article provient d'Internet et ajoute mes propres idées. Il est uniquement destiné à l'apprentissage et à la communication, et n'a aucun but commercial. Le droit d'auteur appartient à l'auteur original. Si vous avez des questions, veuillez nous contacter à temps pour le traitement

(A suivre...)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!