快速入门Vue3
一、安装 Node.js 和 npm
- Vue 3 是基于 JavaScript 的框架，Node.js 提供了 JavaScript 运行环境，npm 是 Node.js 的包管理工具，用于安装和管理 Vue 3 及相关依赖。
- 访问 Node.js 官方网站（https://nodejs.org/），根据操作系统选择合适的版本进行下载安装。安装完成后，打开终端或命令提示符，输入以下命令来验证是否安装成功：
- 检查 Node.js 版本：
node -v - 检查 npm 版本：
npm -v - 如果两个命令都能正常输出版本号，说明安装成功。
- 检查 Node.js 版本：
二、创建 Vue 3 项目
1. 使用 Vue CLI 创建
- 这是Vue2的创建方式，因为目前Vue2已经停止维护所以建议使用下面的Vite来创建Vue3项目。
2. 使用 Vite 创建
Vite 是一个现代的前端构建工具，它提供了快速的开发体验，也可以用来创建 Vue 3 项目。
- 首先，安装 Vite：
npm create vite@latest- 这里
my-vue3-project是自己的项目名称，之后会让选择一些配置，不了解的通通可以回车默认，因为后期还可以重新配置。 - 进入项目目录：
cd my-vue3-project- 安装项目依赖：
npm install- 启动开发服务器：
npm run dev- 可以直接输入小写字母o打开浏览器，或者手动打开浏览器访问
http://localhost:3000（端口号每个人可能不一样），查看项目运行情况。
三、项目结构介绍
public：存放静态资源，如index.html，它是项目的入口 HTML 文件。src：存放项目的源代码。main.js：是 Vue 应用的入口文件，负责创建 Vue 实例。App.vue：是项目的根组件。components：存放项目中的自定义组件。assets：存放图片、样式表等静态资源。router：如果项目使用了 Vue Router 进行路由管理，相关配置文件会存放在这个目录。store：如果项目使用了 Vuex 进行状态管理，相关代码会存放在这个目录。
node_modules：存放项目依赖的模块，由 npm 自动安装生成。package.json：定义了项目的依赖、脚本等信息。vue.config.js：可选的配置文件，用于自定义 Vue CLI 的配置。
四、开发 Vue 3 项目
1. 编写组件
组件是 Vue 应用的基本构建块。在
src/components目录下创建新的.vue文件来定义组件。路由和状态管理（可选）
如果项目需要多页面功能，可以使用 Vue Router 进行路由管理。在
src/router目录下配置路由。对于复杂的状态管理，可以使用 Vuex。在
src/store目录下定义状态和操作逻辑。
五、构建和部署
当项目开发完成后，可以使用以下命令构建项目：
- 使用 Vue CLI 创建的项目：
npm run build- 使用 Vite 创建的项目：
npm run build构建完成后，会在项目目录下生成一个
dist文件夹，里面包含了构建后的静态资源文件。你可以将这些文件部署到任何支持静态文件服务的服务器上，如 Nginx、Apache 等，或者使用云平台的静态网站托管服务来部署你的 Vue 3 应用。