Aplicación de mecanografiado ideal de Vue

Si bien Vue 3 aún no se lanzó oficialmente, y la producción es principalmente la versión 2, quiero hablar sobre la mecanografía y cómo aún no es perfecta en Vue. Y hoy intentaremos crear una aplicación ideal con mecanografía, centrándonos en el estilo del código, promocionando la guía de estilo vue y otras cosas generalmente insignificantes que fueron inventadas por personas inteligentes.

Observación

Debe tenerse en cuenta que el autor está escribiendo su primera publicación y le gustaría recibir comentarios en los comentarios.

¿Por qué "perfecto"?

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

Espero que les haya gustado, la calidad del código y el estilo de la guía es interesante, y además genera discusiones productivas en equipos, discuten este tipo de cosas, traerá satisfacción y en ocasiones elevará la autoestima. ¡Pero no negativo!

Github de la aplicación resultante: github

Además, todo esto funcionará con modificaciones menores para ejecutar en Vue 3, lo hice, pero como no estoy completamente seguro y lo resolví, un artículo sobre el Vue 2 saliente.

PD

Estaría encantado de recibir comentarios detallados.

¿Le interesaría leer algo como esto para probar aplicaciones Vue "perfectas"?