Vue.jsのライブラリvue-email-dropdownをインストールしてmailアドレスのドメインをAutocompleteする手順

vue.jsのライブラリで、macのfinder風Treeを簡単に実装できる「vue-finder」の導入手順と簡単な使い方
環境
- OS CentOS 8.0.1905 (Core)
- node v12.13.1
- npm 6.13.2
- @vue/cli 4.1.1
Vue環境構築
下記のコマンドで構築。今回は、vueappという名前でプロジェクトを作成してます。
1 |
vue create vueapp |
プロジェクト作成時は、defaultを選択してます 。
1 |
Vue CLI v4.1.1? Please pick a preset: default (babel, eslint) |
vue-finderインストール
下記の手順でインストールします。
1 2 3 4 5 |
## 移動 cd vueapp ## インストール vue i -S @jledentu/vue-finder |
vue-finder 使い方
src配下のApp.vueを下記のように編集します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
<template> <div id="app"> <div> <img alt="Vue logo" src="./assets/logo.png"> </div> <Finder :tree="tree"></Finder> </div> </template> <script> import { Finder } from "@jledentu/vue-finder"; import "@jledentu/vue-finder/dist/vue-finder.css"; export default { components: { Finder }, data() { return { tree: { id: "root", children: [ { id: "item1", label: "item 1", children: [ { id: "item11", label: "item 1-1" }, { id: "item12", label: "item 1-2" } ] }, { id: "item2", label: "item 2" }, { id: "item3", label: "item 3" } ] } }; } }; </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; padding-top: 150px; margin: 0 auto; width: 800px; } </style> |
起動します。
1 |
npm run serve |
ブラウザから http://プライベートIP:8080 に アクセスすると macのfinder風Treeが表示されていることが確認できます。

-
前の記事
CentOs7にWEBのサーバ管理ツール「Cockpit」をインストールしてdockerコンテナを管理する 2020.04.03
-
次の記事
Nuxt.js vue-code-highlightを使用してソースコードをハイライト表示する 2020.04.04
コメントを書く