vue3环境搭建

1、node.js的简介和安装

1.1 Node.js简介

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时环境（注意：它不是编程语言，也不是框架），核心作用是让 JavaScript 可以脱离浏览器，运行在服务器端或本地环境中。

核心特点：

跨平台：可运行在 Windows、Linux、macOS 等系统。
非阻塞 I/O 与事件驱动：通过异步非阻塞的方式处理请求，适合高并发场景（如 API 服务、实时应用）。
单线程 + 事件循环：通过事件循环机制处理异步操作，避免多线程切换的开销（但不适合 CPU 密集型任务）。
全栈 JavaScript：前后端都可以使用 JavaScript 开发，降低技术栈复杂度。

1.2 Node.js 与 Vue 框架的关联

Vue 是前端 JavaScript 框架（运行在浏览器中），专注于构建用户界面；Node.js 是JavaScript 运行时（主要运行在服务器或开发环境），二者本身没有 “运行时依赖”，但在开发流程和生态中深度绑定，主要关联如下：
1. 开发环境的基础依赖
Vue 项目的创建、运行、依赖管理完全依赖 Node.js：
Vue 框架本身（vue）、周边库（vue-router、pinia）以及开发工具（vue-cli、vite）均通过 npm（Node.js 自带的包管理工具）安装。
执行 npm install、npm run dev 等命令时，本质是在 Node.js 环境中运行脚本，处理依赖安装、开发服务器启动等工作。
2. 前端构建工具的运行环境
Vue 的单文件组件（.vue）包含模板、脚本、样式，浏览器无法直接识别，需要通过构建工具编译为原生 JS/CSS。而这些构建工具必须运行在 Node.js 环境中：
例如：Vue CLI（基于 Webpack）、Vite（基于 Rollup）等工具，本质是 Node.js 程序，它们在 Node.js 中解析 .vue 文件、处理 ES6+ 语法转换、压缩代码、处理图片等资源。
没有 Node.js，就无法启动开发服务器（npm run dev）或打包生产环境代码（npm run build）。
3. npm 生态的共享
Vue 及其周边生态（如 Vue Router、Pinia、UI 组件库 Element Plus 等）均通过 npm 仓库发布，而 npm 是 Node.js 内置的包管理工具：开发者通过 npm install vue 安装 Vue，本质是通过 Node.js 的包管理机制下载依赖到本地项目，这一过程完全依赖 Node.js。

1.3 安装node.js

打开官网https://nodejs.org/en下载对应操作系统的 LTS 版本。
双击安装包进行安装，安装过程中遵循默认选项即可(或者参照https://www.runoob.com/nodejs/nodejs-install-setup.html )。安装完成后，可以在命令行终端输入 node -v 和 npm -v 查看 Node.js 和 npm 的版本号。

2、Vite的介绍

Vite是由 Vue 作者尤雨溪主导开发的现代前端构建工具，于 2020 年正式发布，旨在解决传统构建工具（如 Webpack）在大型项目中存在的 “启动慢、热更新延迟” 等问题，提供极致的开发体验。
核心定位
Vite 是一个开发服务器 + 打包工具的组合：
开发时：作为基于原生 ES 模块的开发服务器，提供极速启动和热更新。
生产时：基于 Rollup 进行打包，输出优化后的静态资源。

3、通过Vite创建Vue3工程化项目

3.1 Vite+Vue3项目的创建、启动、停止

3.1.1 使用命令行创建工程

在磁盘的合适位置上,创建一个空目录用于存储多个前端项目
用vscode打开该目录
在vocode中打开命令行运行如下命令

npm create vite@latest

提示：第一次使用vite时会提示下载vite,输入y回车即可,下次使用vite就不会出现了

填写项目名称，选项选择vue+JavaScript。

3.1.2 安装项目所需依赖

cd进入刚刚创建的项目目录
安装基础依赖

npm install

3.1.3 启动项目

npm run dev

3.1.4 停止项目

命令行上 ctrl+c

3.2 Vite+Vue3项目的目录结构

• public/ 目录：用于存放一些公共资源，如 HTML 文件、图像、字体等，这些资源会被直接复制到构建出的目标目录中。
• src/ 目录：存放项目的源代码，包括 JavaScript、CSS、Vue 组件、图像和字体等资源。在开发过程中，这些文件会被 Vite 实时编译和处理，并在浏览器中进行实时预览和调试。以下是src内部划分建议：
  1. assets/ 目录：用于存放一些项目中用到的静态资源，如图片、字体、样式文件等。
  2. components/ 目录：用于存放组件相关的文件。组件是代码复用的一种方式，用于抽象出一个可复用的 UI 部件，方便在不同的场景中进行重复使用。
  3. layouts/ 目录：用于存放布局组件的文件。布局组件通常负责整个应用程序的整体布局，如头部、底部、导航菜单等。
  4. pages/ 目录：用于存放页面级别的组件文件，通常是路由对应的组件文件。在这个目录下，可以创建对应的文件夹，用于存储不同的页面组件。
  5. plugins/ 目录：用于存放 Vite 插件相关的文件，可以按需加载不同的插件来实现不同的功能，如自动化测试、代码压缩等。
  6. router/ 目录：用于存放 Vue.js 的路由配置文件，负责管理视图和 URL 之间的映射关系，方便实现页面之间的跳转和数据传递。
  7. store/ 目录：用于存放 Vuex 状态管理相关的文件，负责管理应用程序中的数据和状态，方便统一管理和共享数据，提高开发效率。
  8. utils/ 目录：用于存放一些通用的工具函数，如日期处理函数、字符串操作函数等。
• vite.config.js 文件：Vite 的配置文件，可以通过该文件配置项目的参数、插件、打包优化等。该文件可以使用 CommonJS 或 ES6 模块的语法进行配置。
• package.json 文件：标准的 Node.js 项目配置文件，包含了项目的基本信息和依赖关系。其中可以通过 scripts 字段定义几个命令，如 dev、build、serve 等，用于启动开发、构建和启动本地服务器等操作。
• Vite 项目的入口为 src/main.js 文件，这是 Vue.js 应用程序的启动文件，也是整个前端应用程序的入口文件。在该文件中，通常会引入 Vue.js 及其相关插件和组件，同时会创建 Vue 实例，挂载到 HTML 页面上指定的 DOM 元素中。