路由和组件

layout.png

任务目标: 配置首页路由和组件的嵌套关系

1）根组件下定义一级路由组件出口

src/App.vue

  1. <template>
  2.   <!-- 一级路由 -->
  3.   <router-view></router-view>
  4. </template>

2）定义一级路由布局容器组件

src/views/Layout/index.vue

  1. <template>
  2.   <nav>顶部通栏</nav>
  3.   <header>头部</header>
  4.   <main>
  5.     <!-- 二级路由出口 -->
  6.     <router-view></router-view>
  7.   </main>
  8.   <footer>底部</footer>
  9. </template>
  11. <script>
  12. export default {
  13.   name: 'xtx-layout'
  14. }
  15. </script>
  17. <style scoped lang='less'></style>

3）二级路由首页组件

src/views/Home/index.vue

  1. <template>
  2.   <div class='xtx-home-page'>
  3.     首页
  4.   </div>
  5. </template>
  7. <script>
  8. export default {
  9.   name: 'xtx-home-page'
  10. }
  11. </script>
  13. <style scoped lang='less'></style>

4）配置路由规则

src/router/index.js

  1. import { createRouter, createWebHashHistory } from 'vue-router'
  2. const Layout = () => import('@/views/Layout')
  3. const Home = () => import('@/views/Home/index')
  4. const routes = [
  5.   {
  6.     path: '/',
  7.     component: Layout,
  8.     children: [
  9.      { path: '/', component: Home }
  10.     ]
  11.   }
  12. ]
  13. const router = createRouter({
  14.   history: createWebHashHistory(),
  15.   routes
  16. })
  17. export default router

Less的自动化导入

任务目标: 让业务组件自动加入公共样式（全局字体色值）

我们开发的应用有些样式是公用的，比如我们常见的配色色值，为了做到统一修改的目的往往需要定义成less变量，很多的业务组件都需要使用这些变量，如果我们每一个业务组件都手动引入然后使用的话，开发量巨大，所以为了解决这个问题，我们采取自动导入的方式，方便我们业务组件使用全局less变量

手动引入方案

1）准备样式变量文件

src/styles/variables.less

  1. // 主题
  2. @xtxColor:#27BA9B;
  3. // 辅助
  4. @helpColor:#E26237;
  5. // 成功
  6. @sucColor:#1DC779;
  7. // 警告
  8. @warnColor:#FFB302;
  9. // 价格
  10. @priceColor:#CF4444;

2）手动引入使用其中的变量

在app.vue文件中进行简单测试

  1. <template>
  2.   <!-- 一级路由出口 -->
  3.   <router-view />
  4.   <div class="test">我是测试文字</div>
  5. </template>
  7. <style lang="less" scoped>
  8. // 引入我们定义了less变化的文件
  9. // ~线不能丢
  10. @import "~@/styles/variables.less";
  11. .test {
  12.   color: @xtxColor;
  13. }
  14. </style>

自动引入方案

解决方案：使用vue-cli的style-resoures-loader插件来完成自动注入到每个vue组件中style标签中

1）在当前项目下执行一下命令vue add style-resources-loader，添加一个vue-cli的插件
01.png
2） 安装完毕后会在vue.config.js中自动添加配置，如下：

  1. module.exports = {
  2.   pluginOptions: {
  3.     'style-resources-loader': {
  4.       preProcessor: 'less',
  5.       patterns: []
  6.     }
  7.   }
  8. }

3）把需要注入的文件配置一下后，重启服务即可

  1. const path = require('path')
  2. module.exports = {
  3.   pluginOptions: {
  4.     'style-resources-loader': {
  5.       preProcessor: 'less',
  6.       patterns: [
  7.         // 配置哪些文件需要自动导入
  8.         path.join(__dirname, './src/styles/variables.less')
  9.       ]
  10.     }
  11.   }
  12. }

测试一下，我们不再需要在组件中手动import引入色值文件了，直接使用就可以了，nice~

重置样式与公用样式

任务目标: 让业务组件加入公共样式

1）重置样式

执行 npm i normalize.css 安装重置样式的包，然后在 main.js 导入 normalize.css 即可

  1. import { createApp } from 'vue'
  2. import App from './App.vue'
  3. import router from './router'
  4. import store from './store'
  5. +import 'normalize.css'
  6. createApp(App).use(store).use(router).mount('#app')

2） 公用样式

新建文件 src/styles/common.less 在该文件写入常用的样式，然后在 main.js 导入即可

