Vue3.js安装教程

一、安装 Node.js

以下都是推荐稳定版本中最新的版本 （如有其它需求 Node.js >> 下载链接）

Ⅰ、操作系统 >>

Window(x64)

>> 20.16.0(LTS) 下载链接

Ⅱ、安装Node.js

Ⅲ、验证版本

node -v

npm -v

Result:

PS C:\Users\11825> node -v
v20.16.0
PS C:\Users\11825> npm -v
10.8.1

Ⅳ、配置默认安装目录和缓存日志目录（选做）

适用于 不想C盘💥💥💥人群

A、在D盘上(也可以其它盘)创建一个文件夹

D:
cd D:\Node
mkdir nodejs
cd nodejs
mkdir node_cache
mkdir node_global

Result:

(base) PS D:\Node\nodejs> dir
    目录: D:\Node\nodejs
Mode                 LastWriteTime         Length Name
----                 -------------         ------ ----
d-----         2024/8/19     17:27                node_cache
d-----         2024/8/19     17:27                node_global

B、配置默认安装目录和缓存日志目录

npm config set prefix "D:\Node\nodejs\node_global"
npm config set cache "D:\Node\nodejs\node_cache"

C、配置环境变量

·
这里我直接在Path上添加目录：D:\Node\Node.js\（我自己是没什么问题的 ƪ(˘⌣˘)ʃ ）

---

二、安装 Vue

Ⅰ、下载 Vue

npm install -g @vue/cli

Ⅱ、验证版本

npm list -g

Result:

D:\nodejs\node_global
`-- @vue/cli@5.0.8

Ⅲ、创建一个 Vue 应用

A、首先在你需要创建一个文件夹，用来保存你的Vue 应用

比如：我在 D盘 上创建一个 Vue3文件夹
路径：D:\Vue3

B、然后运行刚刚下好npm的包，创建Vue应用

官网上也有教程 跳转>>>>

npm create vue@latest

Result:

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

C、跟着上面的命令操作

具体的文件目录有变化不建议跟着我，看你命令窗口的具体命令

cd yolov10_DriverCarSystem

npm install

npm run dev

Result:

PS D:\Vue3> cd .\yolov10_DriverCarSystem\
PS D:\Vue3\yolov10_DriverCarSystem> npm install
npm warn deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
npm warn deprecated rimraf@3.0.2: Rimraf versions prior to v4 are no longer supported
npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
npm warn deprecated @humanwhocodes/object-schema@2.0.3: Use @eslint/object-schema instead
npm warn deprecated @humanwhocodes/config-array@0.11.14: Use @eslint/config-array instead

added 140 packages, and audited 141 packages in 14m

29 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
PS D:\Vue3\yolov10_DriverCarSystem> npm run dev

> yolov10_module@0.0.0 dev
> vite


  VITE v5.4.1  ready in 367 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

Ⅳ、成功