Vue Admin 템플릿 사용 가이드

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 { getAuthToken } from '@/utils/auth'

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

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

  if (hasToken) {
    if (to.path === '/login') {
      next({ path: '/' })
    } else {
      const userRoles = store.getters.roles && store.getters.roles.length > 0
      if (userRoles) {
        next()
      } else {
        try {
          const { roles } = await store.dispatch('user/fetchUserInfo')
          const accessibleRoutes = await store.dispatch('permission/buildRoutes', roles)
          router.addRoutes(accessibleRoutes)
          next({ ...to, replace: true })
        } catch (error) {
          await store.dispatch('user/clearToken')
          next(`/login?redirect=${to.path}`)
        }
      }
    }
  } else {
    if (allowedRoutes.includes(to.path)) {
      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: {
        '@': require.resolve('src')
      }
    }
  }
}

.env

.env 파일은 전역 환경 변수를 정의하는 데 사용됩니다. 개발 및 프로덕션 환경별로 별도의 설정 파일을 생성하여 관리할 수 있습니다.