[第二课] 实战饿了么app—vue2.0

第一步:打开App.vue,把没有用的代码都清空,如图:

[第二课] 实战饿了么app—vue2.0_第1张图片

第二步:删除components/HelloWorld.vue

第三步:开始写结构了

在App.vue中写入代码:

[第二课] 实战饿了么app—vue2.0_第2张图片

第四步:建立header.vue,我们把header抽出弄一个组件:

[第二课] 实战饿了么app—vue2.0_第3张图片

第五步:在App.vue导入组件

[第二课] 实战饿了么app—vue2.0_第4张图片

第六步:header是关键字,会报错,所以需要修改header这个名字

[Vue warn]: Do not use built-in or reserved HTML elements as component id: header

[第二课] 实战饿了么app—vue2.0_第5张图片

这样头部的代码就显示出来了。

第七步:完善结构代码

[第二课] 实战饿了么app—vue2.0_第6张图片

第八步:完善样式

[第二课] 实战饿了么app—vue2.0_第7张图片

你可能感兴趣的:([第二课] 实战饿了么app—vue2.0)