Vue项目创建方式（多种）-EW帮帮网

Vue项目创建方式

（建议创建时目录先切换到桌面！）

Ctrl+E找到桌面，路径中输入cmd覆盖后按回车键进入终端

方式一：使用 Vue CLI（Vue2和Vue3）

1.安装 Node.js （推荐先下载nvm使用nvm版本管理,然后通过nvm获取node.js）和 npm

2.安装 Vue CLI（支持可视化界面）：

npm install -g @vue/cli
# 或使用 yarn
yarn global add @vue/cli

3.验证 Vue CLI 版本：

a.可视化仪表盘启动

vue ui

b.命令行启动

vue create my-vue2-project

启动 Vue CLI 可视化仪表盘创建 Vue项目：

浏览器会自动打开可视化界面，按以下步骤操作：
1.在左侧导航选择 "创建"，选择项目保存路径，点击 "在此创建项目"
2.输入项目名称，点击 "下一步"
3.选择 "手动" 配置项目
4.勾选所需特性（至少勾选 Babel），点击 "下一步"
5.在 "Vue 版本" 选项中选择版本
6.配置其他选项（如 ESLint 规则、是否使用路由等）
7.点击 "创建项目"，等待创建完成

方式二：使用 Vite（Vue3项目）

创建 Vue3 项目：

一般不写--template vue，手动配置即可

npm create vite@latest 项目名称


# npm 6.x
npm create vite@latest 项目名称 --template vue

# npm 7+
npm create vite@latest 项目名称 -- --template vue

# yarn
yarn create vite 项目名称 --template vue

# pnpm
pnpm create vite 项目名称 --template vue

--template vue 是指定创建项目时使用的模板类型，这里表示使用 Vue 官方提供的基础 Vue 模板。

具体来说：

template 是 create vite 命令的参数，用于指定项目模板
vue 是模板名称，代表这是一个基于 Vue 的基础项目模板

使用这个模板创建的项目会包含：

最基础的 Vue 项目结构
已配置好的 Vue 单文件组件 (SFC) 支持
与 Vite 集成的开发环境配置
基本的构建和开发命令

除了 vue 模板，Vite 还提供其他相关模板：

vue-ts：带 TypeScript 支持的 Vue 模板
vue-jsx：带 JSX 支持的 Vue 模板
vue-ts-jsx：带 TypeScript 和 JSX 支持的 Vue 模板

选择不同的模板会自动配置相应的开发环境，省去手动配置的步骤。

方式三：使用 create-vue（官方推荐）

创建项目：

# npm
npm create vue@latest

# yarn
yarn create vue

# pnpm
pnpm create vue

create-vue@3.18.0 要求 Node.js 版本至少为 ^20.19.0 或 >=22.12.0

按交互提示配置：
输入项目名称
选择是否添加 TypeScript、JSX 支持
选择是否安装 Vue Router、Pinia 等工具

最终效果

拖进VS Code里:

--> 按Ctrl+` 调出终端控制台，输入npm install 安装所需依赖

然后通过NPM脚本点击运行

版本查看方式

查看 Node 版本：node -v
查看 npm 版本：npm -v
查看 Vue CLI 版本：vue --version

Vue项目创建方式（多种）