Vue 饿了么 创建骨架

上篇的数据完成后 现在开发html页面

第一步

查看设计稿

Vue 饿了么 创建骨架

然后在创建目录

Vue 饿了么 创建骨架

这样创建一下目录结构

第二步 创建header.vue 

在APP.vue中 import header from "./components/header/header.vue";

然后调用header

components:{
'v-header':header
};

在template中使用<v-header></v-header>

Vue 饿了么 创建骨架

这样头部就搭建完成

第三步 搭建中间的 

Vue 饿了么 创建骨架


在这里我使用的是mui框架

Vue 饿了么 创建骨架

这样中间部分就可以启动路由 访问了 来看看效果吧

Vue 饿了么 创建骨架

这样 中间部分就已经完成了  来看看整体APP.vue HTMl代码

Vue 饿了么 创建骨架