src/styles/common.less

  1. // 重置样式
  2. * {
  3.   box-sizing: border-box;
  4.  }
  6.  html {
  7.    height: 100%;
  8.    font-size: 14px;
  9.  }
  10.  body {
  11.    height: 100%;
  12.    color: #333;
  13.    min-width: 1240px;
  14.    font: 1em/1.4 'Microsoft Yahei', 'PingFang SC', 'Avenir', 'Segoe UI', 'Hiragino Sans GB', 'STHeiti', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif
  15.  }
  17.  ul,
  18.  h1,
  19.  h3,
  20.  h4,
  21.  p,
  22.  dl,
  23.  dd {
  24.    padding: 0;
  25.    margin: 0;
  26.  }
  27.  a {
  28.    text-decoration: none;
  29.    color: #333;
  30.    outline: none;
  31.  }
  32.  i {
  33.    font-style: normal;
  34.  }
  35.  input[type="text"],
  36.  input[type="search"],
  37.  input[type="password"], 
  38.  input[type="checkbox"]{
  39.    padding: 0;
  40.    outline: none;
  41.    border: none;
  42.    -webkit-appearance: none;
  43.    &::placeholder{
  44.      color: #ccc;
  45.    }
  46.  }
  47.  img {
  48.    max-width: 100%;
  49.    max-height: 100%;
  50.    vertical-align: middle;
  51.    background: #ebebeb url(../assets/images/200.png) no-repeat center / contain;
  52.  }
  53.  ul {
  54.    list-style: none;
  55.  }
  56.  #app {
  57.    background: #f5f5f5;
  58.    user-select: none;
  59.  }
  61.  .container {
  62.    width: 1240px;
  63.    margin: 0 auto;
  64.    position: relative;
  65.  }
  66.  .ellipsis {
  67.    white-space: nowrap;
  68.    text-overflow: ellipsis;
  69.    overflow: hidden;
  70.  }
  72.  .ellipsis-2 {
  73.    word-break: break-all;
  74.    text-overflow: ellipsis;
  75.    display: -webkit-box;
  76.    -webkit-box-orient: vertical;
  77.    -webkit-line-clamp: 2;
  78.    overflow: hidden;
  79.  }
  81.  .fl {
  82.    float: left;
  83.  }
  85.  .fr {
  86.    float: right;
  87.  }
  89.  .clearfix:after {
  90.    content: ".";
  91.    display: block;
  92.    visibility: hidden;
  93.    height: 0;
  94.    line-height: 0;
  95.    clear: both;
  96.  }

src/main.js

  1. import { createApp } from 'vue'
  2. import App from './App.vue'
  3. import router from './router'
  4. import store from './store'
  6. import 'normalize.css'
  7. +import '@/styles/common.less'
  9. createApp(App).use(store).use(router).mount('#app')

Layout组件布局

顶部通栏布局

任务目标: 完成Layou组件的顶部通栏组件布局

02.png

1）在 public/index.html 引入字体图标文件

  1. <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  2. <link rel="stylesheet" href="//at.alicdn.com/t/font_2143783_iq6z4ey5vu.css">
  3. <title><%= htmlWebpackPlugin.options.title %></title>

2）然后，新建头部导航组件

Layout/components/topnav.vue

  1. <template>
  2.   <nav class="app-topnav">
  3.     <div class="container">
  4.       <ul>
  5.         <li><a href="javascript:;"><i class="iconfont icon-user"></i>周杰伦</a></li>
  6.         <li><a href="javascript:;">退出登录</a></li>
  7.         <li><a href="javascript:;">请先登录</a></li>
  8.         <li><a href="javascript:;">免费注册</a></li>
  9.         <li><a href="javascript:;">我的订单</a></li>
  10.         <li><a href="javascript:;">会员中心</a></li>
  11.         <li><a href="javascript:;">帮助中心</a></li>
  12.         <li><a href="javascript:;">关于我们</a></li>
  13.         <li><a href="javascript:;"><i class="iconfont icon-phone"></i>手机版</a></li>
  14.       </ul>
  15.     </div>
  16.   </nav>
  17. </template>
  18. <script>
  19. export default {
  20.   name: 'AppTopnav'
  21. }
  22. </script>
  23. <style scoped lang="less">
  24. .app-topnav {
  25.   background: #333;
  26.   ul {
  27.     display: flex;
  28.     height: 53px;
  29.     justify-content: flex-end;
  30.     align-items: center;
  31.     li {
  32.       a {
  33.         padding: 0 15px;
  34.         color: #cdcdcd;
  35.         line-height: 1;
  36.         display: inline-block;
  37.         i {
  38.           font-size: 14px;
  39.           margin-right: 2px;
  40.         }
  41.         &:hover {
  42.           color: @xtxColor;
  43.         }
  44.       }
  45.       ~ li {
  46.         a {
  47.           border-left: 2px solid #666;
  48.         }
  49.       }
  50.     }
  51.   }
  52. }
  53. </style>

3）在 src/views/Layout.vue 中导入使用

  1. <template>
  2.   <!-- 顶部通栏 -->
  3.   <AppTopnav/>
  4.   <header>头部</header>
  5.   <main>
  6.     <!-- 二级路由 -->
  7.     <router-view></router-view>
  8.   </main>
  9.   <footer>底部</footer>
  10. </template>
  12. <script>
  13. import TopNav from './components/top-nav'
  14. export default {
  15.   name: 'XtxLayout',
  16.   components: { TopNav}
  17. }
  18. </script>

4）根据当前的登录状态显示 用户名和退出登录

login-status.png

  1. <ul>
  2.     <template v-if="$store.user.state.token">
  3.       <li><a href="javascript:;"><i class="iconfont icon-user"></i>周杰伦</a></li>
  4.       <li><a href="javascript:;">退出登录</a></li>
  5.     </template>
  6.     <template v-else>
  7.       <li><a href="javascript:;">请先登录</a></li>
  8.       <li><a href="javascript:;">免费注册</a></li>
  9.     </template>
  10.     <li><a href="javascript:;">我的订单</a></li>
  11.     <li><a href="javascript:;">会员中心</a></li>
  12.     <li><a href="javascript:;">帮助中心</a></li>
  13.     <li><a href="javascript:;">关于我们</a></li>
  14.     <li><a href="javascript:;"><i class="iconfont icon-phone"></i>手机版</a></li>
  15. </ul>

头部布局

任务目标: 完成Layout组件的头部布局

03.png

1）新建header头部组件

