vue页面实现
Vue 页面实现基础步骤
创建 Vue 页面需要安装 Vue 环境、编写组件模板、定义逻辑与样式。以下是具体实现方式：
环境准备 确保已安装 Node.js 和 npm/yarn，通过 Vue CLI 或 Vite 初始化项目：
npm init vue@latest # Vue CLI
npm create vite@latest # Vite单文件组件结构
Vue 页面通常以 .vue 文件组织，包含 <template>, <script>, <style> 三个部分：
<template>
<div class="page-container">
<h1>{{ title }}</h1>
<button @click="handleClick">点击</button>
</div>
</template>
<script>
export default {
data() {
return {
title: 'Vue 页面示例'
}
},
methods: {
handleClick() {
console.log('按钮被点击');
}
}
}
</script>
<style scoped>
.page-container {
padding: 20px;
}
</style>路由配置实现多页面
安装 Vue Router
npm install vue-router路由定义示例
在 src/router/index.js 中配置路径与组件映射：
import { createRouter, createWebHistory } from 'vue-router';
import HomePage from '../views/HomePage.vue';
import AboutPage from '../views/AboutPage.vue';
const routes = [
{ path: '/', component: HomePage },
{ path: '/about', component: AboutPage }
];
const router = createRouter({
history: createWebHistory(),
routes
});
export default router;路由视图占位
在根组件 App.vue 中添加 <router-view>：
<template>
<router-view />
</template>状态管理（Vuex/Pinia）
Pinia 基础用法 安装 Pinia 并创建 store：
npm install pinia定义 Store
// stores/counter.js
import { defineStore } from 'pinia';
export const useCounterStore = defineStore('counter', {
state: () => ({ count: 0 }),
actions: {
increment() {
this.count++;
}
}
});在组件中使用
<script setup>
import { useCounterStore } from '@/stores/counter';
const counter = useCounterStore();
</script>
<template>
<button @click="counter.increment">
{{ counter.count }}
</button>
</template>响应式数据处理
组合式 API 示例
使用 ref 和 reactive 管理状态：
<script setup>
import { ref, reactive } from 'vue';
const count = ref(0);
const user = reactive({
name: 'Alice',
age: 25
});
function increaseAge() {
user.age++;
}
</script>生命周期钩子使用
常用生命周期
<script setup>
import { onMounted, onUnmounted } from 'vue';
onMounted(() => {
console.log('组件挂载完成');
});
onUnmounted(() => {
console.log('组件卸载');
});
</script>组件间通信
Props 传递数据 父组件传递：
<ChildComponent :message="parentMessage" />子组件接收：
<script setup>
defineProps({
message: String
});
</script>事件发射 子组件触发：
<button @click="$emit('notify')">通知</button>父组件监听：
<ChildComponent @notify="handleNotify" />样式与作用域
Scoped CSS 限定样式作用域：
<style scoped>
.button {
/* 仅影响当前组件 */
}
</style>CSS 模块化 通过模块名引用：
<template>
<div :class="$style.redText">文本</div>
</template>
<style module>
.redText {
color: red;
}
</style>
