RBAC前端架构-01：项目初始化

未来龙皇小蓝2026-02-07 10:50

1-全局安装脚手架

bash 复制代码

npm install -g @vue/cli #全局安装 Vue CLI（用于快速脚手架）

2-项目创建

bash 复制代码

# 在你想存放项目的文件夹运行：
vue create frontend-vue2

3-结构介绍

复制代码

frontend-vue2/
├── public/
│   └── index.html              # HTML 模板文件
└── src/                        # 源代码目录
    ├── assets/                 # 静态资源文件
    ├── components/             # 组件目录
    │   └── HelloWorld.vue      # 示例组件
    ├── App.vue                 # 根组件
    └── main.js

4-安装相关组件

安装：VueRouter(路由组件)、Vuex(组件间通信)、安装axios(发后端请求)

bash 复制代码

#PS：vue2要用router的3版本
npm install vue-router@3 vuex@3 axios

VueRouter：路由组件：用于做页面导航，和使用路由守卫防止用户绕过直接访问到未授权的页面
Vuex：组件间通信：全局状态（存 token、用户信息，不怕刷新丢失）
axios：发后端请求：自动带 token、统一错误处理

5-主要流程

登录阶段：账号密码 → 后端 → 返回 token → 前端保存
路由守卫：进入受保护页面前检查 token，没有就跳登录
请求拦截：axios 在请求时自动带 token
响应拦截：如果 token 失效（401），前端清理数据并跳回登录