Aplikasi Ketikan Vue Ideal

Meskipun Vue 3 belum dirilis secara resmi, dan sebagian besar produksinya adalah versi 2 - Saya ingin berbicara tentang pengetikan dan bagaimana hal itu masih belum sempurna di Vue. Dan hari ini kami akan mencoba membuat aplikasi yang ideal dengan pengetikan skrip, dengan fokus pada gaya kode, mempromosikan panduan gaya vue dan hal-hal lain yang biasanya tidak penting yang ditemukan oleh orang pintar.

Ucapan

Perlu diingat bahwa penulis sedang menulis postingan pertamanya dan ingin mendengar tanggapan di kolom komentar

Mengapa "sempurna"?

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

Saya harap Anda menikmatinya, kualitas kode dan gaya panduannya menarik, dan juga menghasilkan diskusi yang produktif dalam tim, membahas hal-hal seperti itu, akan membawa kepuasan dan terkadang meningkatkan harga diri. Tapi tidak ada yang negatif!

Github dari aplikasi yang dihasilkan: github

Juga, semua ini akan bekerja dengan modifikasi kecil untuk dijalankan di Vue 3, saya melakukannya, tetapi karena saya tidak sepenuhnya yakin tentang itu dan mengetahuinya - sebuah artikel tentang Vue 2 yang keluar.

PS

Saya akan senang menerima umpan balik yang mendetail.

Apakah Anda tertarik membaca sesuatu seperti ini untuk aplikasi pengujian Vue yang "sempurna"?