「Vue.js」ライブラリvue-color-kitをインストールする

2022年8月28日

環境
Windows 10 Home 64bit
node v16.17.0
yarn 1.22.19
@vue/cli 5.0.8

操作方法
1.@vue/cliをインストールします

>npm install -g @vue/cli

2.npmの初期化を行います
全てEnterキーを押します

c:\study\vue3>npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help init` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (vue3)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to c:\study\vue3\package.json:

{
  "name": "vue3",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this OK? (yes)

3.Vueアップグレードを行います

c:\study\vue3>vue upgrade --next
✔  Gathering package information...
 DONE  Seems all plugins are up to date. Good work!

4.cftvueというプロジェクトを作成します

>vue create cftvue
Vue CLI v5.0.8
? Please pick a preset: (Use arrow keys)
> Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
  Manually select features
 vue 3を選択します
 略
 $ cd cftvue
 $ yarn serve

5.プロジェクトに移動します
c:\study\vue3>cd cftvue
6.vue-color-kitをインストールします。

c:\study\vue3\cftvue>yarn add vue-color-kit
yarn add v1.22.19
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ vue-color-kit@1.0.5
info All dependencies
└─ vue-color-kit@1.0.5
Done in 54.61s.

7.vue-color-kitを利用します
src配下のApp.vueを編集します

<template>  
    <ColorPicker
      theme="light"
      :color="color"
      :sucker-hide="false"
      :sucker-canvas="suckerCanvas"
      :sucker-area="suckerArea"
      @changeColor="changeColor"
      @openSucker="openSucker"
    />
</template>

<script>

import { ColorPicker } from "vue-color-kit";
import "vue-color-kit/dist/vue-color-kit.css";