Vue.js 项目创建流程

以下是一个详细的步骤指南，用于在Windows系统上使用NVM（Node Version Manager）和npm创建一个新的Vue.js项目。

1. 安装Node.js指定版本

首先，使用NVM安装Node.js的20.18.0版本。

nvm install 20

输出示例：

Downloading node.js version 20.18.0 (64-bit)...
Extracting node and npm...
Complete
npm v10.8.2 installed successfully.

请添加图片描述

2. 使用安装的Node.js版本

安装完成后，需要切换到刚安装的Node.js版本。

nvm use 20.18.0

输出示例：

Now using node v20.18.0 (64-bit)

在这里插入图片描述

3. 切换到项目目录

切换到D盘并创建一个新的目录用于存放Vue项目。

d:
cd llm
mkdir vue_project
cd vue_project

4. 创建Vue项目

使用npm命令创建一个新的Vue项目。

npm create vue@latest

在提示中输入所需的信息，例如项目名称、是否使用TypeScript等。

输出示例：

Need to install the following packages:
create-vue@3.12.1
Ok to proceed? (y) y> npx create-vueVue.js - The Progressive JavaScript Framework√ 请输入项目名称： ... quickStart
√ 请输入包名称： ... quickstart
√ 是否使用 TypeScript 语法？ ... 否 / 是
√ 是否启用 JSX 支持？ ... 否 / 是
√ 是否引入 Vue Router 进行单页面应用开发？ ... 否 / 是
√ 是否引入 Pinia 用于状态管理？ ... 否 / 是
√ 是否引入 Vitest 用于单元测试？ ... 否 / 是
√ 是否要引入一款端到端（End to End）测试工具？ » 不需要
√ 是否引入 ESLint 用于代码质量检测？ » 是
√ 是否引入 Prettier 用于代码格式化？ ... 否 / 是正在初始化项目 D:\llm\vue_project\quickStart...项目初始化完成，可执行以下命令：cd quickStartnpm installnpm run dev

在这里插入图片描述

5. 安装依赖并启动项目

进入项目目录，安装依赖并启动开发服务器。

cd quickStart
npm install
npm run dev

输出示例：

added 233 packages, and audited 234 packages in 1m63 packages are looking for fundingrun `npm fund` for detailsfound 0 vulnerabilities> quickstart@0.0.0 dev
> viteVITE v5.4.10  ready in 553 ms➜  Local:   http://localhost:5173/➜  Network: use --host to expose➜  Vue DevTools: Open http://localhost:5173/__devtools__/ as a separate window➜  Vue DevTools: Press Alt(⌥)+Shift(⇧)+D in App to toggle the Vue DevTools➜  press h + enter to show help

在这里插入图片描述