Layout/components/header.vue

  1. <template>
  2.   <header class='app-header'>
  3.     <div class="container">
  4.       <h1 class="logo"><RouterLink to="/">小兔鲜</RouterLink></h1>
  5.       <ul class="navs">
  6.         <li class="home"><RouterLink to="/">首页</RouterLink></li>
  7.         <li><a href="#">美食</a></li>
  8.         <li><a href="#">餐厨</a></li>
  9.         <li><a href="#">艺术</a></li>
  10.         <li><a href="#">电器</a></li>
  11.         <li><a href="#">居家</a></li>
  12.         <li><a href="#">洗护</a></li>
  13.         <li><a href="#">孕婴</a></li>
  14.         <li><a href="#">服装</a></li>
  15.         <li><a href="#">杂货</a></li>
  16.       </ul>
  17.       <div class="search">
  18.         <i class="iconfont icon-search"></i>
  19.         <input type="text" placeholder="搜一搜">
  20.       </div>
  21.       <div class="cart">
  22.         <a class="curr" href="#">
  23.           <i class="iconfont icon-cart"></i><em>2</em>
  24.         </a>
  25.       </div>
  26.     </div>
  27.   </header>
  28. </template>
  30. <script>
  31. export default {
  32.   name: 'AppHeader'
  33. }
  34. </script>
  36. <style scoped lang='less'>
  37. .app-header {
  38.   background: #fff;
  39.   .container {
  40.     display: flex;
  41.     align-items: center;
  42.   }
  43.   .logo {
  44.     width: 200px;
  45.     a {
  46.       display: block;
  47.       height: 132px;
  48.       width: 100%;
  49.       text-indent: -9999px;
  50.       background: url('~@/assets/images/logo.png') no-repeat center 18px / contain;
  51.     }
  52.   }
  53.   .navs {
  54.     width: 820px;
  55.     display: flex;
  56.     justify-content: space-around;
  57.     padding-left: 40px;
  58.     li {
  59.       margin-right: 40px;
  60.       width: 38px;
  61.       text-align: center;
  62.       a {
  63.         font-size: 16px;
  64.         line-height: 32px;
  65.         height: 32px;
  66.         display: inline-block;
  67.       }
  68.       &:hover {
  69.         a {
  70.           color: @xtxColor;
  71.           border-bottom: 1px solid @xtxColor;
  72.         }
  73.       }
  74.     }
  75.   }
  76.   .search {
  77.     width: 170px;
  78.     height: 32px;
  79.     position: relative;
  80.     border-bottom: 1px solid #e7e7e7;
  81.     line-height: 32px;
  82.     .icon-search {
  83.       font-size: 18px;
  84.       margin-left: 5px;
  85.     }
  86.     input {
  87.       width: 140px;
  88.       padding-left: 5px;
  89.       color: #666;
  90.     }
  91.   }
  92.   .cart {
  93.     width: 50px;
  94.     .curr {
  95.       height: 32px;
  96.       line-height: 32px;
  97.       text-align: center;
  98.       position: relative;
  99.       display: block;
  100.       .icon-cart{
  101.         font-size: 22px;
  102.       }
  103.       em {
  104.         font-style: normal;
  105.         position: absolute;
  106.         right: 0;
  107.         top: 0;
  108.         padding: 1px 6px;
  109.         line-height: 1;
  110.         background: @helpColor;
  111.         color: #fff;
  112.         font-size: 12px;
  113.         border-radius: 10px;
  114.         font-family: Arial;
  115.       }
  116.     }
  117.   }
  118. }
  119. </style>

2）在 src/views/Layout.vue 中导入使用

  1. <template>
  2.   <!-- 顶部通栏 -->
  3.   <AppTopnav/>
  4.   <!-- 头部组件 -->
  5.   <AppHeader/>
  6.   <main>
  7.     <!-- 二级路由 -->
  8.     <router-view></router-view>
  9.   </main>
  10.   <footer>底部</footer>
  11. </template>
  13. <script>
  14. import TopNav from './components/top-nav'
  15. import Header from './components/header'
  16. export default {
  17.   name: 'XtxLayout',
  18.    components: {
  19.     TopNav,
  20.     Header
  21.   }
  22. }
  23. </script>

抽离分类导航组件

任务目标: 提取头部分类导航组件，提供给头部
nav.png

  1. 提取头部导航区域为一个组件

src/components/header-nav.vue

  1. <template>
  2.   <ul class="app-header-nav">
  3.     <li class="home"><RouterLink to="/">首页</RouterLink></li>
  4.     <li><a href="#">美食</a></li>
  5.     <li><a href="#">餐厨</a></li>
  6.     <li><a href="#">艺术</a></li>
  7.     <li><a href="#">电器</a></li>
  8.     <li><a href="#">居家</a></li>
  9.     <li><a href="#">洗护</a></li>
  10.     <li><a href="#">孕婴</a></li>
  11.     <li><a href="#">服装</a></li>
  12.     <li><a href="#">杂货</a></li>
  13.   </ul>
  14. </template>
  16. <script>
  17. export default {
  18.   name: 'AppHeaderNav'
  19. }
  20. </script>
  22. <style scoped lang='less'>
  23. .app-header-nav {
  24.   width: 820px;
  25.   display: flex;
  26.   padding-left: 40px;
  27.   position: relative;
  28.   z-index: 998;
  29.   li {
  30.     margin-right: 40px;
  31.     width: 38px;
  32.     text-align: center;
  33.     a {
  34.       font-size: 16px;
  35.       line-height: 32px;
  36.       height: 32px;
  37.       display: inline-block;
  38.     }
  39.     &:hover {
  40.       a {
  41.         color: @xtxColor;
  42.         border-bottom: 1px solid @xtxColor;
  43.       }
  44.     }
  45.   }
  46. }
  47. </style>

