创建一个简洁的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)

项目成功启动

相关推荐
Mintopia7 分钟前
3D Quickhull 算法:用可见性与冲突图搭建空间凸壳
前端·javascript·计算机图形学
白日依山尽yy7 分钟前
Vue、微信小程序、Uniapp 面试题整理最新整合版
vue.js·微信小程序·uni-app
Mintopia8 分钟前
Three.js 三维数据交互与高并发优化:从点云到地图的底层修炼
前端·javascript·three.js
BillKu32 分钟前
Vue3数组去重方法总结
前端·javascript·vue.js
GDAL35 分钟前
Object.freeze() 深度解析:不可变性的实现与实战指南
javascript·freeze
江城开朗的豌豆1 小时前
Vue+JSX真香现场:告别模板语法,解锁新姿势!
前端·javascript·vue.js
摸鱼仙人~1 小时前
Vue.js 指令系统完全指南:深入理解 v- 指令
前端·javascript·vue.js
江城开朗的豌豆1 小时前
Vue列表渲染的坑:为什么不能用index当key?血泪教训总结!
前端·javascript·vue.js
前端小巷子1 小时前
Vue 虚拟 DOM
前端·vue.js·面试
江城开朗的豌豆1 小时前
Vue中key的妙用:为什么你的列表渲染总出bug?
前端·javascript·vue.js