HMVue8.1 初始化【课程综合案例-HM头条(移动端)】
文档:http://doc.toutiao.liulongbin.top/
1 搭建初始项目、梳理项目结构
npm run serve
结论:通过路由切换的组件放到views里;不是通过路由进行切换、可复用的组件放到components中。
清空App.vue,通过<回车生成vue空模板
清空components和views文件夹;整理router/index.js
2 安装和配置vant组件库
https://vant-contrib.gitee.io/vant/#/zh-CN/
发布时,有方法(http://doc.toutiao.liulongbin.top/mds/15.build.html#_15-4-%E5%9F%BA%E4%BA%8E-externals-%E9%85%8D%E7%BD%AE-cdn-%E5%8A%A0%E9%80%9F)可以优化掉vant组件库,防止体积大
http://toutiao.liulongbin.top/report.html
测试vant是否配置ok
3 使用Tabbar组件并开启路由模式
https://vant-contrib.gitee.io/vant/#/zh-CN/tabbar
<template> <div class="user-container"> <div class="user-card"> <van-cell> <template #icon> <img src="../../assets/logo.png" alt="" class="avatar" /> template> <template #title> <span class="username">用户名span> template> <template #label> <van-tag color="#fff" text-color="#007bff">申请认证van-tag> template> van-cell> <div class="user-data"> <div class="user-data-item"> <span>0span> <span>动态span> div> <div class="user-data-item"> <span>0span> <span>关注span> div> <div class="user-data-item"> <span>0span> <span>粉丝span> div> div> div> <van-cell-group class="action-card"> <van-cell icon="edit" title="编辑资料" is-link /> <van-cell icon="chat-o" title="小思同学" is-link /> <van-cell icon="warning-o" title="退出登录" is-link /> van-cell-group> div> template> <script> export default { name: 'User' } script> <style lang="less" scoped> .user-container { .user-card { background-color: #007bff; color: white; padding-top: 20px; .van-cell { background: #007bff; color: white; &::after { display: none; } .avatar { width: 60px; height: 60px; background-color: #fff; border-radius: 50%; margin-right: 10px; } .username { font-size: 14px; font-weight: bold; } } } .user-data { display: flex; justify-content: space-evenly; align-items: center; font-size: 14px; padding: 30px 0; .user-data-item { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 33.33%; } } } style>
4 使用Navbar组件
https://vant-contrib.gitee.io/vant/#/zh-CN/nav-bar
覆盖vant中navbar的默认样式
问题:虽然当前组件(Home.vue)中样式修改成功,但是在其他组件中也想风格统一时,样式并不会生效
解决:见8.4,定制主题博客
https://vant-contrib.gitee.io/vant/#/zh-CN/theme
定制主题:使自定义的样式内容全局生效