项目作者: hohoonlee

项目描述 :
abcd firebase study 3차 모임용 DEMO
高级语言: Vue
项目地址: git://github.com/hohoonlee/nuxt-vuetify-memo.git
创建时间: 2017-09-14T01:18:35Z
项目社区:https://github.com/hohoonlee/nuxt-vuetify-memo

开源协议:

下载


nuxt-vuetify-memo

스터디 : JS기초 -> ES6 -> VueJS -> Firebase -> …

아래와 같은 app을 만드는 codelab
완성화면

1. 기본 환경 설정 <2>

NodeJS (필수)

  1. $ node -v
  2. $ npm -v

Firebase Tools (필수)

  1. $ firebase --version
  2. # 없으면 npm i -g firebase-tools

Vue cli (필수)

  1. $ vue --version
  2. # 없으면 npm i -g vue-cli

yarn (옵션)

  1. $ yarn -v
  2. # 없으면 npm i -g yarn

Visual Studio Code (옵션)

tip: npm-check가 설치되어 있으면 upgrade를 체크해줌.

  1. $ npm-check -gu
  2. # 없으면 npm i -g npm-check

2. 프로젝트 생성 (nuxt) <15>

> nuxtjs + vuetify project 만들기

vue-cli를 사용하여 Nuxt.js + Vuetify.js 를 생성한다.
(이 예제에서는 route, store등의 기능을 사용하지 않는다.)

아래 명령어를 실행하여 프로젝트 생성 및 기본 화면을 확인한다.

  1. $ vue init vuetifyjs/nuxt memo-project
  2. # project name, project description, Author는 자유롭게 입력.
  3. $ cd memo-project
  4. $ npm install moment firebase --save # or yarn add moment firebase
  5. $ npm install # or yarn
  6. $ npm run dev # or yarn run dev
  7. # 만약 install과정에 오류가 발생하면, package.json에서 version을 latest로 변경해보고 다시 실행해본다.
  8. # 브라우져 접속 경로 : http://localhost:3000

기본페이지

> nuxt.config.js 수정

작성자 코딩스타일과 맞지 않아 기본 ESLINT 부분을 제거합니다.
(제거 없이 규칙을 수정하거나, 규약에 맞춰 개발할 수도 있습니다.)

  1. if (ctx.dev && ctx.isClient) {
  2. // config.module.rules.push({
  3. // enforce: 'pre',
  4. // test: /\.(js|vue)$/,
  5. // loader: 'eslint-loader',
  6. // exclude: /(node_modules)/
  7. // })
  8. }

3. 순수 로컬에서 실행되는 앱 <50>

layouts/default.vue 편집 (이 파일 하나에서 모든 동작이 수행됩니다.)

1) 불필요한 영역 제거

  1. <!-- 59라인에서 72라인까지의 아래 소스를 제거한다. (오늘쪽 메뉴 영역) -->
  2. <v-navigation-drawer
  3. temporary
  4. :right="right"
  5. v-model="rightDrawer"
  6. <v-list>
  7. <v-list-tile @click="right = !right">
  8. <v-list-tile-action>
  9. <v-icon light>compare_arrows</v-icon>
  10. </v-list-tile-action>
  11. <v-list-tile-title>Switch drawer (click me)</v-list-tile-title>
  12. </v-list-tile>
  13. </v-list>
  14. </v-navigation-drawer>
  15. <!-- 26라인에서 44라인까지의 아래 소스를 제거한다. (메뉴 상단의 아이콘과 버튼) -->
  16. <v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
  17. <v-btn
  18. icon
  19. @click.stop="miniVariant = !miniVariant"
  20. <v-icon v-html="miniVariant ? 'chevron_right' : 'chevron_left'"></v-icon>
  21. </v-btn>
  22. <v-btn
  23. icon
  24. @click.stop="clipped = !clipped"
  25. <v-icon>web</v-icon>
  26. </v-btn>
  27. <v-btn
  28. icon
  29. @click.stop="fixed = !fixed"
  30. <v-icon>remove</v-icon>
  31. </v-btn>

