在上一篇文章中，我们对整个编辑器项目的大体结构有了一定的了解，主要分为菜单栏和编辑区。菜单栏包括了编辑器的主要文本操作功能，且菜单项是可配置的。编辑器界面显示比较简单，是一个可编辑的 div 区域。接下来我们就来把编辑器的整体框架搭建起来，让其可以在界面上显示出来。

首先，在 目录下，新建两个目录，分别是 目录，存放编辑区相关组件；和 目录，存放菜单相关组件。然后在 目录下新建一个文件 ，这就是菜单栏组件，菜单项将要被整合到这个组件里。

下面我们就来完成 menubar.vue 这个文件的编写

模板编写（template）

先给出代码：

首先是模版外层的代码，这是通用写法，以 标签表示这是模版部分。

这里的数据对象有四个：menus，全部菜单项配置；viewMenus ，可见的菜单项；stated，store 中的数据源；lang，菜单的语言集。

因为之前配置了很多菜单项，包括 className，action，以及 icon 等。同时，我们在编辑器全局配置中，配置了 viewMenu 选项，即可见的菜单。所以使用 循环取出菜单项的时候，应该从 viewMenu 中读取。

另外，项目中使用的图标来自于 fontawesome，因为它的资源较多且大部分都是免费的。需要的伙伴们可以私信博主免费获取本项目用到的字体图标资源。

Js 代码编写

同样，这里也先给出代码：

引入相关的配置文件，读取所需数据。在组件中， 必须是一个函数。在 data 函数中，返回之前使用的 、 、 。

在 computed 中，返回 store 中 的相关数据。前面的文章说过，在组件中获取 store 数据，最好的方式就是在 computed 属性中获取。这里的 stated 就表示 menuBar 菜单栏对象，保存着各个菜单项的状态。

在 属性中，包含了三个方法。 用于处理菜单栏的点击事件。同时传入点击事件和当前菜单项。然后处理该菜单项的下拉框展示，以及更新菜单栏的状态和行为。

样式编写

在本项目中，我们的样式代码不使用 css，而是使用 css 的扩展语言：sass(scss)。如果有兴趣，可以去了解一下，其实 sass 和 css 代码比较类似，不过 sass 更加灵活，写起来更加方便。不过使用的时候，需要被编译为 css 代码，所以需要添加相关的 loader 来处理。所以需要先安装相应的 loader：

安装完成之后，我们就可以开始编写样式代码了：

在 目录下，新建一个文件 。这是编辑区组件，后续大部分操作都将在这里面进行，不过暂时不需要做太多工作。代码如下：

这就是编辑区的代码，暂时比较少，后续会逐步增加。注意，虽然这是我们的编辑区，但是却没有任何的文本输入框或者文本输入区域。而只是有一个 div 而已，但是这个 div 具有一个属性 ，就是原因所在。

是 HTML5 的一个新属性，它的作用是规定当前元素的内容是否可编辑，比如：

添加了这个属性之后，这一个段落就是可编辑的段落，可随意修改。

接下来在 文件夹下创建 。作为主要布局组件。在布局中，需要将所有的组件都在这里组装起来，包含菜单组件，编辑区组件， 以及下拉框组件。

最后一步，修改 的内容。这是根组件位置，布局组件需要存放到这个组件里：

代码很简单，只需要导入 Layout 布局组件即可。

在 style 部分，需要做一点工作。因为项目中所使用的图标或者某些样式是用的 font-awesome 。所以，我们需要将它在此处引入到根组件中。首先需要下载并解压到 文件夹下（需要该文件的伙伴可以私信博主免费获取）：

最后，在 添加 style 部分代码如下：

完成到这里，我们就可以启动项目了 ，启动成功后，我们打开浏览器查看效果如下：