SpringBoot - vue.js : 02. vue.js 프로젝트 구조

SpringBoot - vue.js : 02. vue.js 프로젝트 구조

01. Vue.js 일반적인 프로젝트 구조

(1) 일반적인 vue.js 프로젝트 구조

Vue.js 프로젝트의 구조는 프로젝트의 복잡성과 사용하는 도구에 따라 다소 다를 수 있습니다. 그러나 일반적으로 Vue CLI를 사용하여 생성된 Vue.js 프로젝트의 구조는 다음과 같습니다:

my-vue-project/
├── node_modules/
├── public/
│   ├── favicon.ico
│   └── index.html
├── src/
│   ├── assets/
│   ├── components/
│   ├── views/
│   ├── router/
│   ├── store/
│   ├── App.vue
│   └── main.js
├── .browserslistrc
├── .editorconfig
├── .eslintrc.js
├── .gitignore
├── babel.config.js
├── package-lock.json 
└── package.json

(2) 일반적인 구조 설명:

• node_modules/ : 프로젝트에서 사용되는 npm 패키지가 저장되는 디렉토리입니다.
• public/ : 정적 파일이 위치하는 곳으로, index.html 파일이 이 디렉토리에 포함됩니다.
• src/ : 프로젝트의 소스 코드가 저장되는 디렉토리입니다.
  • assets/ : 이미지, 폰트, 스타일시트 등의 리소스가 저장되는 디렉토리입니다.
  • components/ : Vue 컴포넌트 파일이 저장되는 디렉토리입니다. 일반적으로 .vue 확장자를 가진 파일들이 포함됩니다.
  • views/: 페이지 레벨의 Vue 컴포넌트가 저장되는 디렉토리입니다. 이러한 컴포넌트는 라우터에 의해 로드되며, 한 페이지를 구성하는 여러 하위 컴포넌트를 포함할 수 있습니다.
  • router/ : Vue Router 설정 파일이 저장되는 디렉토리입니다.
  • store/ : Vuex 저장소 설정 파일이 저장되는 디렉토리입니다.
  • App.vue : 애플리케이션의 루트 컴포넌트입니다.
  • main.js: 애플리케이션의 진입점이자, 루트 인스턴스를 생성하고 마운트하는 파일입니다.
• .browserslistrc, .editorconfig, .eslintrc.js, .gitignore : 각각 브라우저 호환성, 에디터 설정, ESLint 설정, Git 설정 파일입니다.
• babel.config.js : Babel 설정 파일입니다. Babel은 자바스크립트 코드를 변환하여 다양한 브라우저에서 실행 가능하도록 도와줍니다.
• package-lock.json, package.json : 프로젝트에 대한 메타데이터와 종속성을 기록하는 파일입니다.

02. Vue.js - Electron 프로젝트 구조

Vue.js와 Electron을 결합한 프로젝트의 일반적인 구조는 다음과 같습니다:

(1) 프로젝트 폴더 생성 및 초기화:

mkdir my-vue-electron-app
cd my-vue-electron-app
npm init

Vue.js 및 Electron 설치:

npm install vue
npm install electron

(2) 프로젝트 폴더의 구조:

my-vue-electron-app
├── src
│   ├── main
│   │   ├── index.js (Electron main process)
│   ├── renderer
│   │   ├── App.vue (Vue.js root component)
│   │   ├── main.js (Vue.js entry point)
│   │   └── assets
│   │       ├── css
│   │       └── img
├── public
│   ├── index.html
├── package.json
├── .gitignore
└── README.md

(3) Vue.js를 위한 설정:

src/renderer/main.js 파일에 다음 내용을 추가합니다.

import Vue from 'vue'
import App from './App.vue'

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

(4) Electron을 위한 설정:

src/main/index.js 파일에 다음 내용을 추가합니다.

const { app, BrowserWindow } = require('electron')
const path = require('path')
const isDev = process.env.NODE_ENV !== 'production'

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  if (isDev) {
    win.loadURL(`http://localhost:8080`)
  } else {
    win.loadFile(path.join(__dirname, '../public/index.html'))
  }
}

app.whenReady().then(createWindow)

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})

package.json 파일에 다음 스크립트를 추가하여 개발 및 빌드 명령을 설정합니다.

"scripts": {
  "serve": "vue-cli-service serve src/renderer/main.js",
  "build": "vue-cli-service build src/renderer/main.js",
  "electron:serve": "electron src/main/index.js",
  "electron:build": "npm run build && electron-builder"
},
"main": "src/main/index.js"

이 구조를 사용하면, Vue.js와 Electron을 결합한 프로젝트를 개발하고 빌드하는데 도움이 됩니다. 프로젝트 구조를 이해하고 필요한 모듈 및 설정을 적용하면, 원활하게 애플리케이션을 개발할 수 있습니다.