vue项目实现搜索功能

使用vue框架实现以下要求：

1、点击“首页“顶部搜索框，通过路由跳转到搜索页，并实现关键字模糊搜索功能

2、搜索页和首页下面用到的JSON数据自行模拟，并正确搜索渲染出来

3、在搜索页保留每次的搜索历史关键字，在搜索页的“历史搜索”中显示出来，最多展现出3个

4、点击搜索框左上角的箭头，可以历史回退到首页

5、点击删除，清空历史记录

 

 

 

 

 

 

流程：1、先全局安装vue（3.0版本）

安装vue命令：npm i  @vue/cli  -g

安装完后使用vue -V 检查vue的版本号

如果你嫌弃使用npm下载速度（服务器在国外），可以使用淘宝镜像（cnpm）下载，

首先安装淘宝镜像，cnpm才可以使用。

安装cnpm命令：npm install -g cnpm --registry=https://registry.npm.taobao.org

接着你就可以使用cnpm安装vue:  cnpm i  @vue/cli  -g

2、创建一个项目  

指令：vue create  项目名

如：vue create demo 

创建完成后 输入指令： cd demo    //进入demo文件夹

安装需要用到的模块（vant、axios）

安装vant指令： cnpm  i  vant  -save

安装axios指令： cnpm i axios --save

3、安装好项目所用的依赖包后，执行npm run serve 指令启动项目

4、打开项目，找到src文件夹下的main.js文件，打开引入vant 、axios模块

import Vant from 'vant';  //引入vant模块

import 'vant/lib/index.css'; //引入vant样式

Vue.use(Vant); //使用vant

import axios from "axios"; //引入axios模块

Vue.prototype.$axios=axios;  //全局引入axios

5、将APP.vue中的内容注释或者删除成下面格式：

6、如果不使用views（组件）内的Home.vue和About.vue可以删掉自己创建，

如果删掉，在router（路由文件夹）下index.js中删掉 import Home from '../views/Home.vue'；

如果使用Home/About组件改为下面格式：

配置路由：找到router文件夹下的index.js,具体路由配置如下：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

  const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue')
  },
  {
    path: '/searchResult',
    name: 'searchResult',
    component: () => import('../views/searchResult.vue')
  }
]
const router = new VueRouter({
  routes
})

export default router

7、在Home.vue写跳转（获取焦点时触发事件）,内容如下：

8、在这里是自己写的json文件，在public文件夹下创建一个data.json文件，内容如下：

{
    "data": [{
            "img": "http://img10.360buyimg.com/mobilecms/s372x372_jfs/t1/107731/30/17594/128560/5eba1306E936bf76c/67c1b3f0811d4aad.jpg!q70.dpg.webp",
            "title": "空气循环扇"
        },
        {
            "img": "http://img14.360buyimg.com/mobilecms/s372x372_jfs/t1/144748/18/2025/197309/5efed6acEfda6e78b/a9c0fe200236e109.png.webp",
            "title": "语音鼠标"
        },
        {
            "img": "http://img14.360buyimg.com/mobilecms/s372x372_jfs/t1/149120/14/4563/205634/5f290affEe4b665e0/8516912f4c76bde5.jpg!q70.dpg.webp",
            "title": "沐浴露"
        },
        {
            "img": "http://img13.360buyimg.com/mobilecms/s372x372_jfs/t1/48916/34/14957/190813/5dbeae56E705d7279/6ebd871f40b96a83.jpg!q70.dpg.webp",
            "title": "机械手表"
        },
        {
            "img": "http://img10.360buyimg.com/mobilecms/s372x372_jfs/t1/100792/2/19183/141569/5e9bbedaE11c1dffb/1c71532df00d755a.jpg!q70.dpg.webp",
            "title": "护眼床头灯"
        }
    ],
    "list": [
        "空气循环扇",
        "语音鼠标",
        "沐浴露",
        "机械手表",
        "护眼床头灯"
    ]
}

9、在About.vue组件中，内容如下：

10、在views文件夹下创建searchResult.vue组件，具体内容如下：