vue单页实现
Vue 单页应用（SPA）实现方法
安装 Vue CLI 并创建项目
使用 Vue CLI 快速搭建单页应用框架，确保已安装 Node.js 和 npm/yarn。
执行命令 npm install -g @vue/cli 全局安装 Vue CLI。
通过 vue create project-name 创建新项目，选择默认配置或手动配置（如 Babel、Router 等）。
配置路由（Vue Router）
安装 Vue Router 依赖：npm install 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;在 main.js 中引入并挂载路由：
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
createApp(App).use(router).mount('#app');创建视图组件
在 src/views 目录下创建页面组件（如 Home.vue 和 About.vue）。
使用 <router-view> 标签在 App.vue 中显示当前路由对应的组件：
<template>
<div id="app">
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
<router-view />
</div>
</template>状态管理（可选）
对于复杂状态管理，可引入 Vuex 或 Pinia。
安装 Pinia：npm install pinia，在 main.js 中配置：
import { createPinia } from 'pinia';
const pinia = createPinia();
createApp(App).use(router).use(pinia).mount('#app');打包与部署
运行 npm run build 生成静态文件（位于 dist 目录）。
部署时需确保服务器配置支持 SPA 回退（如 Nginx 配置）：
location / {
try_files $uri $uri/ /index.html;
}动态路由与懒加载
通过动态路由实现按需加载，提升性能。示例：
const routes = [
{ path: '/user/:id', component: () => import('../views/User.vue') }
];API 数据交互
使用 axios 或 fetch 请求后端数据。安装 axios：npm install axios，示例：
import axios from 'axios';
axios.get('/api/data').then(response => {
console.log(response.data);
});样式与全局 CSS
在 src/assets 中存放全局样式文件，通过 main.js 引入：
import './assets/main.css';组件内使用 <style scoped> 实现局部作用域样式。
