前端路线--Vue(day08)

最新推荐文章于 2024-09-02 17:34:07 发布
最新推荐文章于 2024-09-02 17:34:07 发布
阅读量106 收藏
点赞数
分类专栏： 前端 文章标签： 前端 vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Yan9_9/article/details/124869577
版权

note笔记

/* 
修改启动项目的指令:
原:cnpm run serve
在package.json中：
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  serve改成dev
  新:cnpm run dev
*/

/* 
单页面应用：只有一个页面,只是通过路由来切换资源
*/

/* 
路由重定向：
在router下-->index.js
//让路由为/时,默认跳转到首页
let routes = [
    { path: "/", component: HomePage, redirect: "/home" }
]
*/


/* 
引入css的方法:
1.App.vue中：(所有的页面都有用)
    @import url("./styles/base.css");
    @import url("./fonts/iconfont.css");
2.在main.js中:将css作为模块引入
// 将css作为模板引入
    import "./fonts/iconfont.css"
3.在public下index.html加<link>  方法太low
*/

/* 
项目说明：
1.配置路由
    下载模块 引入 使用
    准备路由(引入页面)
    配置路由
    引入路由  挂载(main.js)
2.使用less
    下载less(注意版本)
    使用less  lang="less"
    less中&表示上级
3.使用字体图标
    下载字体图标
    引入和使用
*/





/* 
登录页面和注册页面
1.views--LoginPage--LoginPage.vue
       --RegisterPage--RegisterPage.vue
    这两个页面无TabBar组件
2.index.js中配置路由(路由懒加载)
let routes = [
    // 路由的懒加载:并不是一打开项目就加在所有的路由
    //所以只要用户点击跳转到登录页面再将页面引入
    { path: "/login", component: () => import("@/views/LoginPage/LoginPage.vue") },
    { path: "/register", component: () => import("@/views/RegisterPage/RegisterPage.vue") },
    { path: "/search", component: () => import("@/views/SearchPage/SearchPage.vue") }
]
3.这两个页面不显示TabBar组件
    路由元信息：
    在index.js下,配置路由中加meta:{},让哪个页面有TabBar就加给谁
    let routes = [
    // 配置路由元信息:让login和register这两个页面不显示TabBar
    { path: "/home", component: HomePage, meta: { showTabBar: true } },
    { path: "/find", component: FindPage, meta: { showTabBar: true } },
    { path: "/category", component: CategoryPage, meta: { showTabBar: true } },
    { path: "/cart", component: CartPage, meta: { showTabBar: true } },
    { path: "/mine", component: MinePage, meta: { showTabBar: true } },
    // 路由的懒加载:并不是一打开项目就加在所有的路由
    //所以只要用户点击跳转到登录页面再将页面引入
    { path: "/login", component: () => import("@/views/LoginPage/LoginPage.vue") },
    { path: "/register", component: () => import("@/views/RegisterPage/RegisterPage.vue") },
    { path: "/search", component: () => import("@/views/SearchPage/SearchPage.vue") }
]

4.在App.vue中,在视图组件中使用
<!-- 利用路由元信息,让配置showTabBar原信息的路由显示TabBar这个组件 -->
    <TabBar v-if="$route.meta.showTabBar"></TabBar>
*/



