[Vue.js] Vue 초기 설정 (CDN방식 , Webpack 방식)

정현섭·2021년 4월 17일

CDN 방식으로 Vue 시작하기

HTML 파일 안에서 url 경로를 포함시켜 CDN으로부터 Vue 라이브러리를 불러오는 방식이다.

설정방법

최신버전 불러오기
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

특정버전 불러오기
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>

간단한 사용예시

1. 루트 Vue 인스턴스 만들기

<script>
    new Vue({
        el : '#app',
    });
</script>

2. Vue 컴포넌트 전역등록 하기

<script>
    Vue.component('wordRelay', {
        template: `
            <div>
                <p>{{currentWord}}</p>
                <form v-on:submit="onSubmitForm">
                    <input type="text" v-model="answerText" v-ref="text">
                    <button type="submit">입력!</button>
                </form>
                <p style="color: skyblue">{{msg}}</p>
            </div>
        `,
        props: ['startWord'],
        data() {
            return {
                currentWord: this.startWord,
                answerText:'',
                msg:''
            }
        },
        methods: {
            onSubmitForm(e) {
                e.preventDefault();
                if(this.answerText.length > 0 && this.currentWord[this.currentWord.length - 1] === this.answerText[0]) {
                    this.msg = "굿굿";
                    this.currentWord = this.answerText;
                }
                else
                    this.msg = "땡~";
                this.$refs.text.focus();
            }
        }
    })
</script>

3. HTML body에서 컴포넌트 사용하기

<body>
    <div id="app">
        <word-relay start-word="소나무"></word-relay>
        <word-relay start-word="무지개"></word-relay>
        <word-relay start-word="개나리"></word-relay>
    </div>
</body>

결과 화면

Webpack방식으로 Vue 시작하기

npm으로 Vue 라이브러리를 불러오는 방식이다.
node.js 문법의 모듈들을 사용하기 위해서 Webpack이 필요하다.

설정 방법

1. node 설치하기

2. npm 이용하여 모듈 설치

$ npm init
$ npm install vue
$ npm install webpack webpack-cli --save-dev

3. webpack 설정하기

webpack.config.js 예시 (node.js 문법임.)

const path = require('path');

module.exports = {
  entry: {
    app: path.join(__dirname, 'main.js'),
  },
  module: {},
  plugins: [],
  output: {
    filename: 'app.js',
    path: path.join(__dirname, 'dist'),
  },
};

Webpack 설정파일인 webpack.config.js는 node.js문법으로 쓰이며 기본적으로 위와 같은 구조를 가진다.

entry에 설정된 파일(./main.js)은 root vue instance선언과 template 불러오기 등을 수행한다.

ouput에 설정된 파일(./dist/app.js)은 webpack이 ./main.js를 참고하여 번들링을 진행한 후 최종 결과물로 생성된 파일로, index.html에서 불러와 사용한다.

간단한 사용 예시

main.js (webpack entry)

import Vue form 'vue';

import WordReply from './WordReply.vue'

new Vue({ el : '#app' })

Vue라이브러리 불러오기
정의한 컴포넌트들 불러오기
root vue 인스턴스 만들기

WordReply.vue (컴포넌트 파일)

// TemplateName.vue
Vue.component('wordRelay', {
        template: `
            <div>
                <p>{{currentWord}}</p>
                <form v-on:submit="onSubmitForm">
                    <input type="text" v-model="answerText" v-ref="text">
                    <button type="submit">입력!</button>
                </form>
                <p style="color: skyblue">{{msg}}</p>
            </div>
        `,
        props: ['startWord'],
        data() {
            return {
                currentWord: this.startWord,
                answerText:'',
                msg:''
            }
        },
        methods: {
            onSubmitForm(e) {
                e.preventDefault();
                if(this.answerText.length > 0 && this.currentWord[this.currentWord.length - 1] === this.answerText[0]) {
                    this.msg = "굿굿";
                    this.currentWord = this.answerText;
                }
                else
                    this.msg = "땡~";
                this.$refs.text.focus();
            }
        }
    })

index.html

<body>
	<div id="app"></div>
  	<word-relay start-word="소나무"></word-relay>
    <word-relay start-word="무지개"></word-relay>
    <word-relay start-word="개나리"></word-relay>
</body>
<script src="./dist/app.js"></script>

정현섭

이전 포스트

[python] list comprehension 사용법

다음 포스트