如何创建一个vue项目？详细教程，如何创建第一个vue项目？

1. 已经安装node.js
2. 在自己找的到的地方新建一个文件夹用于存放项目，记住文件夹的存放路径，以我为例，我的文件夹路径为D:\tydic

打开cmd命令窗口，进入刚刚的新建文件夹

切换硬盘：  D:

进入文件夹：cd tydic

使用官方脚手架新建项目：npm create vue@latest

（可能直接进入项目名，也可能问你是否使用vue3.10.3这个版本创建项目，直接yes就好了）

输入新建项目的名称demo3

开始设置选择，你将会看到一些诸如 TypeScript 和测试支持之类的可选功能提示：

 

✔ Project name: … <your-project-name>

✔ Add TypeScript? … No / Yes

询问你是否使用TypeScript语法？也就是JavaScript的升级版，目前新手不需要安装这个，会增加学习的成本，可以后面进阶了再去单独学习。

✔ Add JSX Support? … No / Yes

涉及Render函数使用等的一个方便阅读的插件，目前不需要，后面会用到

✔ Add Vue Router for Single Page Application development? … No / Yes

✔ Add Pinia for state management? … No / Yes

需要用到路由和pinia，选择yes（左右箭头可以更换选择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

这个目前千万不要装，会安装很多配置，可能会导致代码启动不起来，且找不到哪里出错，需要把他强制关闭还不知道怎么关，很复杂，会增加很多负担，比TypeScript还麻烦，目前不要装。

✔ Add Prettier for code formatting? … No / Yes

✔ Add Vue DevTools 7 extension for debugging? (experimental) … No / Yes

剩下两个也不需要

Scaffolding project in ./<your-project-name>...

Done

✔ Project name: … <your-project-name>

✔ Add TypeScript? … No / Yes

询问你是否使用TypeScript语法？也就是JavaScript的升级版，目前新手不需要安装这个，会增加学习的成本，可以后面进阶了再去单独学习。

✔ Add JSX Support? … No / Yes

涉及Render函数使用等的一个方便阅读的插件，目前不需要，后面会用到

✔ Add Vue Router for Single Page Application development? … No / Yes

✔ Add Pinia for state management? … No / Yes

需要用到路由和pinia，选择yes（左右箭头可以更换选择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

这个目前千万不要装，会安装很多配置，可能会导致代码启动不起来，且找不到哪里出错，需要把他强制关闭还不知道怎么关，很复杂，会增加很多负担，比TypeScript还麻烦，目前不要装。

✔ Add Prettier for code formatting? … No / Yes

✔ Add Vue DevTools 7 extension for debugging? (experimental) … No / Yes

剩下两个也不需要

Scaffolding project in ./<your-project-name>... 

Done.

此时项目已经创建，可以在我们刚刚新建的文件夹里看到

结构如下

可以点开package.json查看一下

然后执行绿色提示命令运行项目

cd <your-project-name>

npm install

npm run dev

一定要先进入项目文件

再npm install

再npm run dev

顺序不要弄错，

否则会出现以下vite既不是内部也不是外部的错误

没有npm i就没有第三方依赖，run不起来的

输入npm i下载依赖

下载成功

运行项目

这样我们就启动了我们第一个vue项目。