Application Typescript Vue idéale

Bien que Vue 3 ne soit pas encore officiellement publié et que la production soit principalement la version 2 - je veux parler de la saisie et du fait qu'elle n'est toujours pas parfaite dans Vue. Et aujourd'hui, nous allons essayer de créer une application idéale avec une saisie dactylographiée, en se concentrant sur le style de code, en promouvant le guide de style de vue et d'autres choses généralement insignifiantes qui ont été inventées par des personnes intelligentes.

Remarque

Il faut garder à l'esprit que l'auteur rédige son premier message et aimerait entendre des commentaires dans les commentaires

Pourquoi «parfait»?

-, , (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 ! :)

J'espère que cela vous a plu, la qualité du code et le style du guide sont intéressants, et génèrent également des discussions productives en équipe, discuter de telles choses, cela apportera satisfaction et augmentera parfois l'estime de soi. Mais pas de négatif!

Github de l'application résultante: github

De plus, tout cela fonctionnera avec des modifications mineures à exécuter sur Vue 3, je l'ai fait, mais comme je n'en suis pas complètement sûr et que je l'ai compris - un article sur le Vue 2 sortant.

PS

Je serais heureux de recevoir des commentaires détaillés.

Seriez-vous intéressé à lire quelque chose comme ça pour tester "parfaitement" les applications Vue?