2）在 Layout/components/header.vue 中使用组件，注意，删除结构和样式

  1. <template>
  2.   <header class='app-header'>
  3.     <div class="container">
  4.       <h1 class="logo"><RouterLink to="/">小兔鲜</RouterLink></h1>
  5.       <!-- 头部导航区域 -->
  6.       <AppHeaderNav />
  7.       <div class="search">
  8.         <i class="iconfont icon-search"></i>
  9.         <input type="text" placeholder="搜一搜">
  10.       </div>
  11.       <div class="cart">
  12.         <a class="curr" href="#">
  13.           <i class="iconfont icon-cart"></i><em>2</em>
  14.         </a>
  15.       </div>
  16.     </div>
  17.   </header>
  18. </template>
  20. <script>
  21. import HeaderNav from './header-nav'
  22. export default {
  23.   name: 'AppHeader',
  24.   components: {
  25.     HeaderNav
  26.   }
  27. }
  28. </script>

3）完善子级分类布局 src/Layout/components/header-nav.vue

一级分类鼠标hover的时候，会展示二级分类列表

  1. <template>
  2.   <ul class="app-header-nav">
  3.     <li class="home"><RouterLink to="/">首页</RouterLink></li>
  4.     <li>
  5.       <a href="#">美食</a>
  6.       <div class="layer">
  7.         <ul>
  8.           <li v-for="i in 10" :key="i">
  9.             <a href="#">
  10.               <img src="http://zhoushugang.gitee.io/erabbit-client-pc-static/uploads/img/category%20(4).png" alt="">
  11.               <p>果干</p>
  12.             </a>
  13.           </li>
  14.         </ul>
  15.       </div>
  16.     </li>
  17.     <li><a href="#">餐厨</a></li>
  18.     <li><a href="#">艺术</a></li>
  19.     <li><a href="#">电器</a></li>
  20.     <li><a href="#">居家</a></li>
  21.     <li><a href="#">洗护</a></li>
  22.     <li><a href="#">孕婴</a></li>
  23.     <li><a href="#">服装</a></li>
  24.     <li><a href="#">杂货</a></li>
  25.   </ul>
  26. </template>
  28. <script>
  29. export default {
  30.   name: 'AppHeaderNav'
  31. }
  32. </script>
  34. <style scoped lang='less'>
  35. .app-header-nav {
  36.   width: 820px;
  37.   display: flex;
  38.   padding-left: 40px;
  39.   position: relative;
  40.   z-index: 998;
  41.   li {
  42.     margin-right: 40px;
  43.     width: 38px;
  44.     text-align: center;
  45.     a {
  46.       font-size: 16px;
  47.       line-height: 32px;
  48.       height: 32px;
  49.       display: inline-block;
  50.     }
  51.     &:hover {
  52.       a {
  53.         color: @xtxColor;
  54.         border-bottom: 1px solid @xtxColor;
  55.       }
  56.     }
  57.     // 初始样式 不显示
  58.     .layer {
  59.       width: 1240px;
  60.       background-color: #fff;
  61.       position: absolute;
  62.       left: -200px;
  63.       top: 56px;
  64.       height: 0;
  65.       overflow: hidden;
  66.       opacity: 0;
  67.       box-shadow: 0 0 5px #ccc;
  68.       transition: all 0.2s 0.1s;
  69.       ul {
  70.         display: flex;
  71.         flex-wrap: wrap;
  72.         padding: 0 70px;
  73.         align-items: center;
  74.         height: 124px;
  75.         li {
  76.           width: 110px;
  77.           text-align: center;
  78.           img {
  79.             width: 60px;
  80.             height: 60px;
  81.           }
  82.           p {
  83.             padding-top: 10px;
  84.           }
  85.           &:hover {
  86.             p {
  87.               color: @xtxColor;
  88.             }
  89.           }
  90.         }
  91.       }
  92.     }
  93.     // hover之后显示出来
  94.     &:hover {
  95.          // 加上 >
  96.       > a {
  97.         color: @xtxColor;
  98.         border-bottom: 1px solid @xtxColor;
  99.       }
  100.       > .layer {
  101.         height: 124px;
  102.         opacity: 1;
  103.       }
  104.     }
  105.   }
  106. }
  107. </style>

底部布局

任务目标: 完成Layou组件的顶部footer组件布局

04.png

1）新建底部组件

