用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