# Vue.js（VuePress.js）中使用Algolia Search
VuePress的默认主题中集成了Algolia插件，使用的是Algolia DocSearch，使用之前需要将网站提交给Algolia创建索引。Algolia在收到请求后会抓取网站内容建立好内容索引后，你的网站就可以使用Algolia提供的api进行搜索。 这种方式能满足文档的搜索要求，但不能自定义搜索的数据结构以及展示的形式。
为了对更多自定义的需要，我们对接Algolia Search API。Algolia提供免费的社区套餐，限1万条记录、5万次数据操作，能够满足基本的需求。
# 准备数据
根据项目需求，这里准备的是json格式的数据，样例如下：
[
{
"name": "heart",
"title": "Heart",
"zhTips": "心脏,收藏夹,喜欢,爱情,关系,情人节,心镂空,love,心,爱心,favorite,like,relationship,valentine,最爱,favourite",
"channel": [
{
"domain": "https://fontawesome.iconhelper.cn",
"title": "Fontawesome Icon 免费图标",
"svgDomain": "https://iconhelper.cn",
"name": "fontawesome",
"svg": "https://iconhelper.cn/svg/fontawesome/regular/heart.svg",
"url": "https://fontawesome.iconhelper.cn/icon/regular/heart.html"
},
{
"domain": "https://material.iconhelper.cn",
"title": "Material Design Icon 免费图标",
"svgDomain": "https://iconhelper.cn",
"name": "material",
"svg": "https://iconhelper.cn/svg/material/heart.svg",
"url": "https://material.iconhelper.cn/icon/heart.html"
}
]
},
/...
]
保存为json格式的文件。
# Algolia 服务器端的操作
首先，在Algolia注册一个账号,并登录：
登录后，进入控制面板，新建一个应用。
输入应用的名称，这里我们输入 iconhelper-cn-test，套餐选择免费的社区套餐。
选择主要地域，algolia在中国大陆没有节点，一般我们选择地理位置离中国大陆最近的香港节点或日本节点。
创建应用后，Algolia会要求你建立一个索引。
输入索引名称，这里输入 my-test-index（这个索引名称后续会用到）。
第二步是上传记录，可以通过文件、API或者手动上传记录。
我们这里选择文件上传，选择上午准备的json格式的文件，点击上传。 除了JSON格式，你还可以选择Algolia支持的CSV和TSV格式文件。
上传记录后，需要设置可搜索属性。
根据项目需求，我们这里设置了name/zhTips/chanel.title三个可搜索属性。这代表搜索接口只在这三个属性的值中进行搜索，返回的高亮数据中也只限三个属性。
最后一步，设置排序。
除了默认的几个排序字段，这里设置了name，升序排列。
最后获取 Application ID 和 Search-Only API key，以供前端接口中使用。
# Vue组件中的操作
# 首先我们先安装 algoliasearch
npm install algoliasearch
或者
yarn add algoliasearch
# 组件中使用（示例代码）
import algoliasearch from 'algoliasearch/lite';
export default {
name: "AlgoliaSearch",
methods: {
search: function (q) {
const client = algoliasearch("YourApplicationID", "YourSearchOnlyAPIKey");
const index = client.initIndex("iconhelper-cn-test");
index.search(q,{
hitsPerPage:20//每页数量
}).then(({hits,nbHits,nbPages,hitsPerPage,processingTimeMS}) => {
//操作数据更新
});
}
}
}