Блог

Я новичок в vue и чувствую себя смущенным, как правильно объединить vite, ts и vue3.Я хочу знать, какое лучшее решение для этого в vue, я добавлю маршрут vue, vuex позже.

Я нашел два способа создания вышеупомянутого проекта:

1. npm init vite (затем я выбираю vue-ts)
2. npm init vite-app <project-name> (затем я добавляю typescript вручную с помощью npm)

Мой вопрос заключается в том, что:

1. Первый способ генерирует vite.config.ts , в то время как у второго способа его нет, почему и какое лучшее решение?
2. Что касается ts стиля кода в vue, какой стиль лучше писать.Я видел много видов кода для написания компонента в vue3 с помощью typescript, например:

(1)

 <script>
  import { defineComponent, computed } from 'vue'
  import { useStore } from 'vuex'
  import { key } from '../store'

  export default defineComponent({
    name: 'HelloWorld',
    props: {
      msg: {
        type: String,
        default: ''
      }
    },
    setup() {
      const store = useStore(key)
      const count = computed(() => store.state.count)

      return {
        count,
        inCrement: () => store.commit('increment')
      }
    }
  })
</script>
 

(2)

 <script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
import { isExternal } from '@/utils/validate'

@Component({
  name: 'SidebarItemLink'
})
export default class extends Vue {
  @Prop({ required: true }) private to!: string

  private isExternal = isExternal
}
</script>

 

Для стиля кода компонента vue 3 рекомендует использовать defineComponent composition api template(or tsx)

 <template>
  <p class="msg">{{ msg }}</p>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  setup () {
    const msg = 'Hello World!';

    return {
      msg
    }
  }
})
</script>

<style scoped lang="scss" >

</style>