/* 
首页的开发：
1.HomePage--components--HomeHeader.vue(首页公共头部)
          --children--HomeIndex.vue(首页的首页)
                    --HomeCate.vue(首页的分类)
将以上子页面引入到HomePage页面，注册,使用。

2.HomeHeader.vue的开发
样式见代码：(HomeHeader.vue)

Tab栏切换插件： 
npmjs.com   有个ly-tab的插件
2.1下载模块
    cnpm install ly-tab --save
2.2引入main.js中
// 引入Tab切换页组件(全局引入)
import LyTab from 'ly-tab';
2.3使用LyTab
Vue.use(LyTab);
2.4在HomeHeader.vue中局部引入(不和全局引入冲突)
//引入Tab切换页组件(局部引入)
import { LyTabs, LyTabItem } from "ly-tab";
2.5将注册成组件
  components: {
    LyTabs,
    LyTabItem,
  }
2.6 使用可以看到官网的示例,修改默认样式达到我们的要求
      <div class="tabs">
      <ly-tabs v-model="value" activeColor="#ffffff" @change="changeTabs">
        // value：定义在下方data 默认让哪一个选中   
        //activeColor:选中的样式 
        //change：自带一个事件,事件默认有一个参数指向下面的name
        <ly-tab-item name="1" title="首页" />
        <ly-tab-item name="2" title="家用电器" />
        <ly-tab-item name="3" title="男装女装" />
        <ly-tab-item name="4" title="鞋靴箱包" />
        <ly-tab-item name="5" title="手机数码" />
        <ly-tab-item name="6" title="电脑办公" />
        <ly-tab-item name="7" title="家具家纺" />
        <ly-tab-item name="8" title="个人化妆" />
        <ly-tab-item name="9" title="休闲运动" />
      </ly-tabs>
      <div class="cate">
        <i class="iconfont icon-fenlei2"></i>
        <span>分类</span>
      </div>
    </div>

3.Tab栏点击切换对应的页面
3.1子传父(HomeHeader--HomePage)
  在HomeHeader的methods中：
    methods: {
    changeTabs(name) {
      console.log(name);//上面传过来的标签的name：1,2,3...
      this.$emit("toparent", name);
    }
3.2HomePage(父)接收传来的数据
    <template>
        <div class="home_page">
            <HomeHeader @toparent="getName"></HomeHeader>
            <div style="height: 8.8rem"></div>
            <HomeIndex v-if="activeTab"></HomeIndex>
            <HomeCate v-else></HomeCate>
        </div>
    </template>
    activeTab：定义在data中 activeTab:true  
3.3让首页--组件/首页--分类显示
    HomePage的methods中：
methods: {
    getName(data) {
      // 判断data==1时代表点击的是tab切换页的首页
      if (data == 1) {
        this.activeTab = true;
      } else {
        this.activeTab = false;
      }
    },
  }
*/


/* 
点击搜索框跳转:编程式导航--通过事件跳转
  1.给搜索框加：@click="toSearchPage"
  2.methods中:
    // 跳转页面事件
    toSearchPage() {
      console.log(this.$route); //单个路由信息
      console.log(this.$router); //整个路由实例
      this.$router.push("/search"); //编程式导航--通过事件来跳转页面
    }
*/

HomeHeader.vue

<!-- 首页的头部公共组件 -->
<template>
  <div class="home_header">
    <div class="header_search">
      <div class="search" @click="toSearchPage">
        <i class="iconfont icon-sousuo"></i>
      </div>
      <div class="msg">
        <i class="iconfont icon-liaotian"></i>
      </div>
    </div>
    <div class="tabs">
      <ly-tabs v-model="value" activeColor="#ffffff" @change="changeTabs">
        <ly-tab-item name="1" title="首页" />
        <ly-tab-item name="2" title="家用电器" />
        <ly-tab-item name="3" title="男装女装" />
        <ly-tab-item name="4" title="鞋靴箱包" />
        <ly-tab-item name="5" title="手机数码" />
        <ly-tab-item name="6" title="电脑办公" />
        <ly-tab-item name="7" title="家具家纺" />
        <ly-tab-item name="8" title="个人化妆" />
        <ly-tab-item name="9" title="休闲运动" />
      </ly-tabs>
      <div class="cate">
        <i class="iconfont icon-fenlei2"></i>
        <span>分类</span>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
//引入Tab切换页组件(局部引入)
import { LyTabs, LyTabItem } from "ly-tab";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    LyTabs,
    LyTabItem,
  },
  data() {
    //这里存放数据
    return {
      value: "1",
    };
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    //changeTabs会有一个data数据,就是上面tab分页的name(1,2,3...)
    changeTabs(data) {
      // 向父亲传值
      this.$emit("toparent", data);
    },
    //通过事件跳转--编程式导航
    // 点击搜索框跳转到搜索页面
    toSearchPage() {
      // $route:单个路由信息
      //$router:整个路由实例
      //$router里有个push("跳转的路由")方法,可以跳转到相应的页面
      this.$router.push("/search");
    },
  },
  beforeCreate() {}, //生命周期 - 创建之前
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  beforeMount() {}, //生命周期 - 挂载之前
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less">
.home_header {
  width: 100%;
  height: 8.8rem;
  background-color: #f55;
  position: fixed;
  left: 0;
  top: 0;
  .header_search {
    width: 100%;
    height: 4.4rem;
    display: flex;
    align-items: center;
    .search {
      width: calc(85% - 1rem);
      height: 3rem;
      margin-left: 1rem;
      background-color: #fff;
      border-radius: 1.5rem;
      position: relative;
      i {
        font-size: 2.2rem;
        position: absolute;
        right: 0.5rem;
        top: 50%;
        transform: translateY(-50%);
        color: #999;
      }
    }
    .msg {
      width: 15%;
      line-height: 4.4rem;
      text-align: center;
      margin-top: 0.4rem;
      i {
        font-size: 2.2rem;
        color: #fff;
      }
    }
  }
  .tabs {
    display: flex;
    align-items: center;

    .ly-tabs {
      width: 80%;
      height: 4.4rem;
      background: transparent;
      border: 0;
      color: #fff;
      .ly-tab-item {
        color: #ffff !important;
      }
    }
    .cate {
      text-align: center;
      color: #fff;
      i {
        font-size: 2.2rem;
      }
      span {
        margin-left: 0.5rem;
        font-size: 1.4rem;
        vertical-align: top;
      }
    }
  }
}
</style>

