🙎🏿 🍺 ⚖️ 理想的なVueTypescriptアプリケーション 🎅🏽 📬 🍴

Vue 3はまだ正式にリリースされておらず、本番環境はほとんどバージョン2ですが、タイピングと、Vueではまだ完全ではないことについてお話ししたいと思います。そして今日は、コードスタイルに焦点を当て、vueスタイルガイドやその他の賢い人々によって発明された通常は重要でないものを宣伝する、タイプスクリプトタイピングを使用した理想的なアプリケーションの作成を試みます。

リマーク

著者が最初の投稿を書いていること、そしてコメントでフィードバックを聞きたいことを心に留めておく必要があります

なぜ「完璧」なのか？

-, , (eslint) , conventional commits, . , , , ( )? , - .

Vue?

2 typescript (store), , store , . , , ? vue-property-decorator vuex-smart-module .

, vue cli .

vue create habratest

- vue2, features, Vue Router History Mode, Vue Class Components, . , .

" " .

, node_modules

, . - vue-bootstrap quasar . .

eslint

. extends - eslint - Vue style guide - - recommended.

  extends: [
    'plugin:vue/recommended',
    '@vue/typescript/recommended'
  ],

, eslint style guide , , - .

はい、これはVuecliテンプレートでもいくつかのエラーを修正します — , Vue cli

eslint

. . , - v-html, . , .

- rules :

"semi": [2, "never"],
"quotes": [2, "single", { "avoidEscape": true }]

"" Vuex

npm install vuex-smart-module

Vuex , . , :

vue-property-decorator, class-style components;
.

src/main.ts store . this.$store

, .

store modules habrModule, : index.ts, actions.ts, getters.ts, mutations.ts, state.ts.

, - . ()

(!) , - , appSettings

src/store/modules/habrModule/state.ts:

export default class HabrState {
  value = 'hello';
}

src/store/modules/habrModule/getters.ts:

import { Getters } from 'vuex-smart-module'
import HabrState from './state'

export default class HabrGetters extends Getters<HabrState> {
  /**
   *  greeting,   Vuex
   * @param name 
   * @example module.getters.greeting("Habr!")
   */
  greeting(name: string): string {
    return this.state.value + ', ' + name
  }

  /**
   *   greeting,  Vuex
   * @example module.getters.greetingDefault
   */
  get greetingDefault(): string {
    return this.getters.greeting('Habr!')
  }
}

src/store/modules/habrModule/index.ts:

import { Module } from 'vuex-smart-module'
import getters from './getters'
import state from './state'

const habr = new Module({
  state: state,
  getters: getters,
})

export default habr

, . store

src/store/index.ts

import Vue from 'vue'
import Vuex from 'vuex'

import { Module, createStore } from 'vuex-smart-module'
import habr from './modules/habrModule'

Vue.use(Vuex)

const root = new Module({
  modules: {
    habr,
  },
})

const store = createStore(root)

export default store

export const habrModule = habr.context(store)

, , .

- . .

<template>
  <div class="home">
    <img
      alt="Vue logo"
      src="../assets/logo.png"
    >
    <HelloComponent msg="Welcome to Your Vue.js + TypeScript App" />
    {{ computedTest }}
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { habrModule } from '@/store'

@Component({
  name: 'HomeView',
  components: {
    HelloComponent: () => import('@/components/HelloComponent.vue'),
  },
})
export default class HomeView extends Vue {
  get computedTest() {
    return habrModule.getters.greetingDefault
  }
}
</script>

! ...

src/views HomeView.vue AboutView.vue, src/components HelloComponent.vue. name

.
src/router/index.ts HomeView.vue - , vue style guide.
.
npm run lint

.
.

, Vue, , :

Component-naming - Vue , eslint.
1. , - c The, TheNavigationComponent.vue
  
  - , .
2. views/components: - View, - Component ( The), - (Navigation.vue - ALERT!), html ( ).
3. : <MyComponent />
  
  vs <my-component />
  
  Vue , CamelCase ( - ide).
- , .
- , ( Components: () => import(path)

), webpack 90% , 10% - , . , .
( , ).
( ).
api - store, Vue .

eslint , style guide ! :)

コードの品質とガイドのスタイルがおもしろく、チームで生産的なディスカッションを生成し、そのようなことについて話し合うことで、満足感が得られ、時には自尊心が高まることを願っています。しかし、ネガティブではありません！

結果のアプリケーションのGithub：github

また、これはすべてVue 3で実行するための小さな変更で機能しますが、私はそれについて完全に確信が持てず、理解できなかったため、発信Vue2に関する記事です。

PS

詳細なフィードバックをいただければ幸いです。

Vueアプリケーションを「完璧に」テストするためにこのようなものを読むことに興味がありますか？

理想的なVueTypescriptアプリケーション

なぜ「完璧」なのか？

Vue?

eslint

"" Vuex

PS

More articles: