Blogブログ

Category: vue.js

Vueで検索エンジンAlgoliaの実装

goolge site search, yahoo site searchが廃止になったことで、注目を浴びだしたのが全文検索可能なSAAS。 その一つであるAlgoliaを使ってみる。 what Algolia? https://www.algolia.com/ 検索のみを提供するサービス。 APIは豊富にある。 検索対象とするキーの設定なども容易。 利用例は多く、近いところだとvue。 https://vuejs.org/ 個人であれば無料で月10万コールまで利用出来る。 データの更新なども上限はある。 https://www.algolia.com/pricing/ アカウント作成 無料で作成出来る。 最初にチュートリアルがあり、検索対象カラムの指定や条件の編集方法などが簡単に学べる。 https://www.algolia.com/apps/ARUFSHIXOF/api-keys/all サンプルプロジェクト作成 ライブラリが用意されているvueで実装。 インストール vue init webpack vue_algolia cd vue_algolia npm install npm install algoliasearch –save データの追加 日本語も念の為追加してみる algoliaのダッシュボードから追加。 indicesという項目から進む。 Add recordでjson形式で追加が可能。 試しに、日本語も追加してみる。 https://www.algolia.com/apps/ARUFSHIXOF/explorer/browse/getstarted_actors ビルド~デプロイ cloudfrontに上げてみた。 日本語も問題なく検索できる! http://dukpd3il98sac.cloudfront.net

Vue.js 3分でHot reloadつき開発環境構築

Vue CLI を使う。 Make devenv by Vue CLI 3 https://cli.vuejs.org/ Install cli. $ npm install -g @vue/cli Create vue project. $ vue create vuetest $ cd vuetest Hot reload setting. $ npm i –only=dev –no-audit && npm i –only=prod && cross-env NODE_ENV=development vue-cli-service serve –open Have a fun! $ npm run serve