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中的内容注释或者删除成下面格式：

<template>

  <div id="app">

    <router-view/>

  </div>

</template>

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

如果删掉，在router（路由文件夹）下index.js中删掉 import Home