[Vue] 3. vue-cli를 이용한 프로젝트 생성

vue-cli를 이용해서 우선 쉽게 만들고 어떻게 생겼는지 확인해보자

6. vue-cli를 이용한 프로젝트 생성

Vue에서는 React, Angular처럼 기본적으로 프레임워크를 생성해주는 vue-cli이 있다. vue-cli를 통해 빠르게 프로젝트를 생성해보겠습니다.

6-1. vue-cli이란?

vue-cli에서는 여러가지 템플릿을 지원해주고 있는데

이 포스팅에서는 webpack으로 진행하겠습니다.

우선은 node.js를 설치를 하면 npm도 설치되어있는 상태이기 때문에 cmd창에서 아래와 같이 입력해보자.

vue-cli를 이용한 프로젝트 생성/실행

//1. vue-cli 전역 설치
npm install -g vue-cli
//2. webpack 템플릿을 이용한 my-project명 프로젝트 생성
vue init webpack my-project
//3. my-project 이동
cd my-project           
//4. project 실행 명령     
npm run dev                 

설치 중 물어보는데 엔터치고, Yes 하면서 설치 진행
npm run dev 입력 시 빌드가 되면서 서버가 실행
아래와 같이 메시지가 뜨면 http://localhost:8080에 접속

Your application is running here: http://localhost:8080

6-2. vue-cli로 생성된 프로젝트 구조와 파일

my-project 구조와 파일을 보면 여러 파일들이 있는데 우선 가볍게 보면

my-project 구조

biild          // webpack 빌드 관련 설정파일 관리하는 폴더
config         // 프로젝트에서 사용되는 설정파일 관리하는 폴더
node_modules   // npm으로 설치된 의존성 라이브러리들을 관리한는 폴더 
src
└─ assets      // css/js 등을 관리하는 폴더
└─ components  // Vue컴포넌트들을 관리하는 폴더
└─ router      // vue-router 설정을 하는 폴더
└─ App.vue     // App을 설정하는 컴포넌트
└─ main.js     // 가장 먼저 실행되는 js파일
index.html
package.json

package.json (일부분)

npm은 프로젝트에 대한 설정을 package.json에서 관리하고 이 파일에 JSON형식으로 작성해서 프로젝트에 대한 설정 및 의존성 관리를 함. (maven에 pom.xml처럼 의존성 모듈을 관리하는 개념)

  "dependencies": {
    "vue": "^2.5.2",
    "vue-router": "^3.0.1"
  },

index.html

index.html 파일하나에서 .vue/.js로 만든 각 컴포넌트들을 이벤트에 따라 id=”app”에 렌더링/바인딩 하면서 SPA개념이 구현된다.

<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>

src/main.js

export된 모듈들을 import해서 Vue 인스턴스 생성과 마운팅

// 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

// Vue인스턴스 생성
new Vue({
  el: '#app', // id가 app인 div태그에 Vue 컴포넌트 마운팅
  router,     // vue-router
  components: { App }, // App 컴포넌트
  template: '<App/>'   // App 템플릿
})

src/App.vue

vue-router를 통한 컴포넌트를 마운팅

<template>
  <div id="app">
    <img src="./assets/logo.png">
    // vue-router로 컴포넌트 노출영역
    <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>

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
    }
  ]
})

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 {
  // 해당 Vue파일을 HelloWorld 라는 컴포넌트 이름
  name: 'HelloWorld',
  // data 바인딩
  data () {
    return {
      // template안에 msg에 data 바인딩
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<!-- 각 컴포넌트 마다 따로 css를 설정할 수 있다. -->
<!-- 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>

참고

6. vue-cli를 이용한 프로젝트 생성

Share this post