快速部署和启动Vue3项目

快速入门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
  • 如果两个命令都能正常输出版本号，说明安装成功。

二、创建 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 应用。