首页 / VUE / vue高仿饿了么学习笔记（二）—— 组件拆分

vue高仿饿了么学习笔记（二）—— 组件拆分

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了vue高仿饿了么学习笔记（二）—— 组件拆分，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2250字，纯文字阅读大概需要4分钟。

内容图文

要模仿的界面如下：

技术分享图片

 

 一、组件拆分

1）重设css

在static中新增css/reset.css，样式参考：https://github.com/lwl0812/vue-sell/tree/master/static/css

在index.html中引入reset.css

技术分享图片

2）设置移动端的viewport

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">

3）重写 App.vue

<template>
  <div id="app">
    <div class="header">
      I am header.
    </div>
    <header></header>
    <div class="tab">
      I am tab.
    </div>
    <div class="content">
      I am content.
    </div>
  </div>
</template>

<script>
　　export defaut {};
</script>

<style>

</style>

4）增加 header 组件

在 components 下新建 header/header.vue，内容如下：

<template>
  <div class="header">
    我是header
  </div>
</template>

<script>
  export default {};
</script>

<style lang="stylus" rel="stylesheet/stylus">

</style>

编译stylus时会报错，可以安装下stylus，然后重启

npm install stylus --save-dev
npm run dev

5）修改 App.vue

引用header组件

// App.vue
<script>
  import header from ‘./components/header/header‘;

  export default {
    components: {
      ‘v-header‘: header // 此处header与原生html名字相同，所以需要重命名，按es6的语法写的话，只要写header即可，具体参看es6语法
    }
  };
</script>

使用header组件

            //
             App.vue
<template>
  <div id="app">
    <v-header></v-header> <!--使用header组件-->
    <div class="tab">
      I am tab.
    </div>
    <div class="content">
      I am content.
    </div>
  </div>
</template>

 此时，界面如下：

技术分享图片

6）增加tab内容

            //
             App.vue
<template>
  <div id="app">
    <v-header></v-header>
    <div class="tab"> <!--tab 内容-->
      <div class="tab-item">商品</div>
      <div class="tab-item">评论</div>
      <div class="tab-item">商家</div>
    </div>
    <div class="content">
      I am content.
    </div>
  </div>
</template>

7）为tab增加样式

            //
             App.vue
<style lang="stylus" rel="stylesheet/stylus">
  .tab
    display: flex
    width: 100%
    height: 40px
    line-height: 40px
    .tab-item
      flex: 1
      text-align: center
</style>

样式使用了flex布局，可参考阮一峰老师的语法篇和实例篇：

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

此时，界面如下：

技术分享图片

 

这一节完成，下一节学习vue-router

原文：https://www.cnblogs.com/lwl0812/p/9533041.html

内容总结

以上是互联网集市为您收集整理的vue高仿饿了么学习笔记（二）—— 组件拆分全部内容，希望文章能够帮你解决vue高仿饿了么学习笔记（二）—— 组件拆分所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/1067691.html

来源：【匿名】