Layout/components/footer.vue

  1. <template>
  2.   <footer class="app_footer">
  3.     <!-- 联系我们 -->
  4.     <div class="contact">
  5.       <div class="container">
  6.         <dl>
  7.           <dt>客户服务</dt>
  8.           <dd><i class="iconfont icon-kefu"></i> 在线客服</dd>
  9.           <dd><i class="iconfont icon-question"></i> 问题反馈</dd>
  10.         </dl>
  11.         <dl>
  12.           <dt>关注我们</dt>
  13.           <dd><i class="iconfont icon-weixin"></i> 公众号</dd>
  14.           <dd><i class="iconfont icon-weibo"></i> 微博</dd>
  15.         </dl>
  16.         <dl>
  17.           <dt>下载APP</dt>
  18.           <dd class="qrcode"><img src="@/assets/images/qrcode.jpg" /></dd>
  19.           <dd class="download">
  20.             <span>扫描二维码</span>
  21.             <span>立马下载APP</span>
  22.             <a href="javascript:;">下载页面</a>
  23.           </dd>
  24.         </dl>
  25.         <dl>
  26.           <dt>服务热线</dt>
  27.           <dd class="hotline">400-0000-000 <small>周一至周日 8:00-18:00</small></dd>
  28.         </dl>
  29.       </div>
  30.     </div>
  31.     <!-- 其它 -->
  32.     <div class="extra">
  33.       <div class="container">
  34.         <div class="slogan">
  35.           <a href="javascript:;">
  36.             <i class="iconfont icon-footer01"></i>
  37.             <span>价格亲民</span>
  38.           </a>
  39.           <a href="javascript:;">
  40.             <i class="iconfont icon-footer02"></i>
  41.             <span>物流快捷</span>
  42.           </a>
  43.           <a href="javascript:;">
  44.             <i class="iconfont icon-footer03"></i>
  45.             <span>品质新鲜</span>
  46.           </a>
  47.         </div>
  48.         <!-- 版权信息 -->
  49.         <div class="copyright">
  50.           <p>
  51.             <a href="javascript:;">关于我们</a>
  52.             <a href="javascript:;">帮助中心</a>
  53.             <a href="javascript:;">售后服务</a>
  54.             <a href="javascript:;">配送与验收</a>
  55.             <a href="javascript:;">商务合作</a>
  56.             <a href="javascript:;">搜索推荐</a>
  57.             <a href="javascript:;">友情链接</a>
  58.           </p>
  59.           <p>CopyRight © 小兔鲜儿</p>
  60.         </div>
  61.       </div>
  62.     </div>
  63.   </footer>
  64. </template>
  66. <script>
  67. export default {
  68.   name: 'AppFooter'
  69. }
  70. </script>
  72. <style scoped lang='less'>
  73. .app_footer {
  74.   overflow: hidden;
  75.   background-color: #f5f5f5;
  76.   padding-top: 20px;
  77.   .contact {
  78.     background: #fff;
  79.     .container {
  80.       padding: 60px 0 40px 25px;
  81.       display: flex;
  82.     }
  83.     dl {
  84.       height: 190px;
  85.       text-align: center;
  86.       padding: 0 72px;
  87.       border-right: 1px solid #f2f2f2;
  88.       color: #999;
  89.       &:first-child {
  90.         padding-left: 0;
  91.       }
  92.       &:last-child {
  93.         border-right: none;
  94.         padding-right: 0;
  95.       }
  96.     }
  97.     dt {
  98.       line-height: 1;
  99.       font-size: 18px;
  100.     }
  101.     dd {
  102.       margin: 36px 12px 0 0;
  103.       float: left;
  104.       width: 92px;
  105.       height: 92px;
  106.       padding-top: 10px;
  107.       border: 1px solid #ededed;
  108.       .iconfont {
  109.         font-size: 36px;
  110.         display: block;
  111.         color: #666;
  112.       }
  113.       &:hover {
  114.         .iconfont {
  115.           color: @xtxColor;
  116.         }
  117.       }
  118.       &:last-child {
  119.         margin-right: 0;
  120.       }
  121.     }
  122.     .qrcode {
  123.       width: 92px;
  124.       height: 92px;
  125.       padding: 7px;
  126.       border: 1px solid #ededed;
  127.     }
  128.     .download {
  129.       padding-top: 5px;
  130.       font-size: 14px;
  131.       width: auto;
  132.       height: auto;
  133.       border: none;
  134.       span {
  135.         display: block;
  136.       }
  137.       a {
  138.         display: block;
  139.         line-height: 1;
  140.         padding: 10px 25px;
  141.         margin-top: 5px;
  142.         color: #fff;
  143.         border-radius: 2px;
  144.         background-color: @xtxColor;
  145.       }
  146.     }
  147.     .hotline {
  148.       padding-top: 20px;
  149.       font-size: 22px;
  150.       color: #666;
  151.       width: auto;
  152.       height: auto;
  153.       border: none;
  154.       small {
  155.         display: block;
  156.         font-size: 15px;
  157.         color: #999;
  158.       }
  159.     }
  160.   }
  161.   .extra {
  162.     background-color: #333;
  163.   }
  164.   .slogan {
  165.     height: 178px;
  166.     line-height: 58px;
  167.     padding: 60px 100px;
  168.     border-bottom: 1px solid #434343;
  169.     display: flex;
  170.     justify-content: space-between;
  171.     a {
  172.       height: 58px;
  173.       line-height: 58px;
  174.       color: #fff;
  175.       font-size: 28px;
  176.       i {
  177.         font-size: 50px;
  178.         vertical-align: middle;
  179.         margin-right: 10px;
  180.         font-weight: 100;
  181.       }
  182.       span {
  183.         vertical-align: middle;
  184.         text-shadow: 0 0 1px #333;
  185.       }
  186.     }
  187.   }
  188.   .copyright {
  189.     height: 170px;
  190.     padding-top: 40px;
  191.     text-align: center;
  192.     color: #999;
  193.     font-size: 15px;
  194.     p {
  195.       line-height: 1;
  196.       margin-bottom: 20px;
  197.     }
  198.     a {
  199.       color: #999;
  200.       line-height: 1;
  201.       padding: 0 10px;
  202.       border-right: 1px solid #999;
  203.       &:last-child {
  204.         border-right: none;
  205.       }
  206.     }
  207.   }
  208. }
  209. </style>

