[VueJS] Vuejs CLI & 간단한 Form 만들기

Posted 19. December 2020. 4 min read.

Vue CLI & 간단한 Form 만들기

Vue Cli 공식 사이트 링크

Vue CLI 시작하기

설치

(sudo) npm install -g @vue/cli
// or
yarn global add @vue/cli

웹 개발 Tip

Vue Init

[Vue CLI 2.x, Vue CLI 4.x]

vue init '프로젝트 템플릿 유형' '프로젝트 폴더 위치'
vue init webpack-simple '프로젝트 폴더 위치'

[Vue CLI 3.x]

vue create '프로젝트 폴더 위치'

Vue NPM install

아래 순서대로 프로젝트 수행하고 이후 개발을 진행하면 됩니다.

cd 프로젝트 폴더
npm install
npm run dev

해당 npm run dev와 같은 명령어는 vue-cli 버전에 따라서 다를 수도 있습니다. 이를 제대로 확인하는 방법은 해당 프로젝트 파일에서는 package.json을 확인해보면 script 아래에 명령어들이 작성되어 있습니다. 이를 사용하거나 추가할 수 있습니다.

추가적으로 해당 프로젝트에 대한 개념을 제대로 잡기 위해서는 webpack에 대해 알고 있는 것이 좋습니다.

좋은 개발 Tip

vue 파일에서 vu 입력 후 tab 엔터시, 형태를 잡아줍니다.
하나의 component에는 하나의 element만 있어야한다.
components의 이름은 최소 2개 이상의 단어 조합으로 만들어야한다.

예제 코드

간단한 입력자 form 구현

로그인 폼을 나타내는 긴딘힌 코드는 다음과 같습니다. 해당 부분은 vue에 대한 개념을 잡기위한 예제이며, 많은 문제가 존재합니다.

예제 코드

<template />

<script />

<style />

vue 파일은 다음과 같은 형태로 구성됩니다. 해당 형태에서 template는 html, script는 javascript, style은 css로 이해해도 쉽습니다.

해당 간단한 로직에서는 따로 스타일 적용을 하지는 않았습니다.

<form v-on:submit.prevent="submitForm">
  <div>
    <label for="usernamne">id: </label>
    <input id="username" type="text" v-model="username" />
  </div>
  <div>
    <label for="password">pw: </label>
    <input id="password" type="password" v-model="password" />
  </div>
  <button type="submit">login</button>
</form>

import axios from 'axios'

export default {
  data: function() {
    return {
      username: '',
      password: '',
    }
  },
  methods: {
    submitForm: function(event) {
      console.log(this.username, this.password)
      var url = 'https://jsonplaceholder.typicode.com/users'
      var data = {
        username: this.username,
        password: this.password,
      }
      axios
        .post(url, data)
        .then(function(response) {
          console.log(response)
        })
        .catch(function(e) {
          console.log(e)
        })
    },
  },
}