创建 Vue 项目的六种方法

方法一：vue init webpack 项目名（vue-cli2.x的初始化方式）

默认打包方式webpack，可以选择vue2/vue3、npm/Yarn

以管理员身份打开命令行界面 (按住 shift 鼠标右键打开 PowerShell)，输入命令：

// 初始化项目：
vue init webpack xxx// (xxx是项目名)
// 根据个人需要选择一堆选项
// 进入项目文件目录：
cd 文件名
// 下载项目所需要的依赖
npm install
// 运行项目
npm run dev

方法二：vue create 项目名（vue-cli3.x的初始化方式）

默认打包方式webpack，可以选择vue2/vue3、npm/pnpm

// 以管理员身份打开命令行界面 (按住 shift 鼠标右键 打开 PowerShell)，输入命令
// 创建项目:
vue create XXX  (XXX是项目名)
// 然后根据个人需要选择一堆选项之后
// 安装依赖
npm install
// 运行项目
npm run serve // 默认使用serve运行，在package.json代码中可以更改为dev运行

方法三：npm init vue@latest

默认创建vue3 + Vite + npm的项目文件

// 安装并执行 create-vue，一个 Vue 官方的项目脚手架工具
npm init vue@latest
// 根据个人需要选择一堆选项
// 安装依赖
npm install
npm run dev

该方法创建的文件目录：

方法四：npm create vue@latest

这一指令将会安装并执行 create-vue，它是 Vue 官方的项目脚手架工具。你将会看到一些诸如 TypeScript 和测试支持之类的可选功能提示，创建的项目将使用基于 Vite 的构建设置，并允许我们使用 Vue 的单文件组件 (SFC)。该方法创建的文件目录：

方法五：npm create vite@latest

这方式是通过 npm create vite@latest命令的形式，先安装vite脚手架，再选择安装vue的形式。两者创建的项目，基本是一致的，且其中的vite和vue版本都不是最新的。默认创建vue3 + Vite + npm的项目文件

npm create vite@latest [项目名] --template vue

如图，该方法也支持创建其他框架的项目文件

npm install
npm run dev

该方法创建的文件目录：

方法四和方法五最终创建的项目工程文件还是有一些区别的

方法六：基于图形化界面的方式创建 vue 项目（vue ui）（vue-cli3.x）

@vue/cli3.0 增加一个可视化项目管理工具，全局安装完成 cli3.0 之后，可以直接在 cmd 输入命令：

vue ui

启动即可，地址默认是 localhost:8000 ( 回车后打开 ) 可以通过导入你的 vue 项目进行管理，也可以通过创建按钮进行可视化创建一个新的vue项目

创建 Vue 项目