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

项目成功启动

相关推荐
摸鱼仙人~6 分钟前
Vue 核心知识体系(大厂秋招方向)
前端·javascript·vue.js
ljt272496066123 分钟前
Vue笔记--状态管理
前端·vue.js·笔记
mldong28 分钟前
Node 开发者也有自己的轻量工作流引擎了:npm i 一行,5 分钟跑通一条审批流
javascript·后端·typescript
Larru-Sun29 分钟前
Nginx + Vue Router 基础:SPA History 部署、反向代理与请求分流
运维·vue.js·nginx
多加点辣也没关系10 小时前
JavaScript|第31章:表单与控件
开发语言·javascript·ecmascript
Highcharts.js13 小时前
常见报错排雷指南2:导出失败的官方解法
javascript·react.js·ecmascript·highcharts·可视化图表·导出模块失败·导出服务
梦想平凡13 小时前
百游棋牌源代码开发搭建教程(五):房间创建、座位分配与请求幂等实现
前端·javascript·数据库·源代码管理
杨芋爽15 小时前
管理后台列表页为什么一直转圈?从一次 1+N 请求扇出聊聊前端性能优化
javascript