vue项目初始化

1. 初始化Vite项目

::: tabs

@tab pnpm

# 方式一：推荐
pnpm create vite . --template vue

# 方式二：也可以
pnpm create vite@latest . --template vue

@tab npm

# 方式一：推荐
npm create vite . --template vue

# 方式二：也可以
npm create vite@latest . --template vue

:::
::: info 说明
方式一会使用你本地缓存的 create-vite 版本
方式二会强制使用最新版本的 create-vite
:::

2. 官方的 Vue CLI

::: tabs

@tab pnpm

# 安装 Vue CLI（如果还没有安装）
pnpm install -g @vue/cli

# 创建项目
vue create my-project

@tab npm

# 安装 Vue CLI（如果还没有安装）
npm install -g @vue/cli

# 创建项目
vue create my-project

@tab yarn

# 安装 Vue CLI（如果还没有安装）
yarn global add @vue/cli

# 创建项目
vue create my-project

:::

::: info 提示
不过现在官方更推荐使用 Vite，因为它启动更快，热更新性能更好。
:::

3. TypeScript 支持

如果你想使用 TypeScript，可以选择对应的模板：

::: tabs

@tab pnpm

# Vite + Vue + TypeScript
pnpm create vite . --template vue-ts

# Vue CLI + TypeScript
vue create my-project
# 在交互式界面中选择 TypeScript

@tab npm

# Vite + Vue + TypeScript
npm create vite . --template vue-ts

# Vue CLI + TypeScript
vue create my-project
# 在交互式界面中选择 TypeScript

@tab yarn

# Vite + Vue + TypeScript
yarn create vite . --template vue-ts

# Vue CLI + TypeScript
vue create my-project
# 在交互式界面中选择 TypeScript

:::

4. 环境要求

::: warning 环境要求

• Node.js: 建议使用 Node.js 16.0 或更高版本
• 包管理器: pnpm (推荐) / npm / yarn
  :::

5. 项目创建后的步骤

创建项目后，需要安装依赖并启动开发服务器：

::: tabs

@tab pnpm

# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev

@tab npm

# 安装依赖
npm install

# 启动开发服务器
npm run dev

@tab yarn

# 安装依赖
yarn

# 启动开发服务器
yarn dev

:::

6. 项目结构

使用 Vite 创建的 Vue 项目基本结构：

my-vue-project/
├── public/
│   └── vite.svg
├── src/
│   ├── assets/
│   ├── components/
│   │   └── HelloWorld.vue
│   ├── App.vue
│   └── main.js
├── index.html
├── package.json
├── vite.config.js
└── README.md

7. 其他 Vite 模板选项

Vite 还支持其他模板：

# Vue 3 + JavaScript
pnpm create vite . --template vue

# Vue 3 + TypeScript
pnpm create vite . --template vue-ts

# 查看所有可用模板
pnpm create vite --help

8. 开发工具推荐

8.1 VS Code 插件

• Volar: Vue 3 官方推荐的 VS Code 插件
• TypeScript Vue Plugin (Volar): TypeScript 支持
• Vue VSCode Snippets: Vue 代码片段

8.2 浏览器插件

• Vue.js devtools: Vue 开发者工具

9. 常见问题

9.1 权限问题

如果在 Windows 上遇到权限问题，可以尝试：

# 以管理员身份运行终端
# 或者使用 npx
npx create-vite . --template vue

9.2 网络问题

如果下载速度慢，可以使用国内镜像：

# 设置 npm 镜像
npm config set registry https://registry.npmmirror.com

# 设置 pnpm 镜像
pnpm config set registry https://registry.npmmirror.com

::: tip 小贴士
推荐使用 pnpm 作为包管理器，它比 npm 和 yarn 更快，占用磁盘空间更少。
:::