构建vue3+ts+vite项目的最佳解决方案是什么

Question

我是vue的新手，对如何正确地将vite、ts和vue3组合在一起感到困惑。我想知道在vue中什么是最好的解决方案，我稍后会添加vue路由，vuex。

我找到了两种方法来创建上面的项目：

1. npm init vite(然后我选择vue ts(
2. npm init vite-app <project-name>(然后我使用npm手动添加typescript(

我的问题是：

1. 第一种方法生成vite.config.ts，而第二种方法没有，为什么，最好的解决方案是什么？

2. 对于vue中的ts代码样式，什么是更好的编写样式。我见过很多种在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>

Answer 1

对于组件代码样式，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>