目录
写一下实现代码以及在这里记录一下自己遇到的问题
数据接口使用的百度搜索api,这里还运用了一下sessionStorage缓存,接口调用成功后将数据缓存到本地,如果本地有数据就用本地数据,避免重复调用接口。
先上图
一、初始化vue-cli项目
vue init webpack my-project
因为要使用sass所以得安装node-sass
这里可能会有版本过高现象,如果运行报错就卸载安装对应版本
1. sass-loader依赖于node-sass,所以要安装node-sass
cnpm install node-sass --save-dev //安装node-sass
cnpm install sass-loader --save-dev //安装依赖包sass-loader
cnpm install style-loader --save-dev //安装style-loader
2. 在build文件夹下的webpack.base.conf.js的module下 rules里面添加配置
{
test: /\.sass$/,
loaders: ['style', 'css', 'sass']
},
二、实现界面样式
html部分,界面样式是模仿百度搜索框做的效果
<template>
<div class="search-from">
<div style="text-align: center;">{
{ msg }}</div>
<div class="search">
<input
type="text"
placeholder="请输入搜索内容"
class="s-input"
v-model="keyword"
v-on:focus="focus()"
v-on:blur="blur()"
@keyup="getData($event)"
@keydown.down.prevent="selectDown"