前端框架使用vue-cli（第二层：工程配置层--总览）

这里指的工程配置层，主要说的是src文件下的内容

说一下对应的要处理的文件

1.public文件夹包

2.app.vue

3.main.js

4.setting.js

简介：

我们之前的文章，主要是做这么几个东西

1.分析的技术栈引入

2.以及webpack构建

这篇文章核心作用于两个点

1.vue-cli怎么配置技术栈

2.有哪些概念，需要再架子层配置好

这篇文章则是要梳理一下，源代码在技术栈层面的配置问题

我们就以vue-cli这个为例。

这个vue-cli说到底，他是一个后台管理系统。

vue要写代码，究竟在写什么东西

1.登录注册页面

2.登录注册页面跳转主页面

3.主页面其中的内容

我们在写这些东西的时候，还需要去了解一些技术栈

1.vue语法系列

2.vue-router

3.elemntui

4.vuex

这里简单介绍一下这些技术栈。

所谓的vue-cli，

其实本质上解决的是单个html过于麻烦的事情。

解耦前端代码

vue是单个div聚合了html，css，js的合集

vue之间可以通信

由于vue-cli最后会被webpack解析，vue也可以在和js文件逻辑上实现数据传递

有了这个，我们就可以在页面上从设计div开始，实现方式变成设计vue

vue-router解决的是vue布局以后切换单个vue的事情

vuex解决的是数据持久化存储的问题，举个例子，前端在获取用户登录以后的token，需要把这个数据一直存起来，以后每次访问后端的接口，都携带这个token

elemntui则是解决，单个vue页面，内容，表格，弹窗等组件。

这里我想先确定一下思路。

这篇文章的作用，是对前端基本工程的公共复用部分，做一个说明。

那这个工程配置层，具体要做什么内容

1.技术栈配置层配置（main.js和，app.vue，permission.js）

2.登录页面--elementui技术栈配置

3.登录跳转主页需要做的事情

4.axios需要做的基础配置

5.页面布局需要做的事情

一、工程配置层的目标

让项目能支撑 登录 → 主页面 → 内部功能 的完整流程。
在 src 目录中统一配置：
- Vue 核心库
- Vue Router
- Vuex
- Element UI
- Axios 网络请求
- 权限控制（permission.js）
- 布局结构（Layout）

二、具体要处理的文件与配置

1. `public` 文件夹

作用：存放静态资源（如 index.html、favicon、不会被 Webpack 处理的资源）。
配置关注点 ：
- index.html 中的 div#app 挂载点。
- 可引入全局 CSS 或外部脚本（但不推荐用于业务逻辑）。

2. `App.vue`

作用：整个 Vue 应用的根组件，通常只包含一个 <router-view />。
配置关注点 ：
- 全局布局（若布局放在这里，会失去动态切换布局的灵活性，通常布局在 Layout/index.vue 中做）。
- 可以监听全局路由变化（如果不在 permission.js 做）。

3. `main.js`

作用：应用入口文件，初始化 Vue、挂载插件、全局配置。
配置关注点 ：
- 引入 Vue、App、router、store。
- 引入 Element UI 并 use。
- 引入 Axios 并挂载到 Vue 原型（Vue.prototype.$http = axios）。
- 引入 permission.js（路由守卫）。
- 引入全局样式。
- 生产环境配置（如关闭 Vue 生产提示）。

示例结构：

javascript 复制代码

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import './permission' // 路由守卫
import './styles/index.scss' // 全局样式

Vue.use(ElementUI)
Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

4. `setting.js`（或 `settings.js`）

作用：存放项目级的静态配置，方便统一修改。
常见配置项 ：
- 系统名称、Logo 路径。
- 是否固定头部、是否显示面包屑、是否显示标签栏。
- 默认主题颜色。
- 请求接口的公共路径（或放在 .env 文件）。

示例：

javascript 复制代码

export default {
  title: '后台管理系统',
  logo: '/logo.png',
  fixedHeader: true,
  tagsView: true,
  sidebarLogo: true,
  defaultColor: '#409EFF'
}

三、技术栈配置的核心模块

1. `permission.js`（路由权限控制）

作用：结合 Vue Router 的全局前置守卫，实现：
- 判断用户是否登录（token 是否存在）。
- 没有 token 则跳转登录页。
- 有 token 但未获取用户角色/权限时，动态生成可访问的路由表。
- 登录后不能进登录页（重定向到首页）。
依赖：Vue Router、Vuex（存 token 和 roles）。

2. 登录页面（Element UI 配置）

技术点 ：
- el-form 做表单校验（用户名、密码）。
- el-button 登录按钮。
- 调用 login API，成功后保存 token 到 Vuex 和 Cookie。
- 跳转到主页 this.$router.push('/') 或 /dashboard。

3. 登录跳转主页需要做的事

登录成功后，Vuex 存储 token 和 userInfo。
下次刷新页面时，在 permission.js 中读取 token，重新获取用户信息。
router.beforeEach 里根据权限动态添加路由（router.addRoutes）。

4. Axios 基础配置

创建 utils/request.js：
- 设置 baseURL（通过环境变量 VUE_APP_BASE_API）。
- 设置请求超时。
- 请求拦截器：自动给 headers 添加 token。
- 响应拦截器 ：
  - 判断 token 失效（如 401），清除本地数据并跳转登录。
  - 统一处理业务错误码（如 20000 成功，其他显示 message）。
- 导出 request 供 API 层调用。

示例：

javascript 复制代码

import axios from 'axios'
import store from '@/store'
import router from '@/router'

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 5000
})

service.interceptors.request.use(config => {
  if (store.getters.token) {
    config.headers['Authorization'] = `Bearer ${store.getters.token}`
  }
  return config
})

service.interceptors.response.use(
  response => {
    const res = response.data
    if (res.code !== 20000) {
      if (res.code === 401) {
        store.dispatch('user/resetToken')
        router.push(`/login?redirect=${router.currentRoute.fullPath}`)
      }
      return Promise.reject(new Error(res.message || 'Error'))
    }
    return res
  },
  error => {
    return Promise.reject(error)
  }
)

export default service

5. 页面布局需要做的事（Layout 模块）

目录结构 ：src/layout/index.vue（主框架）。
组成：
- 左侧侧边栏（Sidebar）：根据路由表递归生成菜单。
- 右侧头部（Navbar）：用户头像、退出登录、折叠侧边栏。
- 右侧主体区域（AppMain）：包含 <router-view />。
- 标签栏（TagsView）：记录打开过的页面。
- 面包屑（Breadcrumb）。
依赖：vue-router 的路由表、vuex 管理侧边栏折叠状态、element-ui 的菜单组件。

前端框架使用vue-cli（ 第二层：工程配置层--总览）

一、工程配置层的目标

二、具体要处理的文件与配置

1. public 文件夹

2. App.vue

3. main.js

4. setting.js（或 settings.js）

三、技术栈配置的核心模块

1. permission.js（路由权限控制）

2. 登录页面（Element UI 配置）

3. 登录跳转主页需要做的事

4. Axios 基础配置

5. 页面布局需要做的事（Layout 模块）

前端框架使用vue-cli（第二层：工程配置层--总览）

1. `public` 文件夹

2. `App.vue`

3. `main.js`

4. `setting.js`（或 `settings.js`）

1. `permission.js`（路由权限控制）