vue单页面组件实现
Vue 单页面组件实现方法
使用 Vue CLI 创建项目
通过 Vue CLI 快速搭建项目结构，确保已安装 Node.js 和 npm/yarn。运行以下命令初始化项目：
vue create my-project选择默认配置或手动配置（如 Babel、Router、Vuex 等）。
创建单文件组件 (SFC)
Vue 单文件组件以 .vue 为后缀，包含 <template>、<script> 和 <style> 三个部分。例如：
<template>
<div>
<h1>{{ title }}</h1>
<button @click="handleClick">点击</button>
</div>
</template>
<script>
export default {
data() {
return {
title: '单页面组件示例'
}
},
methods: {
handleClick() {
alert('按钮被点击');
}
}
}
</script>
<style scoped>
h1 {
color: #42b983;
}
</style>配置路由实现单页面应用 (SPA)
安装 Vue Router 并配置路由规则，将组件映射到不同路径。示例代码：
// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: () => import('../views/About.vue') }
];
const router = createRouter({
history: createWebHistory(),
routes
});
export default router;状态管理（可选）
对于复杂状态共享，可使用 Vuex 或 Pinia。以 Pinia 为例：
// src/stores/counter.js
import { defineStore } from 'pinia';
export const useCounterStore = defineStore('counter', {
state: () => ({ count: 0 }),
actions: {
increment() {
this.count++;
}
}
});组件间通信
- Props 和 Events：父组件通过
props传递数据，子组件通过$emit触发事件。 - Provide/Inject：跨层级组件通信。
- 状态管理库：如 Vuex/Pinia 共享全局状态。
动态组件与异步加载
通过 <component :is="currentComponent"> 实现动态渲染，结合 defineAsyncComponent 异步加载组件：
const AsyncComp = defineAsyncComponent(() => import('./AsyncComp.vue'));样式隔离与预处理器
- 使用
scoped属性限制样式作用域。 - 支持 Sass/Less 等预处理器，需安装对应依赖。
构建与部署
运行 npm run build 生成静态文件，部署到 Web 服务器（如 Nginx）。
