vue单页实现
Vue 单页应用（SPA）实现方法
项目初始化与基础配置
使用 Vue CLI 快速搭建项目框架，确保已安装 Node.js 和 npm/yarn：
npm install -g @vue/cli
vue create my-spa-project选择默认配置或手动选择 Router、Vuex 等核心依赖项。安装完成后进入项目目录：
cd my-spa-project路由配置与页面结构
在 src/router/index.js 中配置路由规则，实现页面无刷新跳转：
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: () => import('../views/About.vue')
}
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router动态组件与异步加载
通过懒加载提升首屏性能，使用 import() 动态导入组件：
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')在 App.vue 中放置路由视图容器：
<template>
<div id="app">
<nav>
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
</nav>
<router-view/>
</div>
</template>状态管理方案
对于复杂状态管理，在 src/store/index.js 中配置 Vuex：
import { createStore } from 'vuex'
export default createStore({
state: {
count: 0
},
mutations: {
increment(state) {
state.count++
}
},
actions: {
incrementAsync({ commit }) {
setTimeout(() => {
commit('increment')
}, 1000)
}
}
})样式与静态资源处理
使用 SCSS/LESS 预处理器需安装对应 loader：
npm install -D sass-loader node-sass在组件中直接使用：
<style lang="scss">
$primary-color: #42b983;
.header {
color: $primary-color;
}
</style>生产环境优化
配置 vue.config.js 进行高级定制：
module.exports = {
productionSourceMap: false,
chainWebpack: config => {
config.plugin('html').tap(args => {
args[0].title = 'My SPA'
return args
})
}
}执行构建命令生成优化后的静态文件：
npm run build部署注意事项
确保服务器配置支持 history 模式路由。对于 Nginx 需添加重定向规则：
location / {
try_files $uri $uri/ /index.html;
}性能监控与分析
集成 Lighthouse 进行性能审计：
npm install -D lighthouse
npx lighthouse http://localhost:8080
