티스토리 뷰

Vue.JS

[Vue.JS] Vue.JS 시작하기

버미노트 2018. 5. 16. 01:08

vue-cli를 통해 Vue 프로젝트를 생성하고, 생성된 프로젝트의 디렉토리 구조와 npm start의 실행 순서를 살펴보도록 하겠습니다.

1. vue-cli를 이용하여 Vue 프로젝트 생성

자세한 Vue 프로젝트 생성 관련 내용은 [Vue.JS] Vue.JS 설치방법을 참고하시기 바랍니다.

vue init webpack my-project

위의 명령어로, webpack을 사용하는 Vue 프로젝트를 생성하도록 하겠습니다.

프로젝트 설정
프로젝트 설정

위의 그림과 같이 vue-cli를 통해 프로젝트를 설정하고 프로젝트를 생성합니다. 터미널을 켜고 생성된 프로젝트의 디렉토리로 이동하여, npm start shell 명령어를 실행하면 (저의 경우는 VS Code의 터미널을 이용합니다.),

Vue 프로젝트 실행
Vue 프로젝트 실행

위의 그림과 같이 Vue 어플리케이션이 실행됩니다. 브라우저에서 http://localhost:8080에 접속하면,

http://localhost:8080
http://localhost:8080

위의 그림과 같이 실행화면을 볼 수 있습니다. npm start로 실행된 어플리케이션은 개발용입니다. 배포버전으로 빌드하기 위해서는 npm run build 명령어를 실행하면 배포버전의 파일이 dist 디렉토리 밑에 생성되게 됩니다.

2. Vue 프로젝트의 디렉토리 구조

build/
    ...
config/
    dev.env.js
    index.js
    prod.env.js
    test.env.js
dist/
    ...
node\_modules/
    ...
src/
    assets/
        ...
    components/
        HelloWorld.vue
    router/
        index.js
    App.vue
    main.js
static/
    ...
test/
    ...
.babelrc
.editorconfig
.eslintignore
.eslintrc.js
.gitignore
.postcssrc.js
index.html
package-lock.json
package.json
README.md

vue-cli를 통해 생성한 프로젝트의 디렉토리 구조는 위와 같습니다. 중요한 프로젝트 구조만 이야기 하면..

  • build/ : webpack 빌드 관련 설정이 모여 있는 디렉토리입니다.
  • config/ : 프로젝트에서 사용되는 설정이 모여 있는 디렉토리입니다.
    • dev.env.js : npm start 시 적용되는 설정입니다.
    • prod.env.js : npm run build 로 배포 버전에 적용되는 설정입니다.
  • dist/ : 배포버전의 Vue 어플리케이션 파일들이 모여 있는 디렉토리입니다. npm run build 명령어 실행시 생성됩니다.
  • node_modules/ : npm으로 설치되는 서드파트 라이브러리들이 모여 있는 디렉토리입니다.
  • src/ : 실제 대부분의 코딩이 이루어지는 디렉토리입니다.
    • assets/ : 이미지 등.. 어플리케이션에서 사용되는 파일들이 모여 있는 디렉토리입니다.
    • components/ : Vue 컴포넌트들이 모여 있는 디렉토리입니다.
    • router/ : vue-router 설정을 하는 디렉토리입니다.
    • App.vue : 가장 최상위 컴포넌트입니다.
    • main.js : 가장 먼저 실행되는 javascript 파일입니다. Vue 인스턴스를 생성하는 역활을 합니다.
  • index.html : 어플리케이션의 뼈대가 되는 html 파일입니다.

3. npm start 실행 순서

npm start로 어플리케이션이 실행 되는 순서를 간단히 살펴보도록 하겠습니다.

package.json

package.json의 scripts 부분을 살펴보면,

{
  ...
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "unit": "jest --config test/unit/jest.conf.js --coverage",
    "e2e": "node test/e2e/runner.js",
    "test": "npm run unit && npm run e2e",
    "lint": "eslint --ext .js,.vue src test/unit test/e2e/specs",
    "build": "node build/build.js"
  },
  ...
}

npm start 명령어는 npm run dev를 실행 하고, npm run dev는 webpack-dev-server --inline --progress --config build/webpack.dev.conf.js를 실행 시키는 것을 볼 수 있습니다. webpack.dev.conf.js와 webpack.base.conf.js는 webpack의 설정 파일로, 두 설정 파일에 따라 webpack이 프로젝트를 빌드하게 됩니다. (참고: [webpack] webpack 4 사용하기)

index.html

index.html은 어플리케이션의 뼈대가 되는 html 입니다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>my-project</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

<div id="app"></div>에 Vue 컴포넌트들이 마운팅 됩니다. <div id="app"></div>에 마운팅 되는 이유는 main.js를 살펴보면 알 수 있습니다.

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

main.js는 Vue 인스턴스(new Vue())를 생성합니다. el: '#app'이 정의 되어 index.html의 <div id="app"></div>에 Vue 컴포넌트들이 마운팅되게 됩니다.

Vue 인스턴스를 살펴보면,

  • el: '#app' : id가 app인 html tag에 Vue 컴포넌트가 마운팅 됩니다.
  • router : vue-router를 사용할 수 있게 합니다.
  • components: { App } : App 컴포넌트를 사용합니다.
  • template: '<App />' : #app에 마운팅 되는 컴포넌트는 <App /> 입니다.

App.vue

가장 먼저 마운팅 되는 App 컴포넌트를 살펴보도록 하겠습니다.

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

index.html의 <div id="app"></div>에 위의 App 컴포넌트(<div id="app"></div>)가 랜더링 됩니다. <img />와 <router-view />가 랜더링 되는데, <router-view />에 무엇이 랜더링 되는지는 router/index.js를 확인 하면 알 수 있습니다.

router/index.js

vue-router에 사용 될 라우터들이 정의되어 있는 파일입니다.

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

/ 로 접근할 경우 HelloWorld 컴포넌트를 랜더링하게 됩니다.

components/HelloWorld.vue

/ 로 접근 할 때 보이게 되는 컴포넌트입니다.

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <ul>
      <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
      <li><a href="https://chat.vuejs.org" target="_blank">Community Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
      <br>
      <li><a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This Template</a></li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
      <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
      <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

4. GitHub 소스 확인

지금까지의 코드는 https://github.com/beomy/vue-start 에서 확인 하실 수 있습니다.

저작자표시

'Vue.JS' 카테고리의 다른 글

[Vue.JS] 템플릿 문법  (0) 2018.10.23
[Vue.JS] 라이프 사이클  (4) 2018.10.21
[Vue.JS] Vue 인스턴스  (0) 2018.10.11
[Vue.JS] Vue.JS 설치방법  (0) 2018.02.13
[Vue.JS] Vue.JS 소개  (0) 2018.01.20
댓글
공지사항
최근에 올라온 글