用Vue实现

Vue 实现步骤

安装 Vue CLI 并创建项目
通过 npm 或 yarn 全局安装 Vue CLI，随后创建一个新的 Vue 项目。

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

安装依赖
进入项目目录后，安装必要的依赖，例如 Vue Router（如需路由功能）或 Vuex（如需状态管理）。

cd my-project
npm install vue-router vuex

配置路由（可选）
在 src 目录下创建 router.js 或 router/index.js 文件，配置路由规则。

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './views/Home.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/', component: Home }
]

const router = new VueRouter({
  routes
})

export default router

创建组件
在 src/components 目录下创建 Vue 单文件组件（.vue 文件），例如 Button.vue。

<template>
  <button @click="handleClick">{{ text }}</button>
</template>

<script>
export default {
  props: {
    text: String
  },
  methods: {
    handleClick() {
      this.$emit('click')
    }
  }
}
</script>

<style scoped>
button {
  padding: 8px 16px;
  background: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
}
</style>

集成到主应用
在 src/App.vue 或入口文件中引入并使用组件。

<template>
  <div id="app">
    <Button text="Click Me" @click="onButtonClick" />
  </div>
</template>

<script>
import Button from './components/Button.vue'

export default {
  components: { Button },
  methods: {
    onButtonClick() {
      alert('Button clicked!')
    }
  }
}
</script>

运行开发服务器
启动开发服务器以实时预览效果。

npm run serve

构建生产版本
完成开发后，运行构建命令生成优化后的生产代码。

npm run build

关键注意事项

• 组件通信：父子组件通过 props 和 $emit 交互，跨组件可使用 Vuex 或事件总线。
• 生命周期钩子：合理利用 created、mounted 等钩子处理异步数据或 DOM 操作。
• 样式隔离：使用 <style scoped> 避免组件样式污染全局。
• 按需加载：通过动态导入（() => import('./Component.vue')）实现路由或组件的懒加载。