实现简单vue

创建 Vue 项目

使用 Vue CLI 快速初始化项目，确保已安装 Node.js 和 npm/yarn：

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

项目启动后默认访问 http://localhost:8080。

编写基础组件

在 src/components 目录下创建 HelloWorld.vue 文件，内容如下：

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="changeMessage">点击修改文本</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "Hello Vue!"
    };
  },
  methods: {
    changeMessage() {
      this.message = "文本已更新！";
    }
  }
};
</script>

注册并使用组件

在 src/App.vue 中引入并注册组件：

<template>
  <div id="app">
    <HelloWorld />
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  components: {
    HelloWorld
  }
};
</script>

数据绑定与事件处理

Vue 通过 v-model 实现双向数据绑定，通过 @click 等指令处理事件：

<template>
  <div>
    <input v-model="inputText" placeholder="输入内容" />
    <p>输入的内容：{{ inputText }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputText: ""
    };
  }
};
</script>

条件渲染与列表渲染

使用 v-if 或 v-for 控制元素显示：

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
    <p v-if="showText">这段文字根据条件显示</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: "项目1" },
        { id: 2, name: "项目2" }
      ],
      showText: true
    };
  }
};
</script>

生命周期钩子示例

在 script 部分使用生命周期钩子（如 mounted）：

<script>
export default {
  mounted() {
    console.log("组件已挂载");
  }
};
</script>

打包与部署

项目开发完成后，运行以下命令生成生产环境代码：

npm run build

生成的静态文件位于 dist 目录，可部署到任何 Web 服务器。