npm install
npm run serve
npm run build
npm run lint
作为一个Vue工程师，我很乐意帮你创建一个基于Vue3的GitHub Pages项目，并通过GitHub Actions实现自动部署。下面是详细的步骤指南：
首先，我们需要创建一个新的Vue3项目：
- 确保你已安装Node.js和npm
- 使用Vue CLI创建项目
# 安装Vue CLI（如果尚未安装）
npm install -g @vue/cli
# 创建新项目
vue create github-tools
# 选择Vue3配置（在交互提示中选择Vue 3）
# 进入项目目录
cd github-toolsGitHub Pages有特定的路径要求，我们需要添加一个vue.config.js文件来配置：
// vue.config.js
module.exports = {
publicPath: process.env.NODE_ENV === 'production'
? '/github-tools/' // 这里替换为你的仓库名
: '/',
outputDir: 'dist'
}让我们创建一个简单的工具页面布局：
# 创建页面组件
mkdir -p src/views
touch src/views/Home.vue
touch src/views/Tool1.vue
touch src/views/Tool2.vue在src/views/Home.vue添加内容：
<template>
<div class="home">
<h1>我的日常工作工具集</h1>
<div class="tools-grid">
<router-link to="/tool1" class="tool-card">
<h2>工具1</h2>
<p>工具1的简短描述</p>
</router-link>
<router-link to="/tool2" class="tool-card">
<h2>工具2</h2>
<p>工具2的简短描述</p>
</router-link>
<!-- 可以继续添加更多工具卡片 -->
</div>
</div>
</template>
<script>
export default {
name: 'Home'
}
</script>
<style scoped>
.home {
padding: 20px;
}
.tools-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
margin-top: 20px;
}
.tool-card {
background: #f5f5f5;
border-radius: 8px;
padding: 20px;
text-decoration: none;
color: inherit;
transition: transform 0.3s, box-shadow 0.3s;
}
.tool-card:hover {
transform: translateY(-5px);
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
</style>我们需要设置Vue Router来管理不同工具页面之间的导航：
# 安装Vue Router（如果创建项目时未选择）
npm install vue-router@4创建路由配置文件：
mkdir -p src/router
touch src/router/index.js
mkdir -p src/router; new-item src/router/index.js在src/router/index.js中添加：
import { createRouter, createWebHashHistory } from 'vue-router'
import Home from '../views/Home.vue'
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/tool1',
name: 'Tool1',
component: () => import('../views/Tool1.vue')
},
{
path: '/tool2',
name: 'Tool2',
component: () => import('../views/Tool2.vue')
}
]
const router = createRouter({
history: createWebHashHistory(),
routes
})
export default router修改src/main.js：
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')- 登录GitHub账号
- 点击右上角"+"图标，选择"New repository"
- 仓库名称输入"github-tools"（或你喜欢的名称）
- 描述可选
- 选择"Public"（GitHub Pages需要公开仓库，除非你有Pro账户）
- 点击"Create repository"
在本地项目中创建GitHub Actions工作流程文件：
mkdir -p .github/workflows
touch .github/workflows/deploy.yml
mkdir -p .github/workflows ; new-item .github/workflows/deploy.yml在.github/workflows/deploy.yml中添加：
name: Build and Deploy
on:
push:
branches:
- main # 或者你的默认分支名，如master
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout 🛎️
uses: actions/checkout@v3
- name: Setup Node.js
uses: actions/setup-node@v3
with:
node-version: '16'
- name: Install and Build 🔧
run: |
npm ci
npm run build
- name: Deploy 🚀
uses: JamesIves/github-pages-deploy-action@v4
with:
folder: dist
branch: gh-pages现在，将项目推送到GitHub仓库：
# 初始化Git仓库（如果尚未初始化）
git init
# 添加远程仓库
git remote add origin https://github.com/你的用户名/github-tools.git
# 添加所有文件
git add .
# 提交更改
git commit -m "Initial commit"
# 推送到GitHub
git push -u origin main # 或者你的默认分支名推送后，等待GitHub Actions完成构建和部署，然后：
- 前往你的GitHub仓库
- 点击"Settings" -> "Pages"
- 在"Source"部分，选择"gh-pages" 分支和"/ (root)"目录
- 点击"Save"
几分钟后，你的网站应该会在https://你的用户名.github.io/github-tools/上线。
现在你可以在Tool1.vue和Tool2.vue中添加你的实际工具逻辑。例如，一个简单的JSON格式化工具：
<!-- src/views/Tool1.vue -->
<template>
<div class="tool">
<h1>JSON格式化工具</h1>
<div class="tool-container">
<div class="input-area">
<h3>输入JSON</h3>
<textarea v-model="inputJson" placeholder="在这里粘贴JSON文本..."></textarea>
<button @click="formatJson">格式化</button>
</div>
<div class="output-area">
<h3>格式化结果</h3>
<pre>{{ formattedJson }}</pre>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
inputJson: '',
formattedJson: ''
}
},
methods: {
formatJson() {
try {
const parsed = JSON.parse(this.inputJson);
this.formattedJson = JSON.stringify(parsed, null, 2);
} catch (error) {
this.formattedJson = '解析错误: ' + error.message;
}
}
}
}
</script>
<style scoped>
.tool {
padding: 20px;
}
.tool-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-top: 20px;
}
textarea {
width: 100%;
height: 300px;
padding: 10px;
font-family: monospace;
}
pre {
background: #f5f5f5;
padding: 10px;
border-radius: 4px;
height: 300px;
overflow: auto;
white-space: pre-wrap;
}
button {
padding: 8px 16px;
background: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
margin-top: 10px;
}
button:hover {
background: #45a049;
}
@media (max-width: 768px) {
.tool-container {
grid-template-columns: 1fr;
}
}
</style>每次你将更改推送到主分支，GitHub Actions都会自动构建和部署你的项目。
希望这个指南对你有所帮助！如果你需要添加更多具体工具或遇到任何问题，请随时告诉我。