Vue.js + AT UI로 SPA 개발 (TODO 목록 작성)

소개

평상시는 ReactJS로 주로 개발하고 있습니다만, 어쩐지 Vue.js를 시작해 봅니다.
1부터 컴포넌트를 만들어 가는 것도 힘들기 때문에 세련된 AT UI를 사용해 봅니다.

VueJS
AT UI

이번 작성하는 것(완성계)
노조미 야마 / ゔ js

TODO List는 덤 같은 느낌으로 환경 구축까지가 이번 목표가 됩니다.

환경 구축

yarn 명령을 실행할 수 있는 단계를 전제로 합니다.

cli install

@vue/cli 와 @vue/cli-init 를 global 에 install 합니다.@vue/cli-init 는 AT UI template에서 만들 때 필요합니다.

yarn global add @vue/cli @vue/cli-init

Template SPA 생성

그런 다음 AT UI에서 제공하는 template을 사용하여 토대를 만듭니다.

vue init at-ui/at-template $PROJECT_NAME
cd $PROJECT_NAME
yarn install

npm은 사용하지 않습니다 ...!

server 시작

package.json 를 보면

package.json

{
  "name": "test",
  "version": "1.2.0",
  "description": "A Vue.js project",
  "author": "rioc",
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  "dependencies": {
    "at-ui": "^1.2.0-beta",
    "at-ui-style": "^1.3.2",
    "vue": "^2.3.4"
  },
  "devDependencies": {
    "autoprefixer": "^7.1.1",
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-preset-env": "^1.5.2",
    "babel-preset-stage-2": "^6.24.1",
    "cross-env": "^5.0.1",
    "css-loader": "^0.28.4",
    "file-loader": "^0.11.2",
    "html-webpack-plugin": "^2.29.0",
    "postcss-loader": "^2.0.6",
    "rimraf": "^2.6.1",
    "node-sass": "^4.5.3",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.18.2",
    "url-loader": "^0.5.9",
    "vue-loader": "^13.0.0",
    "vue-style-loader": "^3.0.1",
    "vue-template-compiler": "^2.3.4",
    "webpack": "^3.0.0",
    "webpack-dev-server": "^2.5.0"
  },
  "license": "MIT"
}

이미 webpack-dev-server 가 준비되어 있으므로 그대로 script 를 실행해 갑니다.　

yarn dev

dev 서버가 시작됩니다.



브라우저가 자동으로 시작되어 http://localhost:8080을 열었다고 생각합니다.

프로젝트 트리

Project 트리는 이런 느낌

sgnz$tree -I node_modules
.
├── package.json
├── postcss.config.js
├── src
│   ├── App.vue
│   ├── assets
│   │   └── logo.png
│   ├── index.html
│   └── main.js
├── webpack.config.js
└── yarn.lock

2 directories, 8 files

AT UI Component 사용

지금까지 곧 개발을 진행할 수 있는 단계가 되었으므로 실제로 사용해 봅시다.

TODO List 만들기

우선 TODO를 만들어 보겠습니다.
추가 및 삭제 전용 녀석
App.vue 를 변경합니다.

App.vue

<template>
  <div class="container" id="app">
    <div class="app">
      <h1>TODO List</h1>
      <div class="row">
        <div class="column">
          <at-input v-model="inputTitle" placeholder="Input Title"></at-input>
          <at-input v-model="inputDescription" placeholder="Input description"></at-input>
        </div>
        <at-button @click="addTODO">ADD</at-button>
      </div>
      <div class="card-wrapper">
        <at-card style="width: 300px; margin: 1rem 0;" v-for="(item, index) in todoList" :key='index'>
          <h4 slot="title">{{ item.title }}</h4>
          <div slot="extra">
            <at-button type="text" @click="deleteTODO(item)">Delete</at-button>
          </div>
          <div>
            {{ item.description }}
          </div>
        </at-card>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data: {
    inputTitle: "",
    inputDescription: "",
    todoList: [],
  },
  methods: {
    addTODO: function () {
      this.todoList = this.todoList.concat(({ title: this.inputTitle, description: this.inputDescription }))
      this.inputTitle = ""
      this.inputDescription = ""
    },
    deleteTODO: function (item) {
      this.todoList = this.todoList.filter(x => x !== item)
    }
  }
}
</script>

<style lang="scss">
  .container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .app {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
    color: #2c3e50;
    text-align: center;
  }
  .card-wrapper {
    width: 100%;
    margin-top: 4rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
  }
  h1, h2 {
    font-weight: normal;
    margin: 16px 0;
  }
</style>

움직여 보면


이런 느낌이 생겼다고 생각합니다.
확실히 만들고 있습니다만 간단하게 깨끗한 레이아웃이 되었습니다!

요약

어땠습니까?
UI 프레임워크 자체는 자신이 프런트 엔드 개발을 시작한 2년전에서는, Production에 도입하기에는 아직이라고 느꼈습니다만, 최근에는 커스터마이즈성도 늘리고 간단하게 도입이 생겨 승발!

다음은 이 토대를 사용해 GraphQL API를 사용한 앱을 만들어, 기사를 투고할 수 있으면 좋겠습니다.