用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')）实现路由或组件的懒加载。
