创建项目
提示
需要 Node.js 18.3 或更高版本，注意确认 Node.js 版本是否符合要求，并且命令执行目录为需要创建项目的目录。
因 Vue.js 与 Vite 官方均提供了项目脚手架工具，且两种工具创建项目方式有些许差异，所以针对两种方式进行分开说明，实际使用选择其一即可： create-vue、create-vite 。
通过 create-vue 脚手架工具创建 推荐
选择一种包管理工具执行如下命令：
bash
npm create vue@latestbash
yarn create vue@latestbash
pnpm create vue@latest将会自动安装并执行 create-vue，看到如下可选功能提示，如果不确定是否需要开启某个功能，按下回车键选择 No 即可。
bash
✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add an End-to-End Testing Solution? … No / Cypress / Nightwatch / Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
✔ Add Vue DevTools 7 extension for debugging? (experimental) … No / Yes
Scaffolding project in ./<your-project-name>...
Done.bash
✔ 请输入项目名称： … <你的项目名称>
✔ 是否使用 TypeScript 语法？ … 否 / 是
✔ 是否启用 JSX 支持？ … 否 / 是
✔ 是否引入 Vue Router 进行单页面应用开发？ … 否 / 是
✔ 是否引入 Pinia 用于状态管理？ … 否 / 是
✔ 是否引入 Vitest 用于单元测试？ … 否 / 是
✔ 是否要引入一款端到端（End to End）测试工具？ › 不需要 / Cypress / Nightwatch / Playwright
✔ 是否引入 ESLint 用于代码质量检测？ … 否 / 是
✔ 是否引入 Prettier 用于代码格式化？ … 否 / 是
✔ 是否引入 Vue DevTools 7 扩展用于调试? (试验阶段) … 否 / 是
正在初始化项目 ./<你的项目名称>
项目初始化完成。通过 create-vite 脚手架工具创建
crearte-vite 项目脚手架创建有如下两种方式，自行选择一种即可。
按照提示创建
选择一种包管理器执行如下命令：
bash
npm create vite@latestbash
yarn create vitebash
pnpm create vite输入自定义项目名称
bash
? Project name: › vite-project选择技术框架 Vue
bash
? Select a framework: › - Use arrow-keys. Return to submit.
Vanilla
❯ Vue
React
Preact
Lit
Svelte
Solid
Qwik
Others选择 TypeScript
提示
这一步的 Customize with create-vue 选项，则继续使用 create-vue 脚手架进行项目创建，参考上文 通过 create-vue 脚手架工具创建 即可。
bash
? Select a variant: › - Use arrow-keys. Return to submit.
❯ TypeScript
JavaScript
Customize with create-vue ↗
Nuxt ↗通过预设模板创建
官方也提供命令行选项，直接指定项目名称和模板进行创建，目前支持预设模板如下：
| JavaScript | TypeScript |
|---|---|
| vanilla | vanilla-ts |
| vue | vue-ts |
| react | react-ts |
| preact | preact-ts |
| lit | lit-ts |
| svelte | svelte-ts |
| solid | solid-ts |
| qwik | qwik-ts |
以创建 Vite + Vue + TypeScript 项目为例，指定模板为 vue-ts，将 <your-project-name> 替换为所需项目名称，然后选择一种包管理器执行如下命令：
bash
npm create vite@latest <your-project-name> --template vue-tsbash
npm create vite@latest <your-project-name> -- --template vue-tsbash
yarn create vite <your-project-name> --template vue-tsbash
pnpm create vite <your-project-name> --template vue-ts也可以用 . 作为项目名称，代表在当前目录中创建项目脚手架。
项目结构示例
项目创建完成后，可参考如下结构对项目目录进行优化调整。
bash
.
├── .vscode # vscode 插件配置
├── docs # 项目文档说明
├── public # 公共的静态资源（如：favicon.ico 等）
├── src # 源码目录
│ ├── api # 网络服务请求
│ ├── assets # 静态资源（可变路径，如：图片、图标、字体等）
│ ├── components # 公共组件
│ ├── directives # 自定义指令
│ ├── enums # 自定义枚举
│ ├── hooks # 组件函数
│ ├── i18n # i18n 国际化配置
│ ├── layout # Layout 布局文件
│ ├── plugins # 插件相关
│ ├── router # 路由相关配置
│ ├── stores # 状态管理配置
│ ├── styles # 全局样式
│ ├── types # 自动导入函数和类型声明文件
│ ├── utils # 通用工具函数
│ ├── views # 页面视图
│ ├── App.vue # App 根组件（路由组件的顶层路由）
│ └── main.ts # 应用主入口文件
├── .gitignore # git 忽略文件配置
├── LICENSE # 开源协议 LICENSE
├── README.md # 应用说明文件
├── env.d.ts # .vue 文件类型声明文件
├── index.html # 主页面文件
├── package.json # 应用包配置文件
├── tsconfig.app.json # 项目 ts 相关配置
├── tsconfig.json # TypeScript 编译配置文件
├── tsconfig.node.json #
└── vite.config.ts # vite 配置文件