Vue3 + TypeScript + Vite + Pinia + Vue Router 的**现代化项目脚手架,**目前最推荐的组合,简单清爽,且完全符合企业级开发习惯。
一、脚手架创建命令
官方vite模板(此处用vite@4比较稳定)
npm create vite@^6.0.5 my-vue3-ts-app -- --template vue-ts
进入项目
cd my-vue3-ts-app
安装依赖
npm install
安装pinia
npm install pinia@2.3.0
安装vue-router
npm install vue-router@4.5.0
启动开发环境
npm run dev
PS:如果项目里有报错,脚手架生成的项目HelloWorld.vue中,某一行有红色波浪线,鼠标移过去显示[vue/no-multiple-template-root] The template root requires exactly one element.我创建的项目出现了这个问题,原因在于使用了vetur插件,这里卸载换成volar插件。
Vetur 和 Volar 是两个不同的 Vue 语言支持插件:
-
Vetur 主要支持 Vue 2,虽然也能用 Vue 3,但兼容性和体验不如 Volar。
-
Volar 是专为 Vue 3 设计的,支持 Composition API、TypeScript 更友好,解决了很多 Vue 3 特有的报错和提示问题。
-
Vue (Official),Volar也启用,目前在用Vue (Official)
项目成功启动
