创建一个简洁的Vue3 + TypeScript + Vite + Pinia + Vue Router项目

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)

项目成功启动

相关推荐
Crystal32831 分钟前
App端用户每日弹出签到弹窗如何实现?(uniapp+Vue)
前端·vue.js
摸着石头过河的石头33 分钟前
Service Worker 深度解析:让你的 Web 应用离线也能飞
前端·javascript·性能优化
molly cheung39 分钟前
Vue3:watch与watchEffect的异同
vue.js·watch·store·watcheffect
不爱吃糖的程序媛1 小时前
Electron 如何判断运行平台是鸿蒙系统(OpenHarmony)
javascript·electron·harmonyos
Hilaku2 小时前
我用AI重构了一段500行的屎山代码,这是我的Prompt和思考过程
前端·javascript·架构
Cxiaomu2 小时前
React Native App 自动检测版本更新完整实现指南
javascript·react native·react.js
掘金安东尼2 小时前
前端周刊第439期(2025年11月3日–11月9日)
前端·javascript·vue.js
有蝉3 小时前
vue-office——支持多种文件(docx、excel、pdf)预览的vue组件库,支持vue2/3。也支持非Vue框架的预览。
vue.js·pdf·excel
起这个名字3 小时前
微前端应用通信使用和原理
前端·javascript·vue.js
QuantumLeap丶3 小时前
《uni-app跨平台开发完全指南》- 06 - 页面路由与导航
前端·vue.js·uni-app