Ideale Vue Typescript-Anwendung

Während Vue 3 noch nicht offiziell veröffentlicht ist und die Produktion hauptsächlich Version 2 ist, möchte ich über das Tippen sprechen und darüber, wie es in Vue immer noch nicht perfekt ist. Und heute werden wir versuchen, eine ideale Anwendung mit Typoskript-Typisierung zu erstellen, die sich auf den Codestil konzentriert, den Vue- Styleguide und andere normalerweise unbedeutende Dinge fördert , die von intelligenten Menschen erfunden wurden.

Anmerkung

Es ist zu beachten, dass der Autor seinen ersten Beitrag schreibt und Feedback in den Kommentaren hören möchte

Warum "perfekt"?

-, , (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 , , - .

eslint

. . , - v-html, . , .

- rules :

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

"" Vuex

npm install vuex-smart-module
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Vuex , . , :

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

   
   
   
   
   

2. .

   
   
   
   
   

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>

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

! ...

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

   
   
   
   
   

2. src/router/index.ts HomeView.vue - , vue style guide.

   
   
   
   
   

3. .

   
   
   
   
   

4. npm run lint
   
   
   
   .

   
   
   
   
   

5. .

   
   
   
   
   

, Vue, , :

1. 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).

      
      
      
      
      

2. - , .

   
   
   
   
   

3. - , ( Components: () => import(path)
   
   
   
   ), webpack 90% , 10% - , . , .

   
   
   
   
   

4. ( , ).

   
   
   
   
   

5. ( ).

   
   
   
   
   

6. api - store, Vue .

   
   
   
   
   

eslint , style guide ! :)

Ich hoffe, es hat Ihnen gefallen, die Qualität des Codes und der Stil des Leitfadens sind interessant und führen auch zu produktiven Diskussionen in Teams, diskutieren solche Dinge, bringen Zufriedenheit und steigern manchmal das Selbstwertgefühl. Aber kein Negativ!

Github der resultierenden Anwendung: Github

All dies wird auch mit geringfügigen Änderungen funktionieren, um auf Vue 3 ausgeführt zu werden. Ich habe es getan, aber da ich mir nicht ganz sicher bin und es herausgefunden habe - ein Artikel über das ausgehende Vue 2.

PS

Ich würde mich über ein detailliertes Feedback freuen.

Möchten Sie so etwas lesen, um Vue-Anwendungen "perfekt" zu testen?