λ·° ν”„λ‘œμ νŠΈ 폴더 ꡬ쑰

뷰의 μž₯점 쀑 ν•˜λ‚˜λŠ” λΉ λ₯Έ ν”„ν† ν†  타이핑이 κ°€λŠ₯ν•˜λ‹€λŠ” μ μž…λ‹ˆλ‹€. λ·° CLI둜 ν”„λ‘œμ νŠΈλ₯Ό μƒμ„±ν•˜κ³  λ‚˜λ©΄ npm으둜 μ›ν•˜λŠ” κΈ°λŠ₯듀을 λΉ λ₯΄κ²Œ ν™•μž₯ν•΄ λ‚˜κ°ˆ 수 μžˆμŠ΅λ‹ˆλ‹€.

이번 μ±•ν„°μ—μ„œλŠ” λ³΅μž‘ν•΄μ§„ ν”„λ‘œμ νŠΈ 폴더 ꡬ쑰λ₯Ό 효율적으둜 κ΄€λ¦¬ν•˜λŠ” 방법에 λŒ€ν•΄μ„œ μ•Œμ•„λ³΄κ² μŠ΅λ‹ˆλ‹€. μ² μ €νžˆ μ €μ˜ 개인적인 의견이 반영된 폴더 ꡬ쑰이기 λ•Œλ¬Έμ— 참고만 ν•˜μ‹œκ³  ν•„μš”ν•œ κ²ƒλ§Œ μ·¨ν•΄κ°€μ‹œλ©΄ 될 것 κ°™μŠ΅λ‹ˆλ‹€ πŸ˜ƒ

λ·° CLI둜 μƒμ„±ν•œ κΈ°λ³Έ 폴더 ꡬ쑰

λ·° CLI 2.9 버전을 μ΄μš©ν•˜μ—¬ webpack-simple ν”„λ‘œμ νŠΈλ₯Ό μ•„λž˜μ™€ 같이 μƒμ„±ν•©λ‹ˆλ‹€.

vue init webpack-simple folder-structure

ν”„λ‘œμ νŠΈλ₯Ό μƒμ„±ν•˜κ³  λ‚˜λ©΄ 기본적인 폴더 κ΅¬μ‘°λŠ” μ•„λž˜μ™€ 같이 κ΅¬μ„±λ©λ‹ˆλ‹€.

.
β”œβ”€ README.md
β”œβ”€ index.html
β”œβ”€ webpack.config.js
β”œβ”€ package.json
└─ src
   β”œβ”€ main.js
   β”œβ”€ App.vue
   └─ assets
      └─ logo.png

κΈ°λŠ₯ λ³„λ‘œ κ΅¬λΆ„ν•œ 폴더 ꡬ쑰

μ‹€λ¬΄μ—μ„œ κ°œλ°œν•  λ•Œ ν•„μˆ˜λ‘œ μ‚¬μš©λ˜λŠ” λΌμš°ν„°, μƒνƒœ 관리, ν•„ν„°, λ‹€κ΅­μ–΄, ν”ŒλŸ¬κ·ΈμΈ 등을 μ΄μš©ν•˜λ©΄ μ•„λž˜μ™€ 같이 폴더λ₯Ό ꡬ뢄할 수 μžˆμŠ΅λ‹ˆλ‹€.

.
β”œβ”€ README.md
β”œβ”€ index.html
β”œβ”€ webpack.config.js
β”œβ”€ package.json
└─ src
   β”œβ”€ main.js
   β”œβ”€ App.vue
   β”œβ”€ components        μ»΄ν¬λ„ŒνŠΈ
   β”‚  β”œβ”€ common
   β”‚  └─ ...
   β”œβ”€ router            λΌμš°ν„°
   β”‚  β”œβ”€ index.js
   β”‚  └─ routes.js
   β”œβ”€ views             λΌμš°ν„° νŽ˜μ΄μ§€
   β”‚  β”œβ”€ MainView.vue
   β”‚  └─ ...
   β”œβ”€ store             μƒνƒœ 관리
   β”‚  β”œβ”€ auth
   β”‚  β”œβ”€ index.js
   β”‚  └─ ...
   β”œβ”€ api               api ν•¨μˆ˜
   β”‚  β”œβ”€ index.js
   β”‚  β”œβ”€ users.js
   β”‚  └─ ...
   β”œβ”€ utils             ν•„ν„° λ“±μ˜ μœ ν‹Έλ¦¬ν‹° ν•¨μˆ˜
   β”‚  β”œβ”€ filters.js
   β”‚  β”œβ”€ bus.js
   β”‚  └─ ...
   β”œβ”€ mixins            믹슀인
   β”‚  β”œβ”€ index.js
   β”‚  └─ ...
   β”œβ”€ plugins           ν”ŒλŸ¬κ·ΈμΈ
   β”‚  β”œβ”€ ChartPlugin.js
   β”‚  └─ ...
   β”œβ”€ translations      λ‹€κ΅­μ–΄
   β”‚  β”œβ”€ index.js
   β”‚  β”œβ”€ en.json
   β”‚  └─ ...
   └─ assets            css λ“±μ˜ μ›Ή μžμ›
      β”œβ”€ css
      β”œβ”€ images
      └─ ...