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

项目成功启动

相关推荐
WHOVENLY4 小时前
【javaScript】- 笔试题合集(长期更新,建议收藏,目前已更新至31题)
开发语言·前端·javascript
指尖跳动的光4 小时前
将多次提交合并成一次提交
前端·javascript
若梦plus4 小时前
JS之类型化数组
前端·javascript
若梦plus4 小时前
Canvas 深入解析:从基础到实战
前端·javascript
若梦plus4 小时前
Canvas渲染原理与浏览器图形管线
前端·javascript
C_心欲无痕5 小时前
vue3 - 依赖注入(provide/inject)组件跨层级通信的优雅方案
前端·javascript·vue.js
BD_Marathon6 小时前
Vue3_响应式数据的处理方式
前端·javascript·vue.js
嚣张丶小麦兜6 小时前
Vue常用工具库
前端·javascript·vue.js
小飞侠在吗7 小时前
Vue customRef
前端·javascript·vue.js