大商创移动端的首页的头部

<!-- 首页的头部公共组件 -->
<template>
  <div class="home_header">
    <div class="header_search">
      <div class="search" @click="toSearchPage">
        <i class="iconfont icon-sousuo"></i>
      </div>
      <div class="msg">
        <i class="iconfont icon-liaotian"></i>
      </div>
    </div>
    <div class="tabs">
      <ly-tabs v-model="value" activeColor="#ffffff" @change="changeTabs">
        <ly-tab-item name="1" title="首页" />
        <ly-tab-item name="2" title="家用电器" />
        <ly-tab-item name="3" title="男装女装" />
        <ly-tab-item name="4" title="鞋靴箱包" />
        <ly-tab-item name="5" title="手机数码" />
        <ly-tab-item name="6" title="电脑办公" />
        <ly-tab-item name="7" title="家具家纺" />
        <ly-tab-item name="8" title="个人化妆" />
        <ly-tab-item name="9" title="休闲运动" />
      </ly-tabs>
      <div class="cate">
        <i class="iconfont icon-fenlei2"></i>
        <span>分类</span>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
//引入Tab切换页组件(局部引入)
import { LyTabs, LyTabItem } from "ly-tab";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    LyTabs,
    LyTabItem,
  },
  data() {
    //这里存放数据
    return {
      value: "1",
    };
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    //changeTabs会有一个data数据,就是上面tab分页的name(1,2,3...)
    changeTabs(data) {
      // 向父亲传值
      this.$emit("toparent", data);
    },
    //通过事件跳转--编程式导航
    // 点击搜索框跳转到搜索页面
    toSearchPage() {
      // $route:单个路由信息
      //$router:整个路由实例
      //$router里有个push("跳转的路由")方法,可以跳转到相应的页面
      this.$router.push("/search");
    },
  },
  beforeCreate() {}, //生命周期 - 创建之前
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  beforeMount() {}, //生命周期 - 挂载之前
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less">
.home_header {
  width: 100%;
  height: 8.8rem;
  background-color: #f55;
  position: fixed;
  left: 0;
  top: 0;
  .header_search {
    width: 100%;
    height: 4.4rem;
    display: flex;
    align-items: center;
    .search {
      width: calc(85% - 1rem);
      height: 3rem;
      margin-left: 1rem;
      background-color: #fff;
      border-radius: 1.5rem;
      position: relative;
      i {
        font-size: 2.2rem;
        position: absolute;
        right: 0.5rem;
        top: 50%;
        transform: translateY(-50%);
        color: #999;
      }
    }
    .msg {
      width: 15%;
      line-height: 4.4rem;
      text-align: center;
      margin-top: 0.4rem;
      i {
        font-size: 2.2rem;
        color: #fff;
      }
    }
  }
  .tabs {
    display: flex;
    align-items: center;

    .ly-tabs {
      width: 80%;
      height: 4.4rem;
      background: transparent;
      border: 0;
      color: #fff;
      .ly-tab-item {
        color: #ffff !important;
      }
    }
    .cate {
      text-align: center;
      color: #fff;
      i {
        font-size: 2.2rem;
      }
      span {
        margin-left: 0.5rem;
        font-size: 1.4rem;
        vertical-align: top;
      }
    }
  }
}
</style>

项目连接

大商创移动端的首页的头部

