Vue2.0组件实现动态搜索引擎（一）_市面上的地址搜索组件是用什么组件做的

作者：繁依Fanyi0 | 2024-05-28 08:03:30

踩

市面上的地址搜索组件是用什么组件做的

从github上看到一个不错的开源项目：https://github.com/lavyun/vue-demo-search，

自己琢磨着不看代码做了一遍学习了不少，现将碰到的坑与填坑过程分享出来。

首先看一下demo的界面：

简单来说就是一个复刻各大搜索引擎的功能，用户输入关键字能出现搜索建议并上下键控制输入框内容。

同时点击上方logo能够切换不同引擎，点击搜一下能跳转到对应网站搜索结果。

首先分析一下页面，基本由2个部分组成：上方的LOGO部分和下方的输入框与搜索建议弹框。

由于篇幅关系，这次先分析logo部分的实现代码。

基于这次练习是针对Vue组件，所以我们可以将其拆分为logo组件和搜索组件，并将其设为父子组件方便初学，将来熟练以后可以考虑变为更常见的兄弟组件并使用event bus或者vuex来实现组件通信。

开发环境： Vue2.0、Node.js、npm、webpack、vue-cli、vue-resources、webstorm

为了以后项目工程化的目标，所以我们使用node+npm+webpack来构建项目。

准备工作包括安装node，npm，然后依次安装webpack，vue-cli

具体教程网上很多，就不在此赘述了。

1、选择一个文件夹放工程，cmd进入该目录

cd 目录路径（这里有个小坑，cd命令只对路径当前盘符有效果，例如在c盘输入d:../...是没有效果的还要再输入d:回车或者先进入d盘再cd 路径）

2、创建项目

vue init webpack-simple 工程名字（不能使用中文）

会有一些初始化的设置，如下输入:

Target directory exists. Continue? (Y/n)直接回车默认(然后会下载 vue2.0模板，慢的话连vpn)

Project name (vue-test)直接回车默认

Project description (A Vue.js project) 直接回车默认

use sass？（Y/n）是否使用sass，选n回车

Author 写你自己的名字

3、安装项目依赖

npm install（npm服务器在国外可能会很慢，实在不行挂vpn）

4、启动项目

npm run dev

正常的话默认浏览器就会打开页面了，如图：

这就是vue默认模板了，我们需要修改掉，开始建我们自己的项目。

首先修改src文件夹下的index.html:

<!DOCTYPE html>
<html>
  <head>
      <meta charset="utf-8">
      <title>Vue搜索</title>
  </head>
  <body>
      <div id="app1"></div>
  </body>
</html>

再到src下的main.js：

import Vue from 'vue';
import App from './App1.vue';
var vueResource = require('vue-resource');
Vue.use(vueResource);

new Vue({

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/636430?site