上一篇，我们已经借助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