喝西瓜汁的兔叽Yan
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
移动端项目（vue2+vant组件库）
qq_45585640的博客
06-23 6617
在命令行中输入以下命令创建 Vue 项目： 这里建议两个都选上，更严谨。 这里建议选择第 1 个，保存到单独的配置文件，这样方便我们做自定义配置。 安装结束，命令提示你项目创建成功，按照命令行的提示在终端中分别输入： [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UynFzUoP-1654274042910)(assets/1582010300149-9932febe-2625-4ee7-986f-9190ab449fec.png)]如
vue-demo-search-master Vue模板
08-28
Vue.js 是一款非常流行的前端JavaScript框架，由尤雨溪开发并维护，它的核心特性包括组件化、虚拟DOM、响应式数据绑定以及强大的生态系统。在这个"vue-demo-search-master"项目中，我们可以看到一个基于Vue.js的搜索...
Vue 项目笔记 持续更新
没有翅膀的我们，只是随便认为不能飞而已
10-29 678
公司一直是vue-cli2,正好要项目重构，所以趁此机会，将项目理一遍。如果有坑，希望大佬指出。 移动端UI Vant 选择的是vant,为此也纠结了一会，也是第一次使用。慢慢采坑，一踩一个准 按需加载 安装 npm i vant -S yarn add vant 按需加载 在 babel.config.js 中配置 module.exports = { plugins: [ ...
vant部署_Vant 主题色配置 vue-cli搭建的项目
weixin_31488273的博客
12-24 608
自定义Vant主题色定制主题：官方配置1.本地新建基础样式文件 vant.lessimage.png可重新配置颜色变量,更多变量名可查看配置文件// Component Colors@text-color: #323233;@border-color: #ebedf0;@active-color: #f2f3f5;@background-color: #f7f8fa;@background-col...
Vue(八)：头条项目
baiduwenku112的博客
01-05 1916
一、新建项目 与之前的不同之处在于，本次选择自动创建Router，如下： 注：发现在src目录下新增views文件夹。views文件夹和components文件夹都是存放vue页面文件的。区别在于凡是通过router/index.js路由文件引入的.vue文件放入view文件夹，其余放入components文件夹。 二、开发 2.1 安装Vant组件库 组件库地址：vant-contrib.gitee.io/vant/#/zh-CN/theme 执行npm i vant -S ..
前端路线--Vue（day05）
Yan9_9的博客
05-13 189
Vue脚手架零碎笔记 /* 脚手架工具： 1.安装vuecli npm install -g @vue/cli //全局安装脚手架 2.查看版本号: vue --version 3.创建项目:(在一个目标文件夹中,输入栏输入cmd) vue create myvue(项目名称) 注意:小写字母,不要汉字 4.设置： 会出现多个选项有: Vue3.x的项目 Vue2.x的项目(此处选这个) 个性化创建 5.完成创建后: 第一步:cd myvue //进入项目 第二步:npm run serve //
前端路线--Vue(day16)
Yan9_9的博客
06-02 165
utils-request.js src----api------users.js 跨域代码 vue.config中
前端路线--Vue(day27)
Yan9_9的博客
06-20 139
本天讲述的是如何将项目上线到阿里云服务器
前端路线--Vue3(day03)
Yan9_9的博客
06-27 206
rem布局 项目链接 笔记
前端路线--Vue(day17)
Yan9_9的博客
06-03 182
在nodejs中使用sql database—db.js router----admin.js app.js
前端Vue入门-day08-vant组件库
来自计科萌新的编程记录本
08-03 4631
学习目标：学会使用vant组件库实现vue项目
day04-前端(vue).zip
10-01
在"day04-前端(vue).zip"这个压缩包中，我们可以期待找到一系列关于Vue.js学习资料，包括可能的代码示例、教程文档、练习项目等，帮助学习者深入理解和掌握Vue的核心概念和特性。 1. **Vue实例**：Vue实例是框架的...
高级软件人才培训专家-day02-JavaScript-Vue
03-10
### 高级软件人才培训专家-day02-JavaScript-Vue #### 一、JavaScript简介 **JavaScript** 是一种广泛使用的脚本语言，用于增强网页的互动性。它由 Netscape 的 Brendan Eich 于 1995 年创建，并在同年被 Netscape...
vue3+vite 通过js引入的src，在打包后为什么不能显示
肖肖肖丽珠的博客
09-02 147
页面有个图片我是动态设置的。但是打包之后一直没有找到。我本来使用的绝对定位发现不行，改成了相对的也不行，最后改成下面的这种就可以啦。
vue3+el-tale封装（编辑、删除、查看详情按钮一起封装）
CallMe_CrabXie的博客
08-27 780
对应的tableData和tableDataHeader文件（实际开发中，应该从后端拿tableData，tableHeader根据情况自定义）
Window Performance API
Bruce__taotao的博客
08-28 1847
Window Performance API 是一组浏览器提供的接口，用于收集和分析网页性能数据。它允许开发者精确地测量网页加载时间、资源加载时间、用户交互延迟等性能指标，从而优化用户体验。1. 主要接口1.1返回一个高精度时间戳，通常用于计算精确的时间差。例如，你可以用它来测量函数执行时间。使用场景: 精确计算代码段的执行时间。// 执行某个任务console.log(`执行时间:${// 执行某个任务 const end = performance . now();
跨页面进行数据通讯
最新发布
榴莲不好吃的专栏
09-02 357
Broadcast Channel API 允许在一个源的不同窗口、标签页或 iframe 之间进行通信。这是一种实时的通信机制，非常适合需要实时同步数据的场景。3.iframe 数据通讯 postMessage/message（可设置不同源数据通讯）1.使用 LocalStorage 或 SessionStorage（同源）// 检查消息来源，确保来自正确的源。// 检查消息来源，确保来自正确的源。'Hello 来自父亲的消息!'Hello 来自儿子的消息!// 忽略来自自身的消息。
前端的面试题
本人小可爱
08-30 677
【代码】前端的面试题。
vue 通过事件的形式调用全局组件
liux6687的博客
08-29 1654
通过vue.use 挂载组件，然后在vue 原型上添加属性, 再通过调用属性方法传参的形式控制组件。这里我是写了一个文件上传组件。
E:\2023前端Vue2+Vue3\2、Vue2+Vue3全套教程\Vue2\资料\day6\code1\dome-3>npm i axios -S npm ERR! code ERESOLVE npm ERR! ERESOLVE could not resolve npm ERR! npm ERR! While resolving: @vue/eslint-config-standard@6.1.0 npm ERR! Found: eslint-plugin-vue@8.7.1 npm ERR! node_modules/eslint-plugin-vue npm ERR! dev eslint-plugin-vue@"^8.0.3" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer eslint-plugin-vue@"^7.0.0" from @vue/eslint-config-standard@6.1.0 npm ERR! node_modules/@vue/eslint-config-standard npm ERR! dev @vue/eslint-config-standard@"^6.1.0" from the root project npm ERR! npm ERR! Conflicting peer dependency: eslint-plugin-vue@7.20.0 npm ERR! node_modules/eslint-plugin-vue npm ERR! peer eslint-plugin-vue@"^7.0.0" from @vue/eslint-config-standard@6.1.0 npm ERR! node_modules/@vue/eslint-config-standard npm ERR! dev @vue/eslint-config-standard@"^6.1.0" from the root project npm ERR! npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with --force, or --legacy-peer-deps npm ERR! to accept an incorrect (and potentially broken) dependency resolution. npm ERR! npm ERR! See C:\Users\NYH\AppData\Local\npm-cache\eresolve-report.txt for a full report. npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\NYH\AppData\Local\npm-cache\_logs\2023-07-16T11_48_37_888Z-debug-0.log
07-17
这个错误是由于依赖冲突引起的。根据错误信息，@vue/eslint-config-standard@6.1.0 需要 eslint-plugin-vue@^7.0.0 的版本，但是你的项目中已经安装了 eslint-plugin-vue@8.7.1 的版本。 为了解决这个问题，有几种方法可以尝试： 1. 强制安装：你可以尝试使用 `npm install axios -S --force` 命令来强制安装依赖，但请注意这可能会导致其他潜在的依赖问题。 2. 使用旧版本：你可以尝试将 @vue/eslint-config-standard 的版本降级到兼容 eslint-plugin-vue@8.7.1 的版本，或者将 eslint-plugin-vue 的版本升级到兼容 @vue/eslint-config-standard@6.1.0 的版本。 3. 解决依赖冲突：你可以手动解决依赖冲突，更新或降级相关的依赖项，以确保它们兼容。 4. 清理缓存：有时候，依赖冲突可能是由于缓存问题引起的。你可以尝试清除 npm 缓存，然后再次运行 `npm install axios -S` 命令。 希望这些解决方法能帮助你解决问题。如果还有其他问题，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值