2）在 src/views/Layout.vue 中导入使用

  1. <template>
  2.  <!-- 顶部通栏组件 -->
  3.   <TopNav />
  4.   <!-- header区域 -->
  5.   <Header />
  6.   <main>
  7.     <!-- 二级路由出口 -->
  8.     <router-view></router-view>
  9.   </main>
  10.   <!-- 底部footer -->
  11.   <Footer/>
  12. </template>
  14. <script>
  15. import AppFooter from './components/app-footer'
  16. export default {
  17.   name: 'XtxLayout',
  18.   components: { AppFooter }
  19. }
  20. </script>

重点总结

组件需要抽离的场景

  1. 如果组件功能独立 完全可以独立维护 抽离成一个组件 （可维护性角度）
  2. 组件如果是需要被很多组件复用的 抽离成一个组件 （复用性角度）

组件的命名和使用

  1. 从组件的命名上就体现出组件之间的嵌套关系
  2. 组件在模板区域使用的时候 遵守风格 TopNav top-nav

组件就近维护原则

  1. 在大模块文件夹的内部新建一个components文件夹，就近维护当前大模块下的小模块

接口数据渲染导航

任务目标: 使用真实接口完成一级分类渲染以及二级分类渲染

使用vuex管理分类数据

1）定义API函数 src/api/home.js

  1. // 定义首页需要的接口函数
  2. import request from '@/utils/request'
  3. /**
  4.  * @description: 获取导航数据
  5.  * @param {*}
  6.  * @return {*}
  7.  */
  8. export const findHeadCategory = () => {
  9.   return request('/home/category/head', 'get')
  10. }

2）定义一个vuex的category模块，来存储分类数据，提供修改和获取的函数

src/store/modules/category.js

  1. // 分类信息模块
  2. import { findHeadCategory } from '@/api/home.js'
  3. export default {
  4.   namespaced: true,
  5.   state: () => {
  6.     return {
  7.       title: '分类模块',
  8.       // 分类列表数据
  9.       list: []
  10.     }
  11.   },
  12.   // 加载数据成功后需要修改list所以需要mutations函数
  13.   mutations: {
  14.     setList (state, payload) {
  15.       state.list = payload
  16.     }
  17.   },
  18.   // 需要向后台加载数据，所以需要actions函数获取数据
  19.   actions: {
  20.     async setList (context) {
  21.       // 1.调用接口方法
  22.       const ret = await findHeadCategory()
  23.       // 2.成功获取到数据之后触发setList mutation函数
  24.       context.commit('setList', ret.result)
  25.     }
  26.   },
  27.   getters: {}
  28. }
  29. import { findHeadCategory } from '@/api/home'
  30. export default {
  31.   namespaced: true,
  32.   state: () => {
  33.     return {
  34.       list: [] // 分类列表
  35.     }
  36.   },
  37.   // 加载数据成功后需要修改list所以需要mutations函数
  38.   mutations: {
  39.     setCategory (state, headCategory) {
  40.       state.list = headCategory
  41.     }
  42.   },
  43.   // 需要向后台加载数据，所以需要actions函数获取数据
  44.   actions: {
  45.     async asyncSetList (ctx) {
  46.       // 1.调用接口方法
  47.       // 2.成功获取到数据之后触发setList mutation函数
  48.       const res = await findHeadCategory()
  49.       console.log(res.data.result)
  50.       ctx.commit('setList', res.data.result)
  51.     }
  52.   }
  53. }

3）把category模块挂载到vuex的实例上

src/store/index.js

  1. import cate from './modules/cate'
  1. modules: {
  2.     // 分模块
  3.     user,
  4.     cart,
  5.     cate
  6. }

触发action函数并渲染数据

src/compotents/app-header-nav.vue

  1. <template>
  2.    <ul class="app-header-nav">
  3.     <li class="home"><RouterLink to="/">首页</RouterLink></li>
  4.     <li v-for="item in list" :key="item.id">
  5.       <RouterLink to="/">{{item.name}}</RouterLink>
  6.       <!--为移入打开弹框做准备-->
  7.       <div class="layer">
  8.         <ul>
  9.           <li v-for="sub in item.children" :key="sub.id">
  10.             <RouterLink to="/">
  11.               <img :src="sub.picture" alt="">
  12.               <p>{{sub.name}}</p>
  13.             </RouterLink>
  14.           </li>
  15.         </ul>
  16.       </div>
  17.     </li>
  18.   </ul>
  19. </template>
  21. <script>
  22. import { mapState } from 'vuex'
  23. export default {
  24.   name: 'AppHeaderNav',
  25.   computed: {
  26.     ...mapState('category', ['list'])
  27.   },
  28.   mounted () {
  29.     this.$store.dispatch('category/asyncSetList')
  30.   }
  31. }
  32. </script>
  35. <template>
  36.   <ul class="app-header-nav">
  37.     <li class="home"><RouterLink to="/">首页</RouterLink></li>
  38.     <!-- 使用v-for + vuex中的list数据 -->
  39.     <li v-for="item in $store.state.category.list" :key="item.id">
  40.       <a href="#">{{item.name}}</a>
  41.       <!-- 放置鼠标移入显示的二级弹框 -->
  42.       <div class="layer">
  43.         <ul>
  44.           <li v-for="i in item.children" :key="i.id">
  45.             <a href="#">
  46.               <img :src="i.picture" alt="">
  47.               <p>{{i.name}}</p>
  48.             </a>
  49.           </li>
  50.         </ul>
  51.       </div>
  52.     </li>
  53.   </ul>
  54. </template>
  56. <script>
  57. // 因为需要在这个组件的模板区域使用vuex的分类数据
  58. // 有必要在这个组件中触发action函数 从而获取接口数据
  59. import { onMounted } from 'vue'
  60. // 1.从vuex中导入一个函数 useStore 返回值就是一个store实例对象
  61. import { useStore } from 'vuex'
  62. export default {
  63.   name: 'AppHeaderNav',
  64.   setup () {
  65.     // onMounted
  66.     const store = useStore() // this.$store === store
  67.     onMounted(() => {
  68.       // 触发action函数的执行
  69.       // 如何在setup函数中拿到store实例从而调用它身上的方法
  70.       store.dispatch('category/asyncSetList')
  71.     })
  72.   }
  73. }
  74. </script>

