[vue.js] 1. Vue.js를 설치하는 방법과 webpack 설치 시 구조

개발 2018. 6. 28. 10:56

설치는 여러가지 방법이 존재한다.

1. 직접 <script>를 추가하는 방법(CDN을 사용하는 방법)

3. NPM을 설치한 후 사용하는 방법

4. Vue.JS에서 제공하는 공식 CLI(Command Line Interface)인 vue-cli을 사용하는 방법

이 블로그에서는 4번을 사용할 것이며, webpack을 이용할 것이다.

사용 방법은 다음과 같다.

# vue-cli 설치
$ npm install --global vue-cli
# "webpack" 템플릿을 이용해서 새 프로젝트 생성
$ vue init webpack my-project
# 의존성을 설치하고 실행하세요!
$ cd my-project
$ npm install
$ npm run dev

회색은 주석이고, 검은색이 명령어다!

터미널을 열고! 5줄의 명령어를 순서대로 입력하자!

여기서 my-project의 경우 원하는 프로젝트 폴더명을 작성한다.

vue init webpack ...

을 입력하면 뭘 자꾸 물어본다.

npm init으로 package.json을 생성할때와 유사하다.

프로젝트명, 프로젝트 설명, 사용자, 뭘 설치할래? 할래? 할래?

특별한 설정을 하기 귀찮다면, 그냥 Enter키만 쳐서 넘기면 된다.

Use ESLint to lint your code?의 경우 처음이면 No을 하는것을 추천한다.

안 그러면 쓸데없는 에러를 페이지마다 수십개씩 발생시킨다.

엔터를 치면서 빈 공간이 너무 많다.

세미클론 안 붙여도 되는 코드인데 붙였다,

등등 공백 1개 1개 모두 에러가 발생한다.

에러라 하지만 일종의 경고랄까. 작동은 되지만 엄청 찝찝하다.

이렇게 하면 webpack에 의해서 vue 프로젝트가 생성된다.

그런데 많이 복잡하다. 이건 뭐지? 어떻게 사용해야 하는거지?

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 인스턴스를 생성하는 역활을 합니다.

1. index.html

쉽게 말하면 이 어플리케이션은 자체는 index.html 파일이 보이는 것이다.

이 페이지에 선언된 id="app"인 div에 vue컴포넌트들이 들어간다고 할 수 있다.

Jquery 등 외부 라이브러리를 CDN으로 사용하기 위해서는 이 HTML파일에 링크를 적는다

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>webpacktest</title>
  </head>
  <body>
    <div id="app"></div>

    <script
    src="https://code.jquery.com/jquery-3.3.1.js"
    integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
    crossorigin="anonymous"></script>    
<!-- built files will be auto injected -->
  </body>
</html>

2. main.js

main.js에서 Vue 인스턴스를 생성한 뒤, 로드한다.

el: '#app'이므로 위 index.html의 <div id="app"></div>에 Vue 컴포넌트들이 마운트 된다.

트들이 마운팅되게 됩: http://beomy.tistory.com/40?category=646688 omy]// 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/>'

})

Vue 인스턴스 내부 속성을 살펴보면,

el: '#app' - index.html 내에 id가 app인 div 태그에 Vue 컴포넌트를 마운팅하게 된다.

router - vue-router를 사용할 수 있다.

components: { App } - App 컴포넌트를 사용한다는 의미며, 지역적 등록이다.

template: '<App />' - #app에 마운팅 되는 컴포넌트는 <App /> 이다.

[한 수 배운 참고 블로그]

http://beomy.tistory.com/40?category=646688

http://itstory.tk/entry/vuecli-Webpack-%ED%85%9C%ED%94%8C%EB%A6%BF%EC%9C%BC%EB%A1%9C-vuejs-%EA%B0%9C%EB%B0%9C%ED%99%98%EA%B2%BD-%EA%B5%AC%EC%B6%95%ED%95%98%EA%B8%B0

'개발' 카테고리의 다른 글

[React] 리액트의 확장자는 .js가 아니라 .jsx이다. (0)	2018.07.04
[vue.js] Vue.js란 무엇이며 왜 사용할까? (0)	2018.06.30
웹스톰 쓸데없는 경고창들 없애기 (0)	2017.12.12
맥 터미널에서 Error: Xcode alone is not sufficient on Sierra. (0)	2017.12.11
회원가입 시 암호화 방법 : SHA256 사용하기 - C# (0)	2017.10.19