下面去创建一个应用标志组件，先打开之前我们准备好的项目资源目录，里面有一个样式表，在 assets/styles 的下面，打开这个 app-logo.css 。 复制一下这个样式表里所有的内容。

再回到我们这个 vue 前端项目，新建一个样式表，放在 src/app/components/styles 的下面，名字叫 app-logo.css ，把复制的内容粘贴到这个文件里。

我把应用的标志转换成了一个字体图标，字体文件转换成了 base64 编码格式。 在元素上添加这个 app-logo 类，然后再添加一个 w32 这个类就可以显示应用的图标了。

创建一个组件，放在 src/app/components 的下面，名字是 app-logo.vue ， 定义一个组件，组件的名字是 AppLogo 。 在这个组件的样式里面，要导入使用刚才创建的样式表，@import 位置是当前目录 styles 下面的 app-logo.css 。

再处理一下组件的模板，可以使用一组小 i 元素，元素上面绑定 class 属性，设置成 appLogoClasses ，等会儿再去定义这个数据。再绑定元素的 styles 属性。设置成 appLogoStyles。

属性

这个组件支持使用几个属性，放在 props 里面，添加一个 name 属性，一个对象，先设置一下属性的 type ，类型是 String，再用 default 可以设置一下默认的值，设置成 w32 。

再添加一个 size 属性，这个属性值的 type 可以是 String 也可以是 Number。用 default 设置一个默认的值，设置成 32 。 使用这个组件的时候可以用这个属性设置标志的大小。

然后再添加一个 color 属性，这个属性值的 type 是 String， 把属性的 default 设置成 #000000，表示黑色。用这个属性可以设置标志的颜色。

计算

然后在组件的 computed 里面添加两个计算属性，一个是 appLogoClasses，这个属性返回的就是要绑定在小 i 元素上的类，一个数组，里面添加一个 app-logo，再添加一个 this.name。 这个 name 是这个组件的一个属性。

下面再添加一个 appLogoStyles ，在这个计算属性返回的是给元素绑定的样式，fontSize 这个样式设置成 this.size 加上 px ， color 这个样式可以设置成 this.color。

测试

定义好这个标志组件可以找个地方试一下，打开 app-home 这个组件，在组件里添加一组 script ，默认导出一个对象。然后在上面导入 AppLogo 组件，位置是@/app/components/app-logo 。在组件对象里添加一个 components 选项，里面加上一个 AppLogo。然后在组件的模板里面，用一下 AppLogo 这个组件。

回到浏览器预览一下，你会发现页面上会显示应用的标志，使用这个标志组件的时候可以设置一下它的 size 属性，设置成 64， 这样这个标志的宽度还有高度就是 64 像素。

这里还可以使用 color 设置一下这个组件的颜色，用一种紫色。 再回到浏览器预览一下，现在这个标志组件的颜色就是一种紫色。