2) 사용할 data format 정의

  1. // 배열 data 형식을 firebase realtime database처럼 object형태로 변경합니다.
  2. // 현제 선택된 item을 표현할 current를 추가합니다.
  3. export default {
  4. data() {
  5. return {
  6. clipped: false,
  7. drawer: true,
  8. fixed: true,
  9. items: {
  10. aa: {id: 'aa', memo: 'Welcome',icon: 'label', datetime: '2017.09.14 00:00:00'},
  11. bb: {id: 'bb', memo: 'Inspire', icon: 'label', datetime: '2017.09.14 00:10:00'}
  12. },
  13. current:{memo:''},
  14. miniVariant: false,
  15. title: '메모앱'
  16. }
  17. }
  18. }

3) 왼쪽 data 목록 영역을 바뀐 items에 맞게 변경.

  1. <!--
  2. v-navigation-drawer 에 permanent 속성 추가.
  3. v-list-tile에서 :to="item.to" 제거.
  4. v-icon에 v-bind:class="{'orange--text':item.id==current.id}" 을 추가해서 선택시 icon생상을 변경한다.
  5. v-list-tile-title의 item.title을 item.memo로 변경.
  6. v-list-tile-title 밑에 <v-list-tile-sub-title v-text="item.datetime"></v-list-tile-sub-title> 추가
  7. -->
  8. <v-navigation-drawer permanent persistent :mini-variant="miniVariant" :clipped="clipped" v-model="drawer" enable-resize-watcher>
  9. <v-list>
  10. <v-list-tile v-for="(item, i) in items" :key="i">
  11. <v-list-tile-action>
  12. <v-icon v-bind:class="{'orange--text':item.id==current.id}" v-html="item.icon"></v-icon>
  13. </v-list-tile-action>
  14. <v-list-tile-content>
  15. <v-list-tile-title v-text="item.memo"></v-list-tile-title>
  16. <v-list-tile-sub-title v-text="item.datetime"></v-list-tile-sub-title>
  17. </v-list-tile-content>
  18. </v-list-tile>
  19. </v-list>
  20. </v-navigation-drawer>

4) 편집영역 추가
``` html
<!—

를 제거하고 아래 소스를 추가한다.
—>




  1. <v-card-text>
  2. <v-btn class="pink" dark absolute bottom right fab>
  3. <v-icon>add</v-icon>
  4. </v-btn>
  5. </v-card-text>
  6. </v-card>
  7. </v-flex>

  1. ![중간결과](images/local-step1.png)
  2. > 5) 상세 보기 기능 작업
  3. - 왼쪽 영역 클릭시 가운데 편집창에 반영되는 기능을 추가한다. (vue bind 수정도 적용됩니다.)
  4. ``` html
  5. <!-- v-list-title event 추가 -->
  6. <v-list-tile v-for="(item, i) in items" :key="i" @click.stop.prevent="detail(item)">
  1. //detail method 생성
  2. export default {
  3. data() {
  4. ~~~생략~~~
  5. },
  6. methods: {
  7. detail(i) {
  8. this.current = i
  9. }
  10. }
  11. }

6) 새글 기능 작업

  • 편집창안에 글을 지우고 새글을 받을 준비를 합니다.
    1. <!-- textare 편집창 아래의 pink btn에 event 추가 -->
    2. <v-btn class="pink" dark absolute bottom right fab @click="reset">
    1. //methods안에 reset method 추가
    2. reset() {
    3. this.current = {memo:''};
    4. }

7) 저장 기능 작업

  • 편집창에서 focus를 잃으면 items에 저장
    1. <!-- textarea에 event 추가 -->
    2. <v-text-field @blur="save" placeholder="새로운 메모를 입력해보세요!" full-width rows="15" v-model="current.memo" textarea></v-text-field>
    ``` javascript
    //모듈 import