Vue Admin Template 使用教程-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00243/article/details/141846574

Vue Admin Template 使用教程

vue-admin-templateVue 轻量级后台管理系统基础模板项目地址:https://gitcode.com/gh_mirrors/vue/vue-admin-template

1. 项目的目录结构及介绍

vue-admin-template/
├── public/                  # 静态资源文件夹
│   ├── favicon.ico          # 网站图标
│   └── index.html           # 主页面模板
├── src/                     # 源代码文件夹
│   ├── assets/              # 项目资源文件（如图片、样式等）
│   ├── components/          # 公共组件
│   ├── layouts/             # 布局组件
│   ├── router/              # 路由配置
│   ├── store/               # Vuex 状态管理
│   ├── styles/              # 全局样式
│   ├── utils/               # 工具函数
│   ├── views/               # 页面组件
│   ├── App.vue              # 根组件
│   ├── main.js              # 入口文件
│   └── permission.js        # 权限控制
├── .env                     # 环境变量配置
├── .env.development         # 开发环境变量配置
├── .env.production          # 生产环境变量配置
├── .eslintrc.js             # ESLint 配置
├── .gitignore               # Git 忽略文件配置
├── babel.config.js          # Babel 配置
├── package.json             # 项目依赖和脚本
├── README.md                # 项目说明文档
└── vue.config.js            # Vue CLI 配置

2. 项目的启动文件介绍

main.js

main.js 是项目的入口文件，负责初始化 Vue 实例并挂载到 DOM 中。以下是 main.js 的主要内容：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './permission'

Vue.config.productionTip = false

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

permission.js

permission.js 负责权限控制，主要用于路由守卫和权限验证。以下是 permission.js 的主要内容：

import router from './router'
import store from './store'
import { getToken } from '@/utils/auth'

const whiteList = ['/login', '/auth-redirect']

router.beforeEach(async(to, from, next) => {
  const hasToken = getToken()

  if (hasToken) {
    if (to.path === '/login') {
      next({ path: '/' })
    } else {
      const hasRoles = store.getters.roles && store.getters.roles.length > 0
      if (hasRoles) {
        next()
      } else {
        try {
          const { roles } = await store.dispatch('user/getInfo')
          const accessRoutes = await store.dispatch('permission/generateRoutes', roles)
          router.addRoutes(accessRoutes)
          next({ ...to, replace: true })
        } catch (error) {
          await store.dispatch('user/resetToken')
          next(`/login?redirect=${to.path}`)
        }
      }
    }
  } else {
    if (whiteList.indexOf(to.path) !== -1) {
      next()
    } else {
      next(`/login?redirect=${to.path}`)
    }
  }
})

3. 项目的配置文件介绍

vue.config.js

vue.config.js 是 Vue CLI 的配置文件，用于自定义构建配置。以下是 vue.config.js 的主要内容：

module.exports = {
  publicPath: '/',
  outputDir: 'dist',
  assetsDir: 'static',
  lintOnSave: process.env.NODE_ENV === 'development',
  productionSourceMap: false,
  devServer: {
    port: 9528,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    }
  },
  configureWebpack: {
    resolve: {
      alias: {
        '@': resolve('src')
      }
    }
  }
}