Vue的安装创建与运行

安装基础环境
[创建 Vue 项目](#创建 Vue 项目)
[运行 Vue 项目](#运行 Vue 项目)
注意点
- [npm install 指令](#npm install 指令)
- [package.json 与 package-lock.json](#package.json 与 package-lock.json)
- [Node.js 版本与 OpenSSL 兼容问题](#Node.js 版本与 OpenSSL 兼容问题)
- [IDEA 配置](#IDEA 配置)

Vue 是一款用于构建用户界面的 JavaScript 框架，它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。

安装基础环境

Vue 开发依赖 Node.js 和 npm（Node 包管理器）

Node.js 是基于 ChromeV8 引擎的 JavaScript 运行时环境，npm（Node Package Manager）是 Node.js 的默认包管理器，用于安装、管理和发布 JavaScript 包，随 Node.js 一起安装。

安装 Node.js 官网下载地址是：https://nodejs.org/zh-cn/

Node.js 的默认安装路径是：C:\Program Files\nodejs\，支持自定义安装路径

安装完成后，打开命令提示符执行以下命令，能显示版本号即安装成功：

bash 复制代码

# 检查 Node.js 版本
node -v
# 检查 npm 版本
npm -v

Node.js 安装时会自动把 C:\Program Files\nodejs 加入系统变量 PATH 中

配置 npm 的全局安装路径

使用管理员身份运行命令行，在命令行中，执行如下指令：

bash 复制代码

npm config set prefix "C:\Program Files\nodejs"

默认 npm 镜像在国外，下载速度慢，切换为淘宝镜像

bash 复制代码

npm config set registry https://registry.npmmirror.com

安装 Vue-cli

Vue CLI 是官方为 Vue 打造的工程化脚手架工具，致力于将 Vue 生态中的工具基础标准化，它确保了各种构建工具能够基于智能的默认配置即可平稳衔接。

bash 复制代码

npm install -g @vue/cli

验证安装

创建 Vue 项目

执行创建命令，若遇到 npm error code EPERM 报错可以尝试使用管理员权限操作

bash 复制代码

vue create vue-study

执行命令后会出现交互式选择，选择 vue 版本，其他都按回车就可以

目录结构如图

目录结构：

vue-study/ #项目根目录

├── node_modules/ # 项目依赖

├── public/ # 静态资源

├── src/ # 核心代码目录

│ ├── assets/ # 静态资源

│ ├── components/ # 公共组件

│ ├── App.vue # 根组件（所有页面的父组件）

│ └── main.js # 项目入口文件（项目启动的起点）

├── package.json # 项目配置核心（依赖清单、脚本命令）

└── vue.config.js # 项目自定义配置

运行 Vue 项目

首先需要进入项目目录

bash 复制代码

cd vue-study

再启动开发服务器

bash 复制代码

npm run serve

终端会输出访问地址

打开浏览器输入该地址，能看到 Vue 欢迎页面即成功！

注意点

这里补充几个注意点

首先是 npm install 指令的使用

npm install 指令

npm install 是 Node 包管理器（npm）的核心指令，核心作用是根据项目根目录 package.json 文件中声明的依赖清单，读取其中的生产依赖（dependencies）和开发依赖（devDependencies）字段，下载并安装所有所需的依赖包到 node_modules 文件夹，同时生成 / 更新 package-lock.json 锁定依赖的精确版本。

前面的示范中没有执行 npm install 命令，这是因为使用的 vue create 命令执行流程包含了 npm install 的核心工作

终端输出内容中包含 Installing project dependencies... 即 Vue CLI 自动完成依赖安装

因此 npm install 判断是否需要执行的关键是：
项目的 node_modules 文件夹是否存在且完整，且与 package.json 依赖列表匹配

下面列举几个需要执行 npm install 命令的场景：

刚获取或克隆本地外的 Vue 项目，由于 node_modules 体积大，不会被提交到 Git / 打包分享，项目里只有 package.json，没有实际依赖文件，需要执行 npm install；
vue create 创建项目时终端提示 npm ERR!（网络中断、权限不足等），Vue CLI 自动执行 npm install 失败，node_modules 不完整或缺失，需要进入项目目录执行 npm install 进行手动补装；
拉取修改后的 package.json 文件或手动修改/更新 package.json 依赖，依赖清单不会自动同步到 node_modules，缺少新增的依赖，需要执行 npm install 让 npm 识别并安装。

package.json 与 package-lock.json

package.json 是项目的依赖声明清单（声明式），记录项目需要的依赖及模糊版本范围；package-lock.json 是依赖版本锁文件（精确式），记录安装时每个依赖的精确版本、下载地址、完整依赖树。

版本描述的核心差异

假设 package.json 中写：

^4.9.0 是模糊版本，每次执行 npm install，装的版本可能不一样

后续何时执行 npm install，都会严格装 4.9.0，避免版本兼容问题

依赖树的差异

Vue 依赖多个子包（如 @vue/runtime-core、@vue/reactivity）：

package.json 只显式写 "vue": "^3.3.0"，不会提子包；

package-lock.json 会完整记录 vue 及其所有子包的精确版本，确保子包版本也一致；

Vue 项目中两者的配合流程：

Vue CLI 自动执行 npm install 会根据 package.json 下载依赖，同时生成 package-lock.json，锁定所有依赖的精确版本。

Node.js 版本与 OpenSSL 兼容问题

OpenSSL 是一个开源的加密工具集/函数库，也是目前最主流的跨平台加密解决方案之一，它不仅提供了丰富的加密算法实现，还封装了 SSL/TLS 协议，是支撑互联网安全的基础组件。

Node.js 底层的加密功能完全依赖 OpenSSL 实现，不同版本的 Node.js 会内置不同版本的 OpenSSL。

问题描述：

我的 Vue 项目中包含部分旧依赖（如旧版 webpack、@vue/cli-service），这些工具的代码里还在调用 OpenSSL 1.1 接口，但用 Node.js 17+ 运行项目时，Node.js 内置的是 OpenSSL 3.0，这个版本已经不支持旧接口了，因此运行项目时抛出 ERR_OSSL_EVP_UNSUPPORTED 错误。

解决方案：

修改 package.json 文件中的 dev 脚本配置：

json 复制代码

  "scripts": {
    "dev": "set NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve"
  }

set 是 Windows 系统中设置环境变量的命令；
NODE_OPTIONS 是 Node.js 进程级的环境变量，用于给 Node 进程传递启动参数，只对本次启动的 Node 进程有效；
--openssl-legacy-provider 是 Node.js 的启动参数，强制启用 OpenSSL 的旧版提供程序，以兼容仅支持 OpenSSL 1.1 的旧依赖；
&& 是命令连接符，代表前一个命令执行成功后，再执行后面的 vue-cli-service serve；
vue-cli-service serve 是 Vue CLI 封装的开发启动命令，核心是启动 Vue 项目的本地开发服务器；执行 npm run dev 就是调用该命令启动本地开发环境，可在浏览器预览、调试项目。

IDEA 配置

若使用 IDEA 打开 Vue 项目需确保 IDEA 的 JavaScript 版本配置为 ECMAScript 6+，因为 Vue 许多代码是基于 ES6+ 特性，IDEA 对 Vue 项目的默认适配已包含 ES6 支持，只需确认配置未被意外降级即可。