简单实现vue github

实现Vue项目并托管到GitHub的步骤

初始化Vue项目
使用Vue CLI创建新项目，运行以下命令：
npm init vue@latest my-vue-app
根据提示选择需要的配置（如Router、Pinia等）。

进入项目目录
cd my-vue-app
安装依赖：
npm install

本地运行测试
启动开发服务器：
npm run dev
浏览器打开http://localhost:5173确认项目正常运行。

初始化Git仓库
在项目根目录执行：
git init
创建.gitignore文件，添加：

node_modules/
dist/
.DS_Store

提交代码到本地仓库
git add .
git commit -m "Initial commit"

创建GitHub仓库

1. 登录GitHub，点击"New repository"
2. 填写仓库名（如my-vue-app），选择Public/Private
3. 不要勾选初始化选项（README/.gitignore等）

关联远程仓库并推送
复制GitHub仓库的HTTPS/SSH地址，执行：
git remote add origin [仓库地址]
推送代码：
git push -u origin main

部署到GitHub Pages（可选）

安装gh-pages依赖
npm install gh-pages --save-dev

修改package.json
添加以下配置：

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

配置vite.config.js
设置正确的base路径：

export default defineConfig({
  base: process.env.NODE_ENV === 'production' ? '/repository-name/' : '/',
})

执行部署
npm run deploy
部署完成后，在GitHub仓库的Settings > Pages中可查看在线地址。

关键注意事项

• 确保所有敏感信息（如API密钥）已添加到.gitignore
• 频繁提交并添加有意义的commit信息
• 使用分支管理功能开发（git checkout -b feature）
• 部署前测试npm run build是否正常生成dist目录