# ๋ทฐ ํ”„๋กœ์ ํŠธ ํด๋” ๊ตฌ์กฐ

๋ทฐ์˜ ์žฅ์  ์ค‘ ํ•˜๋‚˜๋Š” ๋น ๋ฅธ ํ”„ํ† ํ†  ํƒ€์ดํ•‘์ด ๊ฐ€๋Šฅํ•˜๋‹ค๋Š” ์ ์ž…๋‹ˆ๋‹ค. ๋ทฐ 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
      โ””โ”€ ...