vuejs-templates

Boilerplate ๋ž€?

boilerplate ๋Š” ๋ฐ˜๋ณต๋˜๋ฉฐ ์ž์ฃผ ์“ฐ์ด๋Š” ๊ฒƒ๋“ค์— ๋Œ€ํ•ด ๋ฏธ๋ฆฌ ๊ฐœ๋ฐœํ™˜๊ฒฝ์„ค์ •์„ ๊ตฌ์„ฑํ•ด๋†“์€ ์ผ์ข…์˜ ํ…œํ”Œ๋ฆฟ ๊ฐœ๋…์ด๋‹ค.

front-end ๊ฐœ๋ฐœ์„ ํ•˜๋‹ค๋ณด๋ฉด babel, webpack ๋“ฑ ๋งŽ์ด ์“ฐ์ด๋Š” ๋ชจ๋“ˆ๋“ค ๋˜๋Š” ๋นŒ๋“œ ์„ค์ •๋“ค, ํด๋”๊ตฌ์กฐ๋“ค์„ ๋ฐ˜๋ณต์ ์œผ๋กœ ์„ค์ •ํ•˜๊ฒŒ๋˜๋Š”๋ฐ ์ด๋ฅผ ๋ฏธ๋ฆฌ ๋งŒ๋“ค์–ด ๋†“๋Š”๊ฒƒ์ด๋‹ค.

์ด๋ ‡๊ฒŒ ์ž๋™ํ™”๋ฅผ ํ•ด๋†“์œผ๋ฉด ๊ฐ–๋‹ค ์“ฐ๊ธฐ๋งŒ ํ•˜๋ฉด๋ผ์„œ ๊ฐœ๋ฐœํ™˜๊ฒฝ๊ตฌ์ถ•์— ์‹œ๊ฐ„๊ณผ ๋น„์šฉ์„ ๋‹จ์ถ•์‹œํ‚ฌ ์ˆ˜ ์žˆ๋‹ค.

$vue list

ํ•ด๋‹น ๋ช…๋ น์–ด๋ฅผ ํ†ตํ•ด ๊ณต์‹์ ์ธ ๋ทฐ ํ…œํ”Œ๋ฆฟ์˜ ๋ฆฌ์ŠคํŠธ๋“ค์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค.

vuejs-templates ์ข…๋ฅ˜

  • vue-webpack-boilerplate

    webpack + vue-loader ์กฐํ•ฉ์œผ๋กœ hot-reload, lint-on-save, unit testing & css extraction ์ง€์›

    ํ•ด๋‹น ๋ณด์ผ๋Ÿฌํ”Œ๋ ˆ์ดํŠธ๋Š” hot-reload, router, unit test, linting ๋“ฑ์„ ์ง€์›ํ•ด ํฐ ํ”„๋กœ์ ํŠธ๋ฅผ ์ง„ํ–‰ํ•  ์‹œ์— ์ ํ•ฉํ•˜๋‹ค.

  • webpack-simple

    ๋น ๋ฅด๊ฒŒ ๋งŒ๋“ค ์ˆ˜ ์žˆ๋Š” ํ”„๋กœํ† ํƒ€์ž…, webpack + vue-loader ์กฐํ•ฉ

    ํ•ด๋‹น ๋ณด์ผ๋Ÿฌํ”Œ๋ ˆ์ดํŠธ๋Š” ๋น ๋ฅธ ํ”„๋กœํ† ํƒ€์ž…์„ ๋งŒ๋“ค๊ณ ์‹ถ์€๊ฒฝ์šฐ ์‚ฌ์šฉ๋œ๋‹ค

  • vue-browserify-boilerplate

    browserify + vueify ์กฐํ•ฉ์œผ๋กœ hot-reload, linting & unit testing ์ง€์›

    browserify๋ž€?

    CommonJS ๋ชจ๋“ˆ์„ ์œ„ํ•œ ๋ชจ๋“ˆ๋ฒˆ๋“ค๋Ÿฌ.

    vueify๋ž€?

    browserify ๋ณ€ํ™˜์„ ์œ„ํ•œ ํ•˜๋‚˜์˜ Vue ์ปดํฌ๋„ŒํŠธ

    ํ•ด๋‹น ๋ณด์ผ๋Ÿฌํ”Œ๋ ˆ์ดํŠธ hot-reload, router, unit test, linting ๋“ฑ์„ ์ง€์›ํ•ด ํฐ ํ”„๋กœ์ ํŠธ๋ฅผ ์ง„ํ–‰ํ•  ์‹œ์— ์ ํ•ฉํ•˜๋‹ค

  • browserify-simple

    ๋น ๋ฅด๊ฒŒ ๋งŒ๋“ค ์ˆ˜ ์žˆ๋Š” ํ”„๋กœํ† ํƒ€์ž…, browserify + vueify ์กฐํ•ฉ

    ํ•ด๋‹น ๋ณด์ผ๋Ÿฌํ”Œ๋ ˆ์ดํŠธ๋Š” ๋น ๋ฅธ ํ”„๋กœํ† ํƒ€์ž…์„ ๋งŒ๋“ค๊ณ ์‹ถ์€๊ฒฝ์šฐ ์‚ฌ์šฉ๋œ๋‹ค

  • vue-pwa-boilerplate

    vue-webpack-boilerpate ๊ธฐ๋ฐ˜ PWA ๋ฅผ ์ถ”๊ฐ€ํ•œ ํ…œํ”Œ๋ฆฟ

    PWA๋ž€?

    PWA(Progressive Web App) ์ด๋ž€ ์›น ์‚ฌ์ดํŠธ์™€ ๋ชจ๋ฐ”์ผ ์•ฑ์˜ ์žฅ์ ์„ ์ทจํ•˜๋Š” ์•ฑ ์ƒ๋ช…์ฃผ๊ธฐ ๋ชจ๋ธ์„ ๊ฐ€์ง€๋Š” ์›น ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜.
    ์ฆ‰, ๋ชจ๋ฐ”์ผ ์›น์ด์ง€๋งŒ ์•ฑ์ฒ˜๋Ÿผ ์‚ฌ์šฉํ•˜๋Š”๋“ฏํ•œ ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์ด๋‹ค.

    ํ•ด๋‹น ๋ณด์ผ๋Ÿฌํ”Œ๋ ˆ์ดํŠธ๋Š” PWA ๋ฅผ ๋งŒ๋“ค๊ธฐ ์œ„ํ•ด ์‚ฌ์šฉ

  • vue-simple-boilerplate

    Vue ๋ฅผ ์•Œ๊ณ ์‹ถ์€ ์ดˆ์‹ฌ์ž๋“ค์„ ์œ„ํ•œ ํ…œํ”Œ๋ฆฟ, ํ•˜๋‚˜์˜ html ํŒŒ์ผ๋งŒ ์กด์žฌํ•˜ Vue ์—๋Œ€ํ•ด ๊ฐ„๋‹จํžˆ ์ฒดํ—˜ํ•  ์ˆ˜ ์žˆ๋‹ค.

    ํ•ด๋‹น ๋ณด์ผ๋Ÿฌํ”Œ๋ ˆ์ดํŠธ๋Š” ์ดˆ์‹ฌ์ž๋“ค์—๊ฒŒ ์ฒดํ—˜ํ•˜๊ฒŒ๋” ๋งŒ๋“  ํ…œํ”Œ๋ฆฟ

์ฐธ๊ณ ๋ฌธ์„œ