npmstart.
开工台
开始一个项目

从 Vue + Vite
开始一个项目。

用模板与组合式 API,搭建清晰、轻巧的交互界面。

什么时候选它?

适合喜欢单文件组件和 Vue 模板语法的开发者。这个配方使用 Vite 的 Vue 模板,保持起点精简;它不是包含路由、状态管理等可选项的 create-vue 向导。

先准备开发环境

安装满足当前 Vite 要求的 Node.js 版本。Vue 单文件组件、模板和样式已经由启动模板接好。

在新的项目父目录中打开终端,逐条运行命令。初始化向导出现问题时,以终端中的实际提示为准。

创建、安装、运行

下面使用 npm 与 TypeScript 模板。其他包管理器可以在首页生成器切换;Yarn 命令以支持 dlx 的现代版本为前提。

终端命令
npm create vite@latest my-app -- --template vue-ts
cd my-app
npm install
npm run dev

跑起来之后,先改哪里?

从 src/App.vue 开始修改组件。如果应用增长到多个页面,再按需添加 Vue Router;跨组件状态也可以先用 Vue 自带能力处理。

什么时候考虑其他方案?

如果更偏好 JSX 和 React 生态,可以改用 React + Vite;如果主要是内容页面,Astro 也值得考虑。

看看另一个起点

命令之外,也把需求写清楚。

选择一个场景,把第一版范围与验收标准一起准备好。

生成项目开工包

官方资料

Vue + Vite 入门文档