1. 前言

本文基于 openEuler 22.03 LTS 环境，按照 Vue 官方推荐方式，使用 create-vue 脚手架搭建 Vue3 项目，并完成开发调试与生产环境静态资源构建，最终生成可直接部署的 dist 静态资源包。

2. 官网文档

官方参考文档：：https://cn.vuejs.org/guide/quick-start.html#creating-a-vue-application

3. 前置环境准备

Vue3 + Vite 构建工具要求 Node.js 版本：^20.19.0 || >=22.12.0 ，创建项目前先校验系统环境是否满足要求。

3.1. 操作系统信息

[developer@openeuler ~]$ cat /etc/os-release
NAME="openEuler"
VERSION="22.03 LTS"
ID="openEuler"
VERSION_ID="22.03"
PRETTY_NAME="openEuler 22.03 LTS"
ANSI_COLOR="0;31"

3.2. Node.js 版本

查看 Node.js 版本命令：

node -v

查看 Node.js 版本：

[developer@openeuler ~]$ node -v
v22.21.1

当前 Node.js v22.21.1 满足版本要求，可正常创建与运行 Vue 项目。

4. 创建 Vue 项目

4.1. 执行创建命令

4.1.1. 创建命令

进入项目存放目录，执行脚手架初始化命令：

npm create vue@latest

create-vue 是 Vue 官方提供的项目脚手架工具，底层基于 Vite 构建，支持按需选配 TypeScript、路由、状态管理等工程化能力。

4.1.2. 命令说明

命令执行后会进入交互式配置流程，可根据需求选择对应能力，入门场景可按以下选项配置：

1. 项目名称：自定义项目名，示例为 hello-vue
2. TypeScript 语法：入门场景选择 No
3. 附加功能：包含 Vue Router、Pinia、ESLint 等，入门选择 none
4. 试验特性：选择 none，避免不稳定特性
5. 跳过示例代码：选择 No，保留官方示例便于学习

4.1.3. 完整交互输出如下

[developer@openeuler code]$ npm create vue@latest
Need to install the following packages:
create-vue@3.22.4
Ok to proceed? (y) y


> npx
> create-vue

┌  Vue.js - The Progressive JavaScript Framework
│
◇  请输入项目名称：
│  hello-vue
│
◇  是否使用 TypeScript 语法？
│  No
│
◇  请选择要包含的功能： (↑/↓ 切换，空格选择，a 全选，回车确认)
│  none
│
◇  选择要包含的试验特性： (↑/↓ 切换，空格选择，a 全选，回车确认)
│  none
│
◇  跳过所有示例代码，创建一个空白的 Vue 项目？
│  No

正在初始化项目 /home/developer/Desktop/code/hello-vue...
│
└  项目初始化完成，可执行以下命令：

   cd hello-vue
   npm install
   npm run dev

| 可选：使用以下命令在项目目录中初始化 Git：

   git init && git add -A && git commit -m "initial commit"

4.1.4. 完整交互输出过程截图

4.2. 项目核心目录说明

项目创建完成后，核心文件与目录分工如下：

• src/：项目源码主目录，存放 Vue 组件、样式、入口文件
• public/：静态公共资源目录，资源不会被构建处理，直接复制到产物
• vite.config.js：Vite 构建工具的配置文件
• package.json：项目依赖管理与脚本配置
• index.html：项目入口 HTML 文件

5. 开发调试

5.1. 进入项目目录

cd <your-project-name>

示例：

[developer@openeuler code]$ cd hello-vue
[developer@openeuler hello-vue]$ 

5.2. 安装项目依赖

执行依赖安装命令，下载项目运行所需的所有依赖包。
安装完成后会生成 node_modules 目录，存放所有项目依赖文件。

安装依赖命令：

npm install

备注：安装依赖时间可能较长，请耐心等待。
提示：若依赖下载速度慢，可切换为国内 npm 镜像源提升下载速度。

安装依赖效果：

[developer@openeuler hello-vue]$ npm install

added 120 packages, and audited 121 packages in 3m

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

found 0 vulnerabilities

5.3. 启动开发服务器

启动开发服务器命令：

npm run dev

启动本地开发服务器的效果：

[developer@openeuler hello-vue]$ npm run dev

> hello-vue@0.0.0 dev
> vite


  VITE v8.1.0  ready in 916 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

5.4. 运行效果验证

访问 http://localhost:5173/ 即可看到 Vue 项目默认欢迎页；
同时可通过 http://localhost:5173/__devtools__/ 打开 Vue 开发者工具，调试组件结构与响应式状态。

5.4.1. http://localhost:5173/

5.4.2. http://localhost:5173/devtools/

6. 生产构建与静态资源

6.1. 构建命令

npm run build

项目开发完成后，执行构建命令生成生产环境可用的静态资源，最终产物输出到项目根目录的 dist 文件夹。

6.2. 执行构建命令

[developer@openeuler hello-vue]$ npm run build

> hello-vue@0.0.0 build
> vite build

vite v8.1.0 building client environment for production...
✓ 24 modules transformed.
computing gzip size...
dist/index.html                  0.42 kB │ gzip:  0.28 kB
dist/assets/index-DIjQh30N.css   3.56 kB │ gzip:  1.16 kB
dist/assets/index-BwP44IlQ.js   70.41 kB │ gzip: 27.35 kB
                                       
✓ built in 225ms

6.3. 静态资源产物说明

dist 目录即为生成的完整静态资源包，可直接部署到任意 Web 服务器，核心结构与作用：

• index.html：应用入口页面，自动引入构建后的 JS、CSS 资源
• assets/：存放所有构建后的静态资源
  • JS 文件：打包压缩后的业务代码，文件名带哈希值，用于解决浏览器缓存问题
  • CSS 文件：合并压缩后的样式文件
  • 图片/字体等资源：经过压缩与哈希命名的静态资源

该目录下所有文件均为纯静态资源，无需 Node.js 环境，可直接托管到 Nginx、Apache 等 Web 服务器中，对外提供访问。