重点总结

基于vuex管理数据几个配置项之间的关系

  1. 1. state中定义我们需要管理的数据  响应式的  由业务决定当前到底应该定义成什么类型
  2. 2. mutation中定义修改数据的方法  同步函数  只需要完成实参注入对于state中的数据赋值即可
  3. 3. 如果有异步 我们就封装一个action函数 1. 发送请求  2.调用mutation函数  (支持异步调用的mutation)
  4. 4. 在业务组件里找到一个合适的时机调用action函数
  6. 测试:
  7.   1. dev-tools  检测当前的action函数和mutation是否调用成功  传递的参数是否符合预期
  8.   2. Logger插件  检测log区域查看当前的action函数和mutation是否调用成功  传递的参数是否符合预期

在setup函数中如何获取store实例

  1. import { useStore } from 'vuex'
  2. setup(){
  3.   const store = useStore()  // this.$store === store 方法的执行必须写到setup函数中 不要写到内部函数中
  4. }

吸顶头部交互实现

电商网站的首页内容会比较多，会有很多频，为了能让用户在滚动浏览内容的过程中都能够快速的切换到其它模块，需要导航一直可见，所以需要一个吸顶导航的效果

选项API实现

任务目标: 使用选项式api完成头部组件吸顶效果的实现

交互要求

  1. 滚动距离大于等于78个px的时候，组件固定在视口顶部跟随页面移动
  2. 滚动距离小于78个px的时候，组件消失

实现思路

  1. 准备一个吸顶组件，准备一个类名，控制样式让其固定在顶部
  2. 监听页面滚动，判断滚动距离，距离大于78px添加类名

代码落地

1）新建吸顶导航组件

src/Layout/components/header-sticky.vue

  1. <template>
  2.   <div class="app-header-sticky" :class="{ show: top >= 78 }">
  3.     <div class="container">
  4.       <RouterLink class="logo" to="/" />
  5.       <!-- 分类列表 -->
  6.       <TopHeaderNav />
  7.       <div class="right">
  8.         <RouterLink to="/">品牌</RouterLink>
  9.         <RouterLink to="/">专题</RouterLink>
  10.       </div>
  11.     </div>
  12.   </div>
  13. </template>
  15. <script>
  16. import TopHeaderNav from '@/components/top-header-nav.vue'
  17. import { onMounted, ref } from 'vue'
  18. export default {
  19.   name: 'AppHeaderSticky',
  20.   components: { TopHeaderNav },
  21.   setup () {
  22.     // 监听页面的滚动
  23.     const top = ref(0)
  24.     onMounted(() => {
  25.       window.onscroll = () => {
  26.         top.value = document.documentElement.scrollTop
  27.       }
  28.     })
  29.     return { top }
  30.   }
  31. }
  32. </script>
  34. <style scoped lang="less">
  35. .app-header-sticky {
  36.   width: 100%;
  37.   height: 80px;
  38.   position: fixed;
  39.   left: 0;
  40.   top: 0;
  41.   z-index: 999;
  42.   background-color: #fff;
  43.   border-bottom: 1px solid #e4e4e4;
  44.   // 此处为关键样式!!!
  45.   // 默认情况下完全把自己移动到上面
  46.   transform: translateY(-100%);
  47.   // 完全透明
  48.   opacity: 0;
  49.   // 显示出来的类名
  50.   &.show {
  51.     transition: all 0.3s linear;
  52.     transform: none;
  53.     opacity: 1;
  54.   }
  55.   .container {
  56.     display: flex;
  57.     align-items: center;
  58.   }
  59.   .logo {
  60.     width: 200px;
  61.     height: 80px;
  62.     background: url('~@/assets/images/logo.png') no-repeat right 2px;
  63.     background-size: 160px auto;
  64.   }
  65.   .right {
  66.     width: 220px;
  67.     display: flex;
  68.     text-align: center;
  69.     padding-left: 40px;
  70.     border-left: 2px solid @xtxColor;
  71.     a {
  72.       width: 38px;
  73.       margin-right: 40px;
  74.       font-size: 16px;
  75.       line-height: 1;
  76.       &:hover {
  77.         color: @xtxColor;
  78.       }
  79.     }
  80.   }
  81. }
  82. </style>
  83. <template>
  84.   <div class="app-header-sticky">
  85.     <div class="container">
  86.       <RouterLink class="logo" to="/" />
  87.       <HeaderNav />
  88.       <div class="right">
  89.         <RouterLink to="/">品牌</RouterLink>
  90.         <RouterLink to="/">专题</RouterLink>
  91.       </div>
  92.     </div>
  93.   </div>
  94. </template>
  96. <script>
  97. import HeaderNav from './header-nav'
  98. export default {
  99.   name: 'AppHeaderSticky',
  100.   components: { HeaderNav }
  101. }
  102. </script>
  104. <style scoped lang='less'>
  105. .app-header-sticky {
  106.   width: 100%;
  107.   height: 80px;
  108.   position: fixed;
  109.   left: 0;
  110.   top: 0;
  111.   z-index: 999;
  112.   background-color: #fff;
  113.   border-bottom: 1px solid #e4e4e4;
  114.   // 此处为关键样式!!!
  115.   // 默认情况下完全把自己移动到上面
  116.   transform: translateY(-100%);
  117.   // 完全透明
  118.   opacity: 0;
  119.   // 显示出来的类名
  120.   &.show {
  121.     transition: all 0.3s linear;
  122.     transform: none;
  123.     opacity: 1;
  124.   }
  125.   .container {
  126.     display: flex;
  127.     align-items: center;
  128.   }
  129.   .logo {
  130.     width: 200px;
  131.     height: 80px;
  132.     background: url("~@/assets/images/logo.png") no-repeat right 2px;
  133.     background-size: 160px auto;
  134.   }
  135.   .right {
  136.     width: 220px;
  137.     display: flex;
  138.     text-align: center;
  139.     padding-left: 40px;
  140.     border-left: 2px solid @xtxColor;
  141.     a {
  142.       width: 38px;
  143.       margin-right: 40px;
  144.       font-size: 16px;
  145.       line-height: 1;
  146.       &:hover {
  147.         color: @xtxColor;
  148.       }
  149.     }
  150.   }
  151. }
  152. </style>

