简单实现vue github

实现一个简单的 Vue 项目并上传到 GitHub

创建 Vue 项目

使用 Vue CLI 快速初始化一个 Vue 项目，确保已安装 Node.js 和 npm/yarn。运行以下命令创建项目：

npm init vue@latest simple-vue-project

或使用 yarn：

yarn create vue simple-vue-project

按照提示选择需要的配置（如 Router、Pinia 等），或直接按回车使用默认配置。

进入项目目录并安装依赖

cd simple-vue-project
npm install

启动开发服务器

npm run dev

项目默认会在 http://localhost:5173 运行。

初始化 Git 仓库 在项目根目录执行：

git init

创建 .gitignore 文件 在项目根目录创建 .gitignore 文件，内容如下：

node_modules/
dist/
.DS_Store

提交代码到本地仓库

git add .
git commit -m "Initial commit"

在 GitHub 创建新仓库

1. 登录 GitHub，点击右上角 "+" 选择 "New repository"。
2. 输入仓库名称（如 simple-vue-project），选择公开或私有。
3. 不要勾选 "Initialize this repository with a README"。

关联远程仓库并推送代码 根据 GitHub 提供的提示，执行以下命令：

git remote add origin https://github.com/your-username/simple-vue-project.git
git branch -M main
git push -u origin main

部署到 GitHub Pages（可选）

安装 gh-pages 依赖

npm install gh-pages --save-dev

修改 package.json 在 package.json 中添加以下脚本：

"scripts": {
  "predeploy": "npm run build",
  "deploy": "gh-pages -d dist"
}

创建 vite.config.js 配置 如果使用 Vite，在 vite.config.js 中添加 base 配置：

export default defineConfig({
  base: '/simple-vue-project/',
  // 其他配置...
})

部署到 GitHub Pages

npm run deploy

部署完成后，项目会出现在 https://your-username.github.io/simple-vue-project/。