这个 vue notes example 是我们之前做的一个 vue.js 项目 .. 打开它里面的 app.js ..

这个 Vue 项目里面有三个组件 .. Notes .. 是应用的整体的包装 .. 每个笔记项目用的是 Note 组件显示的 ... 在这个 Note 组件里面又用了一下 Editor 组件，它可以显示笔记的具体的内容 ..

现在这几个组件都在一个文件里面 .. 我们的新项目用的模块化的方法 .. 所以可以把这几个组件都单独放在一个独立的文件里面 ..

回到这个 vuex 版本的项目 ..

Notes

先在 src，components 目录的下面，创建一个文件，名字是 Notes.vue .. 里面添加一个组件结构 .. 编辑器安装了 language-vue 插件以后，输入一个 template ，出有一个 Vue Component 代码片断 ..

在组件的 template 里面，一组 div ，里面包装一个 h4 标题元素 .. 在它里面先添加一个静态文字 .. Ninghao Notes App

再打开这个项目的预览窗口 ..

然后打开项目下面的这个 App.vue 这个组件 .. 在这里我们可以用一下刚才创建的 Notes 这个组件 ..

用之前先得导入这个组件 .. import Notes from ./components/Notes

在 components 里面，添加一个 Notes

然后在组件的模板里面，再用一下 Notes 组件 .. 先去掉它里面的 HelloWorld 这个组件 .. 换成 notes ..

出现一个错误，说定义了 HelloWorld，但是没用它 ... 去掉导入这个组件的代码 ..

界面上会出现在 Notes 组件的模板里面添加的这个静态文字 .. 上面这个 Vue 标志也可以去掉 ...

Note

再创建一个组件 .. 放在 components 的下面，名字是 Note.vue ... 添加一个组件结构 ..

在 template 里面先添加一组 div，里面包装一个静态文字 .. 笔记 ..

回到 Notes 组件，在这里，再用一下 Note 组件 .. 先导入 Note， import Note from 当前目录下的 Note ..

在默认导出的这个对象里面，添加一个 components 属性 .. 它里面再添加一个 Note ..

然后在 Notes 的模板里， 再用一下这个 note 组件 ...

现在，这个标题的下面，会显示 Note 组件的内容 ..

Editor

再添加一个 Editor 组件 .. 名字是 Editor.vue .. 添加一个组件 .. 在模板里面，一组 div，里面包装一个文本区域 ..

回到 Note 组件，先导入 Editor 组件 .. 然后在组件的默认导出这里，添加一个 components ，里面添加一个 Editor 组件 ..

在组件的模板里，再用一下这个 Editor 组件 ..

现在，笔记的下面，会显示一个文本区域，它就是 Editor 组件要显示的东西 ..