Ideal Vue Typescript Application

While Vue 3 is not officially released yet, and production is mostly version 2 - I want to talk about typing and how it is still not perfect in Vue. And today we will try to create an ideal application with typescript typing, focusing on code style, promoting vue style guide and other usually insignificant things that were invented by smart people.

Remark

It should be borne in mind that the author is writing his first post and would like to hear feedback in the comments.

Why "perfect"?

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

I hope you enjoyed it, the quality of the code and style guides are interesting, and also generates productive discussions in teams, discuss such things, it will bring satisfaction and sometimes raise self-esteem. But no negative!

Github of the resulting application: github

Also, all this will work with minor modifications to run on Vue 3, I did it, but since I'm not completely sure about it and figured it out - an article about the outgoing Vue 2.

PS

I would be glad to receive any detailed feedback.

Would you be interested in reading something like this for "perfect" testing Vue applications?