用vue-cli 與vuex一步一步搭建一個筆記應用(二)

上一篇，我們已經藉助vue-cli把環境搭建好了，這一篇就開始介紹如何寫筆記應用的界面了。

我們借鑑的博文劃分得很清楚

因此在components中建立三個組件。toolbar.vue，noteList.vue ,Editor.vue

再提一句vue-cli採用的es6語法。
因此它的模塊化語句就是：

export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to My Vue.js App'
    }
  }
}

這裏我準備單獨寫一篇博文來敘述ES6 module這塊

側邊欄

toolbar.vue

<template>
    <div id="toolbar">
        <i @click="addNote" class="glyphicon glyphicon-plus"></i>
        <i @click="tooglefavorite" class="glyphicon glyphicon-star"></i>
        <i @click="deleteNote" class="glyphicon glyphicon-remove"></i>
    </div>
</template>
<script>
export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to My Vue.js App'
    }
  },
  methods:{
    addNote:function(){
      console.log('addNote');
    }, 
    tooglefavorite:function(){
      console.log('addNote');
    },
     deleteNote:function(){
      console.log('addNote');
    }
  }
}
</script>

然後在app.vue中import引入toolbar模塊

<template>
  <div id="app">
    <toolbar></toolbar>
  </div>
</template>

<script>
import Toolbar from './components/Toolbar.vue'
export default {
  name: 'app',
  components: {
    Toolbar
  }
}
</script>

可以看到效果了

當然，長成這樣肯定是不行的。案例中的css都同一寫在一個style.css裏面，這裏我們單獨寫到toolbar裏面也行。

最終toolbar源碼：

<template>
    <div id="toolbar">
        <i @click="addNote" class="glyphicon glyphicon-plus"></i>
        <i @click="tooglefavorite" class="glyphicon glyphicon-star"></i>
        <i @click="deleteNote" class="glyphicon glyphicon-remove"></i>
    </div>
</template>
<script>
export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to My Vue.js App'
    }
  },
  methods:{
    addNote:function(){
      console.log('addNote');
    }, 
    tooglefavorite:function(){
      console.log('addNote');
    },
     deleteNote:function(){
      console.log('addNote');
    }
  }
}
</script>

<style>
  #toolbar i {
  font-size: 30px;
  margin-bottom: 35px;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.5s ease;
}

#toolbar i:hover {
  opacity: 1;
}
</style>

NoteList部分的編寫

NoteList也很簡單，就是一個標題，一個按鈕組，一組列表

<template>
    <div id="notes-list">
        <div id="list-header">
            <h2>{{name}}|username</h2>
            <div class="btn-group">
                <button type="button" class="btn btn-primary" @click="show(all)">所有筆記</button>
                <button type="button" class="btn btn-primary" @click="show(favor)">喜歡的</button>
            </div>
        </div>
        <div class="container">
            <ul class="list-group">
               <li class="list-group-item" v-for="item in items">{{item.content}}</li class="list-group-item" >
            </ul>
        </div>
    </div>
</template>
<script>
    export default{
        name:'notelist',
        data(){
            return {
                name:"NoteList",
                items:[{
                    id:1,
                    content:"第一條消息"
                },{
                    id:2,
                    content:"第二條消息"
                }]
            }
        },
        methosd:{
            show:function(type){
                console.log(type);
            }
        }
    }
</script>
<style>
    #notes-list .container {
      height: calc(100% - 137px);
      max-height: calc(100% - 137px);
      overflow: auto;
     width: 100%;
     padding: 0;
}

#notes-list .container .list-group-item {
  border: 0;
  border-radius: 0;
}
</style>

Editor

最後寫Editor部分，就是一個簡單的textarea

<template>
    <div id="note-editor">
        <textarea @input="editNote"></textarea>
    </div>
</template>
<script>
    export default{
        name:'editor',
        data(){
            return {
                editNote:''
            }
        }
    }
</script>
<style>
#note-editor textarea {
  height: 100%;
  border: 0;
  border-radius: 0;
}
</style>

最後預覽一下我們的界面，嗯，跟那篇博文的長得差不多了（廢話，css都是引用的別人的）

至此，界面的搭建已經完成，下一步就是用vuex了。留着下一節介紹。
想要源碼的可以去我的git clone：
git :vuex-notes