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

项目成功启动

相关推荐
Rooting++18 小时前
package.json三种依赖的区别
vue.js·json
ldmd28418 小时前
Typescript 基础篇--1
前端·javascript·typescript
Amctwd18 小时前
【JavaScript】JS 异步 Promise 解析
开发语言·前端·javascript
Yeh20205819 小时前
springboot+vue笔记
vue.js·spring boot·笔记
放下华子我只抽RuiKe519 小时前
React 从入门到生产(一):JSX 与组件思维
前端·javascript·人工智能·pytorch·深度学习·react.js·前端框架
冴羽yayujs19 小时前
JavaScript 9 个先有库再有 API 的故事
开发语言·javascript·ecmascript
m0_7510186619 小时前
docker 安装 nginx
vue.js·nginx·docker
油丶酸萝卜别吃20 小时前
JavaScript 深度合并函数 deepMerge 实现指南(附完整测试用例)
开发语言·javascript·测试用例
kyriewen20 小时前
Copilot下个月按Token收钱,我算了一笔账:重度用户一年要多花3000块
前端·javascript·openai
zyl8372120 小时前
3Dmol.js + Vue3快速上手
vue.js