简单实现vue github

Vue.js 简单项目实现与 GitHub 托管

以下是创建一个简单的 Vue.js 项目并托管到 GitHub 的步骤：

初始化 Vue.js 项目

使用 Vue CLI 创建新项目，确保已安装 Node.js 和 npm/yarn：

npm install -g @vue/cli
vue create my-vue-project
cd my-vue-project

开发简单功能

在 src/App.vue 中编写基础代码，例如一个计数器：

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="count++">Count: {{ count }}</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "Hello Vue!",
      count: 0
    };
  }
};
</script>

本地运行测试

启动开发服务器：

npm run serve

准备 GitHub 仓库

1. 在 GitHub 创建新仓库（如 my-vue-project）
2. 初始化本地 Git 并关联远程仓库：

   git init
   git add .
   git commit -m "Initial commit"
   git remote add origin https://github.com/your-username/my-vue-project.git
   git push -u origin master

部署到 GitHub Pages（可选）

1. 安装 gh-pages：

   npm install gh-pages --save-dev

2. 在 package.json 中添加：

   "scripts": {
   "deploy": "gh-pages -d dist"
   }

3. 构建并部署：

   npm run build
   npm run deploy

项目结构说明

关键文件/目录：

• public/: 静态资源
• src/: 主要代码
• src/main.js: Vue 入口文件
• package.json: 依赖配置

通过以上步骤即可完成 Vue.js 的简单实现与 GitHub 托管。