Vue.js 시작하기

How to start Vue.js

목차

• 필요한 툴 설치
• Getting Started
• Project 구조

필요한 툴 설치

node.js

• node.js 란?

  • 어느곳에서나 JavaScript로 프로그래밍이 가능하게 하는 framework
  • server-side rendering, command line tools 등에 사용

• npm 이란?

  • Package Manager
  • library, package 들을 쉽게 관리할 수 있도록 해줌
  • package.json 파일안에 사용하는 외부 라이브러리들과 버전 정보들이 들어있다.

• npx 란?

  • 원하는 library, package를 실행할 수 있도록 해줌

  • 실행하는 방법

    npx "some-package"

• node.js 공식사이트

  

• node, npm version 확인

  node -v
  v14.15.1
  
  npm -v
  6.14.8

Vue 개발환경 만들기

package.json 파일 생성

npm init

Vue 설치

npm install vue

Webpack 설치

webpack.config.js 파일 생성

npm install webpack webpack-cli -D

• webpack은 개발환경에서 모듈 번들러로써 활용하기 위한 것으로 -D옵션을 통해 package.json에서 DevDependencies에 추가

webpack.config.js 파일 생성

// webpack 설정
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const path = require('path')

module.exports = {
    mode: 'development', // vue에서 개발자 도구 쓰게 해줌 
    // 여러개의 파일을 읽어오기
    entry: {
        app: path.join(__dirname, 'src', 'main.js') // src에 있는 main.js
    },
    // 관련된 모듈
    module: {
        rules: [
            {
                test: /\.vue$/, // .vue 확장자는
                use: 'vue-loader', // 모두 vue-loader로 번역을 해라
            }
        ]
    },
    plugins: [
        new VueLoaderPlugin() // vue loader가 가지고 있는 plugin을 불러오겠다.
    ],
    // 최종 결과 (.js)
    output: {
        filename: 'app.js',
        path: path.join(__dirname, 'dist') // 결과를 이 경로로 던져줘!
    }
}

main.js 생성

import vue from 'vue' // vue 자체를 불러옴
import App from './App.vue' // 내가 만든 vue 파일

new Vue({
    el: '#app', 
    // 렌더링
    render: function(createElement) {
        createElement(App)
    }
})

App.vue 생성

<!-- 기본 구조 --> 
<template>
    <h1> 이게 싱글파일컴포넌트, 최상위 컴포넌트입니다. </h1>
</template>
<script>
export default {

}
</script>
<style lang="">

</style>

Vue 파일들을 번역, 불러오기 위한 작업

npm install vue-loader vue-template-compiler -D

• vue-loader : Vue 파일을 불러오는 역할
• vue-template-compiler : Vue 파일을 해석하는 역할

index.html에 사용하기

<script src="../dist/main.js"></script>

• 생성된 main.js 파일을 index.html에 위와 같이 삽입하면 Vue Component를 사용할 수 있다.

변경사항 적용

npm run build

• 변경사항이 생긴다면 위 명령어로 적용해주자

Style

CSS 불러오기

npm install vue-style-loader css-loader -D

• vue-style-loader : vue의 style
• css-loader : webpack css를 불러오는 로더

// webpack.config.js // module -> rules 에 추가
{
    test: '/\.css$/',
    use: ['vue-style-loader', 'css-loader'] // 앞에꺼가 css를 만들거고 뒤에꺼가 불러와서 처리해준다
}

@vue/cli

위의 복잡한 과정들을 자동으로 처리해주는 package

npm install -g @vue/cli

Getting Started

@vue/cli의 vue create 로 생성되는 프로젝트에는 어떤 것들이 있는지 알아본다.

• 공식 문서

Project 생성

vue create 'project name'

• vue 2.x version, npm module을 사용하였다.
• 처음 생성시 1분정도 소요

Project 실행

npm run serve

Project 중지

ctrl + c

Project 구조

template/
├── babel.config.js
├── node_modules
├── package-lock.json
├── package.json
├── public
|  ├── favicon.ico
|  └── index.html
├── README.md
└── src
   ├── App.vue
   ├── assets
   ├── components
   └── main.js

babel.config.js

• 공식 문서
• Babel
  • JavaScript transcompiler
  • ECMAscript 2015+ 버전의 코드를 이전 버전으로 변환해준다.
  • TypeScript, JSX 를 JavaScript로 변환해준다.
• Babel 환경 설정을 위한 파일

node_modules

• 외부 라이브러리를 추가했을때 자동적으로 추가됨
• 라이브러리 구조 확인 가능

package-lock.json

• 공식 문서
• npm을 사용해서 node_modules 트리나 package.json 파일을 수정하게되면 자동으로 생성되는 파일
• 파일이 생성되는 시점의 의존성 트리에 대한 정확한 정보를 가지고 있다.

package.json

• npm에서 버전을 관리할때 내 프로그램에서 사용하는 외부 라이브러리와 그 라이브러리 들의 버전이 명시되어 있다.

  {
    "name": "test",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
      "@testing-library/jest-dom": "^5.11.4",
      ...
    },
    "devDependencies": {
      "@vue/cli-plugin-babel": "~4.5.0",
      ...
    },
    ...
  }

  • name : 어플리케이션 이름
  • version : 어플리케이션 버전
  • private : private or public
  • dependencies : 사용하는 외부 라이브러리
  • devDependencies : 개발에만 사용되는 외부 라이브러리

public/

• 사용자에게 배포할 때 외부적으로 보여지는 것들
• farvicon.ico, index.html 등

README.md

src/

• 소스코드
• main.js, App.vue 등