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

项目成功启动

相关推荐
傣味洋芋37 分钟前
WebSocket
网络·vue.js·websocket·网络协议
摘星编程39 分钟前
Flutter for OpenHarmony 实战:SliverList 滑动列表详解
android·javascript·flutter
凡大来啦44 分钟前
Element plus的Select选择器点击不出现下拉列表
javascript·vue.js·elementui
jaqi.l1 小时前
uni-app 小程序全局挂载分享功能,并动态配置页面是否可以分享
vue.js·小程序·uni-app
十年磨一剑~1 小时前
springboot+vue+mysql手搓一个管理系统
vue.js·spring boot·mysql
DEMO派1 小时前
CSS优先级规则以及如何提升优先级方案详解
前端·javascript·css·vue.js·reactjs·html5·angular.js
hhcccchh1 小时前
学习vue第十一天 Vue3组件化开发指南:搭积木的艺术
前端·vue.js·学习
小夏卷编程1 小时前
ant-design-vue 2.0 a-table 中实现特殊行样式,选中样式,鼠标悬浮样式不一样
前端·javascript·vue.js
一颗烂土豆1 小时前
ECharts 水球图不够炫?试试 RayChart 的创意可视化玩法
前端·vue.js·数据可视化
如果你好1 小时前
TypeScript 接口(interface)完全指南:语法、特性与实战技巧
vue.js·typescript