2）Layout首页引入吸顶导航组件

  1. <template>
  2.   <!-- 顶部通栏组件 -->
  3.   <TopNav />
  4.   <!-- header区域 -->
  5.   <Header />
  6.   <!-- 吸顶组件 -->
  7.   <HeaderSticky/>
  8.   <main>
  9.     <!-- 二级路由出口 -->
  10.     <router-view></router-view>
  11.   </main>
  12.   <!-- 底部footer -->
  13.   <Footer/>
  14. </template>
  16. <script>
  17. import TopNav from './components/top-nav'
  18. import Header from './components/header'
  19. import Footer from './components/footer'
  20. import HeaderSticky from './components/header-sticky'
  21. export default {
  22.   name: 'XtxLayout',
  23.   components: { AppTopnav, AppHeader, AppFooter, HeaderSticky  }
  24. }
  25. </script>

3）在滚动到78px完成显示效果（添加类名）

通过滚动事件的触发，在回调函数里判断当前是否已经滚动了78px，如果大于则添加类名，否则移除类名

  1. document.documentElement.scrollTop 获取滚动距离
  2. :class 动态控制类名显示
  1. <div class="app-header-sticky" :class="{ show: showFlag }">
  3. data () {
  4.     return {
  5.       showFlag: false
  6.     }
  7. },
  8. mounted () {
  9.     // 监听页面滚动事件
  10.     window.addEventListener('scroll',()=>{
  11.          const scrollTop = document.documentElement.scrollTop
  12.           if( scrollTop >= 78 ) {
  13.             this.showFlag = true 
  14.           } else {
  15.             this.showFlag = false
  16.           }
  17.     })
  18. }

组合API实现

任务目标: 使用组合式API实现重构吸顶功能

vueuse/core : 组合式API常用复用逻辑的集合 https://vueuse.org/core/useWindowScroll/

1）安装@vueuse/core 包，它封装了常见的一些交互逻辑

  1. npm i @vueuse/core

2）在吸顶导航中使用

src/components/app-header-sticky.vue

  1. <template>
  2.   <div class="app-header-sticky" :class="{show:y >= 78}">
  3.     <div class="container">
  4.       <RouterLink class="logo" to="/" />
  5.       <HeaderNav />
  6.       <div class="left">
  7.         <RouterLink to="/" >品牌</RouterLink>
  8.         <RouterLink to="/" >专题</RouterLink>
  9.       </div>
  10.     </div>
  11.   </div>
  12. </template>
  14. <script>
  15. import HeaderNav from './header-nav'
  16. import { useWindowScroll } from '@vueuse/core'
  17. export default {
  18.   name: 'AppHeaderSticky',
  19.   components: { HeaderNav },
  20.   setup () {
  21.     // y表示具体顶部的滚动距离 会动态更新
  22.     const { y } = useWindowScroll()
  23.     return { y }
  24.   }
  25. }
  26. </script>

重点总结

基于事件模型的交互实现

  1. 前端  UI开发 
  2. 基于事件  click  scroll  input  change  
  3. 都是基于事件 在事件的回调函数里做一些逻辑操作  控制我们视图的变化

setup执行一次

  1. 如果我们的回调执行是依赖一个响应式数据不断发生变化而再次执行回调
  2. watch
  3. 注意不要试图直接在setup里写判断逻辑

三方工具包

  1. 1. 如果我们想自己封装一个逻辑复用函数  `useFn`
  2. 2. 三方逻辑工具库
  3.    1. 基础demo  demo run起来
  4.    2. 函数它的入参 支持的参数都有什么  类型是要求什么
  5.       函数的返回值  类名  如果是一个布尔值 是可以作为判断条件   function 可以被执行调用的