「Vue.js」ライブラリvue-color-kitをインストールする
環境
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";