vue实战项目(每日更新打卡)

vue-cli初始化项目及介绍

初始化脚手架
1.1 说明

1. Vue 脚手架是 Vue 官方提供的标准化开发工具（开发平台）。
2. 最新的版本是 4.x。
3. 文档: https://cli.vuejs.org/zh/。
4. 1.2 具体步骤
   第一步（仅第一次执行）：全局安装@vue/cli。
   npm install -g @vue/cli
   第二步：切换到你要创建项目的目录，然后使用命令创建项目
   vue create xxxx
   第三步：启动项目
   npm run serve
   备注：
5. 如出现下载缓慢请配置 npm 淘宝镜像：npm config set registry
   https://registry.npm.taobao.org

项目其他配置

组件路由搭建注意点

路由传参的三种方式

methods: {
    //搜索按钮的回调函数，需要向search路由跳转
    gosearch() {
      //路由传参3中形式
      //第一种：字符串形式
      this.$router.push(
        "/search" + this.keyword + "?k=" + this.keyword.toUpperCase()
      );
      //第二种:模板字符串
      this.$router.push(
        `/search/${this.keyword}?k=${this.keyword.toUpperCase()}`
      );
      //第三种：对象
      this.$router.push({
        name: "search",
        params: { keyword: this.keyword },
        query: { k: this.keyword.toUpperCase() },
      });
    },
  },

axios二次封装

三级联动路由跳转分析

1. 三级联动用户可以点击的：一级分类、二级分类、三级分类。
2. 路由跳转方式：
   声明式导航：router-link
   编程式导航：push|replace
3. 三级联动：如果使用声明式导航router-link，可以实现路由的跳转与传递参数但是需要注意出现卡顿现象。因为router-link是一个组件，当服务器的数据返回之后，循环出现的 router-link 组件【创建这些组件实例】,一瞬间消耗大量的内存，因此出现了卡顿现象