Vue3学习

Vue3学习

Vue3学习(一)——创建Vue3工程

1. 安装 Node.js

首先，确保你的系统上已经安装了 Node.js。你可以通过运行以下命令检查：

node -v
npm -v

2. 使用 Vite 创建 Vue 3 项目

在终端（命令行）中，运行以下命令来创建一个新的 Vue 3 项目：

npm create vite@latest my-vue-app -- --template vue

其中：

• my-vue-app 是你的项目名称，你可以根据需要更改。
• --template vue 表示选择 Vue 作为模板，Vite 将会自动为你设置 Vue 3 的工程。

3. 进入项目目录

cd my-vue-app

4. 安装依赖

进入项目目录后，运行以下命令来安装项目依赖：

npm install

运行后会在当前路径下生成一个node_modules的文件夹用于存放依赖包

5. 启动开发服务器

完成依赖安装后，你可以启动开发服务器：

npm run dev

然后你可以在浏览器中打开 http://localhost:5173，预览你的 Vue 3 项目。

6. 构建项目

如果需要构建生产版本，可以运行：

npm run build

这将生成一个 dist 文件夹，其中包含用于部署的静态文件。

Vue3学习（二）——工程文件说明

Vue3学习（三）——静态网页github.io部署

1. 首先修改vue3工程编译配置如下：

这样编译生成的文件将保存在docs文件夹下。

2. 编译vue3工程

   npm run build
   

3. 将Vue3工程整个上传至自己的上述仓库名的github仓库中

4. 在github仓库中的setting选项中，点击Pages选项，选择要部署的仓库分支，并选择docs文件夹。 略等几分钟即可部署成功。