vue.js前后端分离的核心是前端独立运行并调用后端api：vue cli构建单页应用，axios封装请求，nginx反向代理解决跨域，前端管理登录态、路由守卫与权限，环境变量区分api地址。
用 Vue.js 实现前后端分离，核心是让 Vue 应用作为纯前端项目独立运行，通过 HTTP 请求（如 axios）与后端 API 交互，后端只负责提供数据接口，不参与页面渲染。
前端：用 Vue CLI 搭建独立单页应用
使用 Vue CLI 创建项目，它默认就是为前后端分离设计的：
- 运行
npm init vue@latest或vue create my-app初始化项目 - 开发时通过
npm run serve启动本地开发服务器（端口如 8080），不依赖后端服务 - 构建生产包：
npm run build生成静态文件（dist/目录），可直接部署到 Nginx、CDN 或 OSS
后端：提供标准 RESTful 或 JSON API
后端只需暴露接口，返回 JSON 数据，不返回 HTML 页面。例如：
- GET
/api/users→ 返回{ "users": [...] } - POST
/api/login→ 接收 JSON body，返回 token 或用户信息 - 确保跨域处理：开发时可在 Vue CLI 的
vue.config.js中配置devServer.proxy；生产环境建议 Nginx 反向代理避免 CORS
前后端通信：统一管理 API 请求
在 Vue 项目中封装请求逻辑，提升可维护性：
- 安装
axios：npm install axios - 新建
src/api/index.js，配置基础 URL 和拦截器（如自动携带 token） - 按模块组织 API，例如
src/api/user.js导出getUserList()、login()等函数 - 组件中调用：
import { getUserList } from '@/api/user'; getUserList().then(...)
状态与权限：前端自主管理登录态
用户登录、菜单权限、路由守卫等均由前端控制：
- 登录成功后将 token 存入
localStorage或piniastore - 用 Vue Router 的
beforeEach全局守卫检查 token，无则跳转登录页 - 动态路由或按钮级权限：根据后端返回的用户角色，在 pinia 中存储权限列表，模板中用
v-if="hasPermission('user:delete')"
不复杂但容易忽略的是环境配置——区分开发、测试、生产 API 地址，推荐用 .env.development、.env.production 文件定义 VUE_APP_BASE_API，代码中通过 process.env.VUE_APP_BASE_API 读取。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
