搭建Vue3+TypeScript+Vite项目的最优方案及TS代码风格疑问

项目搭建方案选择 #

• npm init vite-app是Vite 1.0时代的旧初始化命令，官方已经停止维护，对应的基础模板没有内置TS适配，所以不会自动生成vite.config.ts等配置文件，需要手动补充TS相关的依赖、配置项，踩坑概率很高，完全不推荐使用。
• npm init vite是Vite 2.0及以后版本的官方标准初始化命令，选择vue-ts模板后会自动生成适配TS的全套配置，包括vite.config.ts、tsconfig.json、类型声明文件等，后续接入Vue Router、Pinia（Vuex的官方替代方案，对TS支持更好）不需要额外做复杂的适配，是当前的最优搭建方案。

Vue3 + TS 组件编写风格选择 #

你提到的两种写法里，优先选第一种：

• 第二种是Vue2时期常用的类式组件+装饰器写法，依赖的vue-property-decorator库目前已经很少维护，对Vue3的Composition API适配性很差，不符合Vue3的官方设计方向，不建议在Vue3项目中使用。
• 第一种是Vue3官方原生支持的Options API + Composition API混合写法，通过defineComponent包装可以获得完整的TS类型推导，如果你想进一步简化写法，还可以用官方更推荐的<script setup lang="ts">语法糖，不需要手动写return暴露变量，类型推导效率更高，写法更简洁，示例如下：

<script setup lang="ts">
import { computed } from 'vue'
import { useStore } from 'vuex'
import { key } from '../store'

// 声明props
interface Props {
  msg?: string
}
const props = withDefaults(defineProps<Props>(), {
  msg: ''
})

const store = useStore(key)
const count = computed(() => store.state.count)
const inCrement = () => store.commit('increment')
</script>

另外补充，Vuex现在已经有官方的替代方案Pinia，对TS的支持更原生，不需要额外注入key就能获得完整的类型推导，后续做状态管理更推荐直接用Pinia。

内容的提问来源于stack exchange，提问作者Ryan