ともやん・どっと・ねっと

ユーザ用ツール

サイト用ツール

現在位置: start » javascript » yarn
トレース: • yarn

サイドバー

Top

検索タグ

*server *install server* *install* *server* install server install* local* *local *local* local default* default *default* *default https* https *https *linux

変更履歴

メニュー


javascript:yarn

目次

Yarn - パッケージ マネージャ

本家: Home | Yarn - Package Manager
ソースコード: yarnpkg/yarn: 📦🐈 Fast, reliable, and secure dependency management.
ライセンス: 二条項BSDライセンス(BSD 2-Clause License)

Yarn (ヤーン) とは JavaScript(フロントエンド) のパッケージマネージャである。2016 年 10 月に FaceBook がオープンソースの BSD ライセンスで公開した。
npm と互換性 (package.json, node_modules/ で構成) があり、npm よりも処理が高速である。

ヤ～ンばか～ん…😅💦💦💦 (※これはイメージです！！)
んふ～ん🎵 そこはお耳なの んふ～ん🎵…

林家木久蔵 / いやんばか～ん - YouTube より
いやんばか〜ん
いやんばか～ん/林家木久蔵 - 歌詞検索サービス 歌詞ＧＥＴ

インストール

Scoop によるインストール。

Node.js をインストールする。
nvm (Node Version Manager)、および、Node.js - サーバーサイド JavaScript 環境 のインストールについては、Node.js - サーバーサイド JavaScript 環境 | Windows - nvm-windows 編 を参照のこと。

Node.js の動作確認。

$ node --version
v14.15.1

Yarn をインストールする。

$ scoop install yarn
Installing 'yarn' (1.22.5) [64bit]
yarn-1.22.5.msi (1.6 MB) [====================================================================================] 100%
Checking hash of yarn-1.22.5.msi ... ok.
Extracting yarn-1.22.5.msi ... done.
Linking ~\scoop\apps\yarn\current => ~\scoop\apps\yarn\1.22.5
Persisting cache
Persisting global
Persisting mirror
Running post-install script...
yarn config v1.22.5
success Set "cache-folder" to "C:\\Users\\tomoyan\\scoop\\apps\\yarn\\current\\cache".
Done in 0.36s.
yarn config v1.22.5
success Set "yarn-offline-mirror" to "C:\\Users\\tomoyan\\scoop\\apps\\yarn\\current\\mirror".
Done in 0.38s.
yarn config v1.22.5
success Set "global-folder" to "C:\\Users\\tomoyan\\scoop\\apps\\yarn\\current\\global".
Done in 0.37s.
yarn config v1.22.5
success Set "prefix" to "C:\\Users\\tomoyan\\scoop\\apps\\yarn\\current\\global".
Done in 0.37s.
'yarn' (1.22.5) was installed successfully!

Yarn のバージョン確認。

$ yarn --version
1.22.5

もしも、Node.js がインストールされていないと...

Yarn のインストールで node コマンドが実行されない。

$ scoop install yarn
Installing 'yarn' (1.22.4) [64bit]
yarn-1.22.4.msi (1.6 MB) [====================================================================================] 100%
Checking hash of yarn-1.22.4.msi ... ok.
Extracting yarn-1.22.4.msi ... done.
Linking ~\scoop\apps\yarn\current => ~\scoop\apps\yarn\1.22.4
Persisting cache
Persisting mirror
Persisting global
Running post-install script...
'node' は、内部コマンドまたは外部コマンド、
操作可能なプログラムまたはバッチ ファイルとして認識されていません。
'node' は、内部コマンドまたは外部コマンド、
操作可能なプログラムまたはバッチ ファイルとして認識されていません。
'node' は、内部コマンドまたは外部コマンド、
操作可能なプログラムまたはバッチ ファイルとして認識されていません。
'node' は、内部コマンドまたは外部コマンド、
操作可能なプログラムまたはバッチ ファイルとして認識されていません。
'yarn' (1.22.4) was installed successfully!
'yarn' suggests installing 'nodejs' or 'nodejs-lts' or 'nvm' or 'nvs'.

Yarn / npm の CLI コマンドの比較

Yarn npm (v5) 補足
yarn init npm init 管理を開始(インタラクティブ)
yarn npm init -y 管理を開始(即時)
yarn install npm install 記録されたパッケージをインストール
yarn add [package@version] npm install –save [package@version] インストール + 記録
yarn add –dev [package] npm install –save-dev [package] 開発環境にのみインストール + 記録
yarn global add [package] npm install –global [package] グローバルにインストール
yarn remove [package] npm uninstall –save [package] パッケージと記録を削除
yarn remove [package] npm uninstall –save-dev [package] 開発環境のパッケージと記録を削除
yarn global upgrade npm update –global グローバルのパッケージ全体を更新
yarn upgrade rm -rf node_modules && npm install ローカルのパッケージ全体の更新
yarn upgrade [package] npm update [package] ローカルのパッケージの更新
yarn cache clean npm cache clean キャッシュクリア
yarn info [package] npm info [package] パッケージ情報の表示
yarn outdated npm outdated 古いパッケージ一覧の表示
yarn run [script] npm run [script] package.json内のscriptに定義されたスクリプトを実行
なし？
yarn info [package]で一応調べられる 		npm search [package] パッケージのバージョン一覧の取得
yarn add npm install
yarn add –flat (N/A)
yarn add –har (N/A)
yarn add –no-lockfile npm install –no-package-lock
yarn add –pure-lockfile (N/A)
yarn add [package] npm install [package] –save
yarn add [package] –dev npm install [package] –save-dev
yarn add [package] –peer (N/A)
yarn add [package] –optional npm install [package] –save-optional
yarn add [package] –exact npm install [package] –save-exact
yarn add [package] –tilde (N/A)
yarn global add [package] npm install [package] –global
yarn global upgrade npm update –global
yarn add –force npm rebuild
yarn remove [package] npm uninstall [package]
yarn cache clean [package] npm cache clean
yarn upgrade rm -rf node_modules && npm install
yarn version –major npm version major
yarn version –minor npm version minor
yarn version –patch npm version patch

Migrating from npm | Yarn より
yarnチートシート - Qiita より

Yarn による Vue.js アプリ開発

vue-cli のインストール

Vue.js 環境のディレクトリを作成する。

$ mkdir vuejs_env && cd vuejs_env
    Directory: C:\Users\tomoyan
 
Mode                 LastWriteTime         Length Name
----                 -------------         ------ ----
d----          2020/11/27    20:45                vuejs_env
$ yarn add @vue/cli
yarn add v1.22.5
info No lockfile found.
[1/4] Resolving packages...
warning @vue/cli > @vue/cli-shared-utils > @hapi/joi@15.1.1: Switch to 'npm install joi'
warning @vue/cli > @vue/cli-shared-utils > request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
warning @vue/cli > @vue/cli-shared-utils > request > har-validator@5.1.5: this library is no longer supported
warning @vue/cli > @vue/cli-shared-utils > @hapi/joi > @hapi/address@2.1.4: Moved to 'npm install @sideway/address'
warning @vue/cli > @vue/cli-shared-utils > @hapi/joi > @hapi/bourne@1.3.2: This version has been deprecated and is no longer supported or maintained
warning @vue/cli > @vue/cli-shared-utils > @hapi/joi > @hapi/topo@3.1.6: This version has been deprecated and is no longer supported or maintained
warning @vue/cli > @vue/cli-shared-utils > @hapi/joi > @hapi/hoek@8.5.1: This version has been deprecated and is no longer supported or maintained
warning @vue/cli > @vue/cli-shared-utils > @hapi/joi > @hapi/topo > @hapi/hoek@8.5.1: This version has been deprecated and is no longer supported or maintained
warning @vue/cli > @vue/cli-ui > vue-cli-plugin-apollo > nodemon > chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
warning @vue/cli > @vue/cli-ui > vue-cli-plugin-apollo > nodemon > chokidar > fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
warning @vue/cli > globby > fast-glob > micromatch > snapdragon > source-map-resolve > resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
warning @vue/cli > globby > fast-glob > micromatch > snapdragon > source-map-resolve > urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
[2/4] Fetching packages...
info fsevents@1.2.13: The platform "win32" is incompatible with this module.
info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 713 new dependencies.
info Direct dependencies
└─ @vue/cli@4.5.9
info All dependencies
├─ @akryum/winattr@3.0.0
├─ @apollo/protobufjs@1.0.5
├─ @babel/compat-data@7.12.7
├─ @babel/core@7.12.9
├─ @babel/helper-builder-binary-assignment-operator-visitor@7.10.4
├─ @babel/helper-compilation-targets@7.12.5
├─ @babel/helper-define-map@7.10.5
├─ @babel/helper-explode-assignable-expression@7.12.1
├─ @babel/helper-get-function-arity@7.10.4
├─ @babel/helper-hoist-variables@7.10.4
├─ @babel/helper-wrap-function@7.12.3
├─ @babel/helpers@7.12.5
├─ @babel/highlight@7.10.4
├─ @babel/parser@7.12.7
├─ @babel/plugin-proposal-async-generator-functions@7.12.1
├─ @babel/plugin-proposal-class-properties@7.12.1
├─ @babel/plugin-proposal-dynamic-import@7.12.1
├─ @babel/plugin-proposal-export-namespace-from@7.12.1
├─ @babel/plugin-proposal-json-strings@7.12.1
├─ @babel/plugin-proposal-logical-assignment-operators@7.12.1
├─ @babel/plugin-proposal-nullish-coalescing-operator@7.12.1
├─ @babel/plugin-proposal-numeric-separator@7.12.7
├─ @babel/plugin-proposal-object-rest-spread@7.12.1
├─ @babel/plugin-proposal-optional-catch-binding@7.12.1
├─ @babel/plugin-proposal-optional-chaining@7.12.7
├─ @babel/plugin-proposal-private-methods@7.12.1
├─ @babel/plugin-proposal-unicode-property-regex@7.12.1
├─ @babel/plugin-syntax-class-properties@7.12.1
├─ @babel/plugin-syntax-flow@7.12.1
├─ @babel/plugin-syntax-top-level-await@7.12.1
├─ @babel/plugin-syntax-typescript@7.12.1
├─ @babel/plugin-transform-arrow-functions@7.12.1
├─ @babel/plugin-transform-async-to-generator@7.12.1
├─ @babel/plugin-transform-block-scoped-functions@7.12.1
├─ @babel/plugin-transform-block-scoping@7.12.1
├─ @babel/plugin-transform-classes@7.12.1
├─ @babel/plugin-transform-computed-properties@7.12.1
├─ @babel/plugin-transform-destructuring@7.12.1
├─ @babel/plugin-transform-dotall-regex@7.12.1
├─ @babel/plugin-transform-duplicate-keys@7.12.1
├─ @babel/plugin-transform-exponentiation-operator@7.12.1
├─ @babel/plugin-transform-flow-strip-types@7.12.1
├─ @babel/plugin-transform-for-of@7.12.1
├─ @babel/plugin-transform-function-name@7.12.1
├─ @babel/plugin-transform-literals@7.12.1
├─ @babel/plugin-transform-member-expression-literals@7.12.1
├─ @babel/plugin-transform-modules-amd@7.12.1
├─ @babel/plugin-transform-modules-commonjs@7.12.1
├─ @babel/plugin-transform-modules-systemjs@7.12.1
├─ @babel/plugin-transform-modules-umd@7.12.1
├─ @babel/plugin-transform-named-capturing-groups-regex@7.12.1
├─ @babel/plugin-transform-new-target@7.12.1
├─ @babel/plugin-transform-object-super@7.12.1
├─ @babel/plugin-transform-property-literals@7.12.1
├─ @babel/plugin-transform-regenerator@7.12.1
├─ @babel/plugin-transform-reserved-words@7.12.1
├─ @babel/plugin-transform-shorthand-properties@7.12.1
├─ @babel/plugin-transform-spread@7.12.1
├─ @babel/plugin-transform-sticky-regex@7.12.7
├─ @babel/plugin-transform-template-literals@7.12.1
├─ @babel/plugin-transform-typeof-symbol@7.12.1
├─ @babel/plugin-transform-typescript@7.12.1
├─ @babel/plugin-transform-unicode-escapes@7.12.1
├─ @babel/plugin-transform-unicode-regex@7.12.1
├─ @babel/preset-env@7.12.7
├─ @babel/preset-flow@7.12.1
├─ @babel/preset-modules@0.1.4
├─ @babel/preset-typescript@7.12.7
├─ @babel/register@7.12.1
├─ @babel/runtime@7.12.5
├─ @babel/traverse@7.12.9
├─ @endemolshinegroup/cosmiconfig-typescript-loader@1.0.2
├─ @hapi/address@2.1.4
├─ @hapi/bourne@1.3.2
├─ @hapi/hoek@8.5.1
├─ @hapi/joi@15.1.1
├─ @hapi/topo@3.1.6
├─ @mrmlnc/readdir-enhanced@2.2.1
├─ @nodelib/fs.scandir@2.1.3
├─ @nodelib/fs.stat@2.0.3
├─ @nodelib/fs.walk@1.2.4
├─ @oclif/config@1.17.0
├─ @oclif/parser@3.8.5
├─ @oclif/plugin-autocomplete@0.2.0
├─ @oclif/plugin-help@3.2.0
├─ @oclif/plugin-not-found@1.2.4
├─ @oclif/plugin-plugins@1.9.1
├─ @oclif/plugin-warn-if-update-available@1.7.0
├─ @protobufjs/aspromise@1.1.2
├─ @protobufjs/base64@1.1.2
├─ @protobufjs/codegen@2.0.4
├─ @protobufjs/eventemitter@1.1.0
├─ @protobufjs/fetch@1.1.0
├─ @protobufjs/float@1.0.2
├─ @protobufjs/path@1.1.2
├─ @protobufjs/pool@1.1.0
├─ @protobufjs/utf8@1.1.0
├─ @samverschueren/stream-to-observable@0.3.1
├─ @sindresorhus/is@0.7.0
├─ @types/accepts@1.3.5
├─ @types/content-disposition@0.5.3
├─ @types/cookies@0.7.5
├─ @types/cors@2.8.8
├─ @types/ejs@2.7.0
├─ @types/fs-capacitor@2.0.0
├─ @types/graphql-upload@8.0.4
├─ @types/http-assert@1.5.1
├─ @types/http-errors@1.8.0
├─ @types/inquirer@6.5.0
├─ @types/jscodeshift@0.7.1
├─ @types/koa-compose@3.2.5
├─ @types/long@4.0.1
├─ @types/mime@2.0.3
├─ @types/minimatch@3.0.3
├─ @types/node-fetch@2.5.7
├─ @types/normalize-package-data@2.4.0
├─ @types/through@0.0.30
├─ @types/ws@7.4.0
├─ @types/zen-observable@0.8.1
├─ @vue/cli-ui-addon-webpack@4.5.9
├─ @vue/cli-ui-addon-widgets@4.5.9
├─ @vue/cli-ui@4.5.9
├─ @vue/cli@4.5.9
├─ @vue/compiler-sfc@3.0.3
├─ @vue/compiler-ssr@3.0.3
├─ @vue/reactivity@3.0.3
├─ @vue/runtime-core@3.0.3
├─ @vue/runtime-dom@3.0.3
├─ @wry/context@0.4.4
├─ @wry/equality@0.1.11
├─ abbrev@1.1.1
├─ accepts@1.3.7
├─ aggregate-error@3.1.0
├─ ajv@6.12.6
├─ ansi-align@3.0.0
├─ ansi-escapes@3.2.0
├─ ansicolors@0.3.2
├─ any-observable@0.3.0
├─ anymatch@2.0.0
├─ apollo-cache-control@0.11.4
├─ apollo-cache-inmemory@1.6.6
├─ apollo-cache@1.3.5
├─ apollo-client@2.6.10
├─ apollo-codegen-flow@0.36.1
├─ apollo-codegen-scala@0.37.1
├─ apollo-codegen-swift@0.38.1
├─ apollo-codegen-typescript@0.38.1
├─ apollo-datasource@0.7.2
├─ apollo-link-context@1.0.20
├─ apollo-link-error@1.1.13
├─ apollo-link-http@1.5.17
├─ apollo-link-persisted-queries@0.2.2
├─ apollo-link-state@0.4.2
├─ apollo-link-ws@1.0.20
├─ apollo-server-core@2.19.0
├─ apollo-server-errors@2.4.2
├─ apollo-server-express@2.19.0
├─ apollo-tracing@0.12.0
├─ apollo-upload-client@11.0.0
├─ apollo@2.31.1
├─ archive-type@4.0.0
├─ arg@4.1.3
├─ argparse@1.0.10
├─ arr-flatten@1.1.0
├─ array-flatten@1.1.1
├─ array-uniq@1.0.3
├─ asn1@0.2.4
├─ assign-symbols@1.0.0
├─ astral-regex@1.0.0
├─ async-each@1.0.3
├─ async-retry@1.3.1
├─ async@2.6.3
├─ at-least-node@1.0.0
├─ atob@2.1.2
├─ await-to-js@2.1.1
├─ aws-sign2@0.7.0
├─ aws4@1.11.0
├─ babel-core@7.0.0-bridge.0
├─ backo2@1.0.2
├─ balanced-match@1.0.0
├─ base@0.11.2
├─ base64-js@1.5.1
├─ bcrypt-pbkdf@1.0.2
├─ big.js@5.2.2
├─ binary-extensions@1.13.1
├─ bl@1.2.3
├─ bluebird@3.7.2
├─ body-parser@1.19.0
├─ boxen@4.2.0
├─ brace-expansion@1.1.11
├─ braces@2.3.2
├─ browserslist@4.14.7
├─ buffer-alloc-unsafe@1.1.0
├─ buffer-alloc@1.2.0
├─ buffer-crc32@0.2.13
├─ buffer-fill@1.0.0
├─ buffer@5.7.1
├─ builtins@1.0.3
├─ busboy@0.3.1
├─ byline@5.0.0
├─ cache-base@1.0.1
├─ cacheable-request@2.1.4
├─ call-me-maybe@1.0.1
├─ caller-callsite@2.0.0
├─ caller-path@2.0.0
├─ callsites@2.0.0
├─ camel-case@4.1.1
├─ camelcase@5.3.1
├─ caniuse-lite@1.0.30001161
├─ capture-stack-trace@1.0.1
├─ caseless@0.12.0
├─ caw@2.0.1
├─ chardet@0.7.0
├─ chokidar@2.1.8
├─ ci-info@1.6.0
├─ class-utils@0.3.6
├─ cli-boxes@2.2.1
├─ cli-cursor@2.1.0
├─ cli-spinners@2.5.0
├─ cli-truncate@0.2.1
├─ cli-width@3.0.0
├─ clipboard@2.0.6
├─ cliui@6.0.0
├─ clone-response@1.0.2
├─ clone@2.1.2
├─ cmd-shim@3.0.3
├─ code-point-at@1.1.0
├─ collection-visit@1.0.0
├─ color-convert@2.0.1
├─ color-name@1.1.4
├─ colorette@1.2.1
├─ combined-stream@1.0.8
├─ commander@2.20.3
├─ commondir@1.0.1
├─ concat-map@0.0.1
├─ config-chain@1.1.12
├─ configstore@3.1.5
├─ consolidate@0.16.0
├─ constant-case@3.0.3
├─ content-disposition@0.5.3
├─ content-type@1.0.4
├─ convert-source-map@1.7.0
├─ cookie-signature@1.0.6
├─ cookie@0.4.0
├─ copy-descriptor@0.1.1
├─ core-js-compat@3.8.0
├─ core-js@3.8.0
├─ core-util-is@1.0.2
├─ cors@2.8.5
├─ cosmiconfig@5.2.1
├─ create-error-class@3.0.2
├─ crypto-random-string@1.0.0
├─ cssesc@3.0.0
├─ cssfilter@0.0.10
├─ csstype@2.6.14
├─ csv-parser@1.12.1
├─ dashdash@1.14.1
├─ date-fns@1.30.1
├─ decompress-response@3.3.0
├─ decompress-tar@4.1.1
├─ decompress-tarbz2@4.1.1
├─ decompress-targz@4.1.1
├─ decompress-unzip@4.0.1
├─ decompress@4.2.1
├─ deep-extend@0.6.0
├─ deepmerge@4.2.2
├─ defaults@1.0.3
├─ delayed-stream@1.0.0
├─ delegate@3.2.0
├─ deprecated-decorator@0.1.6
├─ destroy@1.0.4
├─ dicer@0.3.0
├─ diff@4.0.2
├─ dot-prop@4.2.1
├─ dotenv@8.2.0
├─ download-git-repo@3.0.2
├─ download@7.1.0
├─ easy-stack@1.0.1
├─ ecc-jsbn@0.1.2
├─ ee-first@1.1.1
├─ ejs@2.7.4
├─ electron-to-chromium@1.3.609
├─ elegant-spinner@1.0.1
├─ emoji-regex@8.0.0
├─ emojis-list@3.0.0
├─ end-of-stream@1.4.4
├─ entities@2.1.0
├─ env-ci@3.2.2
├─ envinfo@7.7.3
├─ es-abstract@1.17.7
├─ escalade@3.1.1
├─ esm@3.2.25
├─ esutils@2.0.3
├─ event-pubsub@4.3.0
├─ eventemitter3@3.1.2
├─ exec-sh@0.2.2
├─ expand-brackets@2.1.4
├─ expand-tilde@2.0.2
├─ express-history-api-fallback@2.2.1
├─ ext-list@2.2.2
├─ ext-name@5.0.0
├─ extend@3.0.2
├─ external-editor@3.1.0
├─ extglob@2.0.4
├─ extract-files@5.0.1
├─ extsprintf@1.3.0
├─ fast-deep-equal@3.1.3
├─ fast-glob@3.2.4
├─ fast-levenshtein@2.0.6
├─ fastq@1.9.0
├─ fd-slicer@1.1.0
├─ figures@3.2.0
├─ filename-reserved-regex@2.0.0
├─ filenamify@2.1.0
├─ fill-range@4.0.0
├─ finalhandler@1.1.2
├─ find-cache-dir@2.1.0
├─ find-up@4.1.0
├─ fkill@6.2.0
├─ flow-parser@0.138.0
├─ for-in@1.0.2
├─ forever-agent@0.6.1
├─ form-data@2.3.3
├─ forwarded@0.1.2
├─ fs-capacitor@2.0.4
├─ fs-constants@1.0.0
├─ fs-exists-sync@0.1.0
├─ fswin@2.17.1227
├─ gaze@1.1.3
├─ generate-function@1.1.0
├─ generate-object-property@1.2.0
├─ generic-names@2.0.1
├─ gensync@1.0.0-beta.2
├─ get-caller-file@2.0.5
├─ get-intrinsic@1.0.1
├─ get-proxy@2.1.0
├─ get-value@2.0.6
├─ getpass@0.1.7
├─ git-clone@0.1.0
├─ git-config-path@1.0.1
├─ git-parse@1.0.4
├─ git-rev-sync@2.1.0
├─ git-up@4.0.2
├─ git-url-parse@11.4.0
├─ glob-to-regexp@0.3.0
├─ glob@7.1.6
├─ globule@1.3.2
├─ good-listener@1.2.2
├─ got@8.3.2
├─ graphql-anywhere@4.2.7
├─ graphql-extensions@0.12.6
├─ graphql-type-json@0.3.2
├─ graphql-upload@8.1.0
├─ graphql@14.7.0
├─ growly@1.3.0
├─ har-schema@2.0.0
├─ har-validator@5.1.5
├─ has-ansi@2.0.0
├─ has-symbol-support-x@1.4.2
├─ has-to-string-tag-x@1.4.1
├─ has-value@1.0.0
├─ hash-sum@2.0.0
├─ hash.js@1.1.7
├─ header-case@2.0.3
├─ homedir-polyfill@1.0.3
├─ hosted-git-info@2.8.8
├─ http-cache-semantics@3.8.1
├─ http-signature@1.2.0
├─ human-signals@1.1.1
├─ icss-replace-symbols@1.1.0
├─ icss-utils@4.1.1
├─ ieee754@1.2.1
├─ ignore-by-default@1.0.1
├─ ignore@5.1.8
├─ import-fresh@2.0.0
├─ import-global@0.1.0
├─ import-lazy@2.1.0
├─ imurmurhash@0.1.4
├─ indexes-of@1.0.1
├─ ini@1.3.5
├─ inquirer@7.3.3
├─ interpret@1.4.0
├─ into-stream@3.1.0
├─ ipaddr.js@1.9.1
├─ is-accessor-descriptor@1.0.0
├─ is-arrayish@0.2.1
├─ is-binary-path@1.0.1
├─ is-callable@1.2.2
├─ is-ci@1.2.1
├─ is-core-module@2.2.0
├─ is-data-descriptor@1.0.0
├─ is-date-object@1.0.2
├─ is-descriptor@1.0.2
├─ is-directory@0.3.1
├─ is-docker@2.1.1
├─ is-extglob@2.1.1
├─ is-installed-globally@0.1.0
├─ is-natural-number@4.0.1
├─ is-negative-zero@2.0.0
├─ is-npm@1.0.0
├─ is-obj@1.0.1
├─ is-object@1.0.1
├─ is-observable@1.1.0
├─ is-path-inside@1.0.1
├─ is-plain-object@2.0.4
├─ is-property@1.0.2
├─ is-redirect@1.0.0
├─ is-retry-allowed@1.2.0
├─ is-stream@1.1.0
├─ is-symbol@1.0.3
├─ is-typedarray@1.0.0
├─ is-windows@1.0.2
├─ isarray@1.0.0
├─ isbinaryfile@4.0.6
├─ isstream@0.1.2
├─ iterall@1.3.0
├─ java-properties@1.0.2
├─ js-message@1.0.7
├─ js-queue@2.0.2
├─ js-tokens@4.0.0
├─ jscodeshift@0.10.0
├─ json-buffer@3.0.0
├─ json-parse-better-errors@1.0.2
├─ json-parse-even-better-errors@2.3.1
├─ json-schema-traverse@0.4.1
├─ json-schema@0.2.3
├─ json-stringify-safe@5.0.1
├─ json5@2.1.3
├─ jsprim@1.4.1
├─ keyv@3.0.0
├─ kind-of@3.2.2
├─ latest-version@3.1.0
├─ launch-editor@2.2.1
├─ leven@3.1.0
├─ lines-and-columns@1.1.6
├─ listr-silent-renderer@1.1.1
├─ listr-update-renderer@0.5.0
├─ listr-verbose-renderer@0.5.0
├─ listr@0.14.3
├─ load-json-file@5.3.0
├─ loader-utils@1.4.0
├─ locate-path@5.0.0
├─ lodash.camelcase@4.3.0
├─ lodash.clonedeep@4.5.0
├─ lodash.debounce@4.0.8
├─ lodash.get@4.4.2
├─ lodash.identity@3.0.0
├─ lodash.pickby@4.6.0
├─ lodash.sortby@4.7.0
├─ lodash.templatesettings@4.2.0
├─ lodash.xorby@4.7.0
├─ lodash@4.17.20
├─ log-symbols@2.2.0
├─ log-update@2.3.0
├─ loglevel@1.7.1
├─ long@4.0.0
├─ lowdb@1.0.0
├─ lower-case@2.0.1
├─ magic-string@0.25.7
├─ make-error@1.3.6
├─ map-visit@1.0.0
├─ media-typer@0.3.0
├─ merge-descriptors@1.0.1
├─ merge-source-map@1.1.0
├─ merge-stream@2.0.0
├─ merge@1.2.1
├─ methods@1.1.2
├─ mime-db@1.44.0
├─ mime@1.6.0
├─ mimic-fn@2.1.0
├─ minimalistic-assert@1.0.1
├─ minimatch@3.0.4
├─ mixin-deep@1.3.2
├─ mkdirp@0.5.5
├─ ms@2.1.2
├─ mute-stream@0.0.8
├─ nanoid@2.1.11
├─ nanomatch@1.2.13
├─ ndjson@1.5.0
├─ neat-csv@2.1.0
├─ negotiator@0.6.2
├─ neo-async@2.6.2
├─ nice-try@1.0.5
├─ node-dir@0.1.17
├─ node-fetch@2.6.1
├─ node-modules-regexp@1.0.0
├─ node-notifier@6.0.0
├─ node-releases@1.1.67
├─ nodemon@1.19.4
├─ nopt@1.0.10
├─ normalize-package-data@2.5.0
├─ normalize-path@3.0.0
├─ normalize-url@2.0.1
├─ npm-conf@1.1.3
├─ number-is-nan@1.0.1
├─ oauth-sign@0.9.0
├─ object-copy@0.1.0
├─ object-path@0.11.5
├─ object.getownpropertydescriptors@2.1.1
├─ once@1.4.0
├─ open@6.4.0
├─ optimism@0.10.3
├─ ora@3.4.0
├─ os-tmpdir@1.0.2
├─ p-cancelable@0.4.1
├─ p-event@2.3.1
├─ p-is-promise@1.1.0
├─ p-limit@2.3.0
├─ p-locate@4.1.0
├─ p-map@2.1.0
├─ p-try@2.2.0
├─ package-json@4.0.1
├─ param-case@3.0.3
├─ parse-git-config@2.0.3
├─ parse-passwd@1.0.0
├─ parse-path@4.0.2
├─ parse-url@5.0.2
├─ pascalcase@0.1.1
├─ password-prompt@1.1.2
├─ path-case@3.0.3
├─ path-dirname@1.0.2
├─ path-exists@4.0.0
├─ path-is-inside@1.0.2
├─ path-key@2.0.1
├─ path-parse@1.0.6
├─ path-to-regexp@0.1.7
├─ path-type@4.0.0
├─ pend@1.2.0
├─ performance-now@2.1.0
├─ picomatch@2.2.2
├─ pid-from-port@1.1.3
├─ pinkie-promise@2.0.1
├─ pinkie@2.0.4
├─ pirates@4.0.1
├─ pkg-dir@3.0.0
├─ portfinder@1.0.28
├─ posix-character-classes@0.1.1
├─ postcss-modules-extract-imports@2.0.0
├─ postcss-modules-local-by-default@3.0.3
├─ postcss-modules-scope@2.2.0
├─ postcss-modules-values@3.0.0
├─ postcss-modules@3.2.2
├─ postcss-selector-parser@6.0.4
├─ postcss-value-parser@4.1.0
├─ postcss@7.0.35
├─ prismjs@1.22.0
├─ private@0.1.8
├─ process-exists@3.1.0
├─ process-nextick-args@2.0.1
├─ proto-list@1.2.4
├─ proxy-addr@2.0.6
├─ ps-list@4.1.0
├─ pseudomap@1.0.2
├─ psl@1.8.0
├─ pstree.remy@1.1.8
├─ punycode@2.1.1
├─ query-string@5.1.1
├─ raw-body@2.4.0
├─ rc@1.2.8
├─ read-pkg@5.2.0
├─ readable-stream@2.3.7
├─ readdirp@2.2.1
├─ recast@0.18.10
├─ rechoir@0.6.2
├─ redeyed@2.1.1
├─ regenerate-unicode-properties@8.2.0
├─ regenerator-runtime@0.13.7
├─ regenerator-transform@0.14.5
├─ regexpu-core@4.7.1
├─ registry-auth-token@3.4.0
├─ registry-url@3.1.0
├─ regjsgen@0.5.2
├─ regjsparser@0.6.4
├─ remove-trailing-separator@1.1.0
├─ repeat-element@1.1.3
├─ request@2.88.2
├─ require-directory@2.1.1
├─ require-main-filename@2.0.0
├─ resolve-from@3.0.0
├─ resolve-url@0.2.1
├─ resolve@1.19.0
├─ responselike@1.0.2
├─ restore-cursor@2.0.0
├─ ret@0.1.15
├─ retry@0.12.0
├─ reusify@1.0.4
├─ rimraf@3.0.2
├─ rss-parser@3.9.0
├─ run-async@2.4.1
├─ run-parallel@1.1.10
├─ rxjs@6.6.3
├─ safer-buffer@2.1.2
├─ sax@1.2.4
├─ sec@1.0.0
├─ seek-bzip@1.0.6
├─ select@1.1.2
├─ semver-diff@2.1.0
├─ semver@5.7.1
├─ sentence-case@3.0.3
├─ serve-static@1.14.1
├─ set-blocking@2.0.0
├─ set-value@2.0.1
├─ shebang-regex@1.0.0
├─ shell-quote@1.7.2
├─ shelljs@0.8.4
├─ shellwords@0.1.1
├─ slice-ansi@2.1.0
├─ snake-case@3.0.3
├─ snapdragon-node@2.1.1
├─ snapdragon-util@3.0.1
├─ sort-keys-length@1.0.1
├─ sort-keys@1.1.2
├─ source-map-resolve@0.5.3
├─ source-map-support@0.5.19
├─ source-map-url@0.4.0
├─ source-map@0.6.1
├─ sourcemap-codec@1.4.8
├─ spdx-correct@3.1.1
├─ spdx-exceptions@2.3.0
├─ split-string@3.1.0
├─ split2@2.2.0
├─ sprintf-js@1.0.3
├─ sshpk@1.16.1
├─ static-extend@0.1.2
├─ steno@0.4.4
├─ streamsearch@0.1.2
├─ strict-uri-encode@1.1.0
├─ string_decoder@1.1.1
├─ string-hash@1.1.3
├─ strip-bom@3.0.0
├─ strip-dirs@2.1.0
├─ strip-final-newline@2.0.0
├─ strip-json-comments@2.0.1
├─ strip-outer@1.0.1
├─ subscriptions-transport-ws@0.9.18
├─ supports-color@5.5.0
├─ symbol-observable@1.2.0
├─ table@5.4.6
├─ tar-stream@1.6.2
├─ taskkill@3.1.0
├─ tasklist@3.1.1
├─ temp@0.8.4
├─ term-size@2.2.1
├─ through@2.3.8
├─ timed-out@4.0.1
├─ tiny-emitter@2.1.0
├─ tmp@0.0.33
├─ to-buffer@1.1.1
├─ to-object-path@0.3.0
├─ to-regex-range@2.1.1
├─ touch@3.1.0
├─ tough-cookie@2.5.0
├─ treeify@1.1.0
├─ trim-repeated@1.0.0
├─ ts-node@8.10.2
├─ tty@1.0.1
├─ tweetnacl@0.14.5
├─ type-fest@0.11.0
├─ type-is@1.6.18
├─ typescript@3.9.7
├─ unbzip2-stream@1.4.3
├─ undefsafe@2.0.3
├─ unicode-canonical-property-names-ecmascript@1.0.4
├─ unicode-match-property-ecmascript@1.0.4
├─ unicode-match-property-value-ecmascript@1.2.0
├─ unicode-property-aliases-ecmascript@1.1.0
├─ union-value@1.0.1
├─ uniq@1.0.1
├─ unique-string@1.0.0
├─ unpipe@1.0.0
├─ unset-value@1.0.0
├─ unzip-response@2.0.1
├─ upath@1.2.0
├─ update-notifier@2.5.0
├─ upper-case@2.0.1
├─ uri-js@4.4.0
├─ urix@0.1.0
├─ url-parse-lax@3.0.0
├─ use@3.1.1
├─ util-deprecate@1.0.2
├─ util.promisify@1.0.1
├─ utils-merge@1.0.1
├─ uuid@3.4.0
├─ validate-npm-package-license@3.0.4
├─ validate-npm-package-name@3.0.0
├─ vary@1.1.2
├─ verror@1.10.0
├─ vscode-jsonrpc@4.0.0
├─ vscode-languageserver-protocol@3.14.1
├─ vscode-languageserver-types@3.14.0
├─ vscode-languageserver@5.2.1
├─ vue-cli-plugin-apollo@0.21.3
├─ vue-codemod@0.0.4
├─ vue@3.0.3
├─ watch@1.0.2
├─ wcwidth@1.0.1
├─ which-module@2.0.0
├─ widest-line@2.0.1
├─ write-file-atomic@2.4.3
├─ ws@5.2.2
├─ xml2js@0.4.23
├─ xmlbuilder@11.0.1
├─ xss@1.0.8
├─ xtend@4.0.2
├─ y18n@4.0.0
├─ yallist@3.1.1
├─ yaml-front-matter@3.4.1
├─ yargs-parser@18.1.3
├─ yargs@15.4.1
├─ yarn@1.22.10
├─ yauzl@2.10.0
├─ yn@3.1.1
└─ zen-observable-ts@0.8.21
Done in 411.09s.

vue-cli の動作確認

$ yarn run vue
yarn run v1.22.5
warning package.json: No license field
$ C:\Users\tomoyan\vuejs_env\node_modules\.bin\vue
Usage: vue <command> [options]
 
Options:
  -V, --version                              output the version number
  -h, --help                                 output usage information
 
Commands:
  create [options] <app-name>                create a new project powered by vue-cli-service
  add [options] <plugin> [pluginOptions]     install a plugin and invoke its generator in an already created project
  invoke [options] <plugin> [pluginOptions]  invoke the generator of a plugin in an already created project
  inspect [options] [paths...]               inspect the webpack config in a project with vue-cli-service
  serve [options] [entry]                    serve a .js or .vue file in development mode with zero config
  build [options] [entry]                    build a .js or .vue file in production mode with zero config
  ui [options]                               start and open the vue-cli ui
  init [options] <template> <app-name>       generate a project from a remote template (legacy API, requires @vue/cli-init)
  config [options] [value]                   inspect and modify the config
  outdated [options]                         (experimental) check for outdated vue cli service / plugins
  upgrade [options] [plugin-name]            (experimental) upgrade vue cli service / plugins
  migrate [options] [plugin-name]            (experimental) run migrator for an already-installed cli plugin
  info                                       print debugging information about your environment
 
  Run vue <command> --help for detailed usage of given command.
 
Done in 1.20s.

vue-cli による Vue.js プロジェクトの作成

$ yarn run vue create vue_project

もしも、以下のような問い合わせが表示された場合は、y (Yes) で答える。

yarn run v1.22.5
warning package.json: No license field
$ C:\Users\tomoyan\vuejs_env\node_modules\.bin\vue create vue_project
?  Your connection to the default yarn registry seems to be slow.
   Use https://registry.npm.taobao.org for faster installation? (Y/n) -> Yes
あなたのデフォルトの yarn レジストリへの接続が遅いようです。
より高速なインストールのために https://registry.npm.taobao.org を使用しますか？

矢印キー (↑ or ↓) で Manually select features を選択して <enter> を押す。

Vue CLI v4.5.9
? Please pick a preset:
  Default ([Vue 2] babel, eslint)
  Default (Vue 3 Preview) ([Vue 3] babel, eslint)
> Manually select features

矢印キー (↑ or ↓) で該当項目を選択して、<space> で選択/選択解除、<a> ですべてをトグル、<i> で選択を反転する。
ここでは Progressive Web App (PWA) Support 以外をすべて選択して <enter> を押す。 

Vue CLI v4.5.9
? Please pick a preset: Manually select features
? Check the features needed for your project:
 (*) Choose Vue version
 (*) Babel
 (*) TypeScript
 ( ) Progressive Web App (PWA) Support
 (*) Router
 (*) Vuex
 (*) CSS Pre-processors
 (*) Linter / Formatter
 (*) Unit Testing
>(*) E2E Testing

プロジェクトを開始する Vue.js のバージョン (ここでは 2.x) を選択して <enter> を押す。

Vue CLI v4.5.9
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
> 2.x
  3.x (Preview)

クラススタイルでコンポーネントを記述する場合は y を入力して <enter> を押す。

Vue CLI v4.5.9
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Choose a version of Vue.js that you want to start the project with 2.x
? Use class-style component syntax? (Y/n) y

TypeScript と一緒に Babel を使用する場合は y を入力して <enter> を押す。

Vue CLI v4.5.9
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Choose a version of Vue.js that you want to start the project with 2.x
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n) y

router に履歴モードを使用する場合は y を入力して <enter> を押す。

Vue CLI v4.5.9
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Choose a version of Vue.js that you want to start the project with 2.x
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) y

矢印キー (↑ or ↓) で CSS プリプロセッサを選択する。
ここでは Sass/SCSS (with node-sass) を選択して <enter> を押す。

Vue CLI v4.5.9
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Choose a version of Vue.js that you want to start the project with 2.x
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
  Sass/SCSS (with dart-sass)
> Sass/SCSS (with node-sass)
  Less
  Stylus

矢印キー (↑ or ↓) で linter / formatter を選択する。
ここでは TSLint (deprecated) を選択して <enter> を押す。

Vue CLI v4.5.9
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Choose a version of Vue.js that you want to start the project with 2.x
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config:
  ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier
> TSLint (deprecated)

矢印キー (↑ or ↓) で該当項目を選択して、<space> で選択/選択解除、<a> ですべてをトグル、<i> で選択を反転する。
Lint の実行タイミングを設定する。
Lint on save (保存時に Lint を実行)
Lint and fix on commit (コミット時の Lint 実行)
ここでは Lint on save を選択して <enter> を押す。

Vue CLI v4.5.9
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Choose a version of Vue.js that you want to start the project with 2.x
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: TSLint
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save
 ( ) Lint and fix on commit

矢印キー (↑ or ↓) で該当項目を選択する。
Unit テスト用パッケージを選択する。
ここでは Mocha + Chai を選択して <enter> を押す。

Vue CLI v4.5.9
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Choose a version of Vue.js that you want to start the project with 2.x
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: TSLint
? Pick additional lint features: Lint on save
? Pick a unit testing solution: (Use arrow keys)
> Mocha + Chai
  Jest

矢印キー (↑ or ↓) で該当項目を選択する。
E2E テスト用パッケージを選択する。
ここでは Cypress (Chrome only) を選択して <enter> を押す。

Vue CLI v4.5.9
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Choose a version of Vue.js that you want to start the project with 2.x
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: TSLint
? Pick additional lint features: Lint on save
? Pick a unit testing solution: Mocha
? Pick an E2E testing solution: (Use arrow keys)
> Cypress (Chrome only)
  Nightwatch (WebDriver-based)
  WebdriverIO (WebDriver/DevTools based)

矢印キー (↑ or ↓) で該当項目を選択する。
Babel、ESLint、etc… の設定をどこに残すか？を選択する。(専用の設定ファイル / package.json)
ここでは package.json を選択して <enter> を押す。

Vue CLI v4.5.9
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Choose a version of Vue.js that you want to start the project with 2.x
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: TSLint
? Pick additional lint features: Lint on save
? Pick a unit testing solution: Mocha
? Pick an E2E testing solution: Cypress
? Where do you prefer placing config for Babel, ESLint, etc.?
  In dedicated config files
> In package.json

これを将来のプロジェクトのプリセットとして保存する場合は y を入力して <enter> を押す。

Vue CLI v4.5.9
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Choose a version of Vue.js that you want to start the project with 2.x
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: TSLint
? Pick additional lint features: Lint on save
? Pick a unit testing solution: Mocha
? Pick an E2E testing solution: Cypress
? Where do you prefer placing config for Babel, ESLint, etc.? In package.json
? Save this as a preset for future projects? (y/N) y

プリセットに名前を付けて保存する。
ここでは vue_project_preset と入力して <enter> を押す。

Vue CLI v4.5.9
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Choose a version of Vue.js that you want to start the project with 2.x
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: TSLint
? Pick additional lint features: Lint on save
? Pick a unit testing solution: Mocha
? Pick an E2E testing solution: Cypress
? Where do you prefer placing config for Babel, ESLint, etc.? In package.json
? Save this as a preset for future projects? Yes
? Save preset as: vue_project_preset

矢印キー (↑ or ↓) で該当項目を選択する。
依存関係をインストールするときに使用するパッケージマネージャーを選択する。
ここでは Use Yarn を選択して <enter> を押す。

Vue CLI v4.5.9
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Choose a version of Vue.js that you want to start the project with 2.x
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: TSLint
? Pick additional lint features: Lint on save
? Pick a unit testing solution: Mocha
? Pick an E2E testing solution: Cypress
? Where do you prefer placing config for Babel, ESLint, etc.? In package.json
? Save this as a preset for future projects? Yes
? Save preset as: vue_project_preset
? Pick the package manager to use when installing dependencies: (Use arrow keys)
> Use Yarn
  Use NPM

プロジェクトの作成処理が行われる。

Vue CLI v4.5.4
✨  Creating project in C:\Users\tomoyan\vuejs_env\vue_project.
�  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...
 
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@2.1.3: The platform "win32" is incompatible with this module.
info "fsevents@2.1.3" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@1.2.13: The platform "win32" is incompatible with this module.
info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation.
[###########################################################################################] 1250/1250[3/4] Linking dependencies...
 
success Saved lockfile.
�  Invoking generators...
�  Installing additional dependencies...
[-/6] ⠠ waiting...
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@2.1.3: The platform "win32" is incompatible with this module.
info "fsevents@2.1.3" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@1.2.13: The platform "win32" is incompatible with this module.
info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
⚓  Running completion hooks...
 
�  Generating README.md...
 
�  Successfully created project vue_project.
�  Get started with the following commands:
 
 $ cd vue_project
 $ yarn serve
 
 WARN  Skipped git commit due to missing username and email in git config.
You will need to perform the initial commit yourself.
 
Done in 799.98s.

Vue.js プロジェクトの実行

プロジェクトのディレクトリに入る。

$ cd vue_project

プロジェクトの実行。

$ yarn serve
yarn run v1.22.4
warning ..\package.json: No license field
$ vue-cli-service serve
 INFO  Starting development server...
Starting type checking and linting service...
Using 1 worker with 2048MB memory limit
98% after emitting CopyPlugin
 
 DONE  Compiled successfully in 12096ms                                                         22:18:21
No type errors found
No lint errors found
Version: typescript 3.9.7, tslint 5.20.1
Time: 8680ms
 
  App running at:
  - Local:   http://localhost:8080/
  - Network: unavailable
 
  Note that the development build is not optimized.
  To create a production build, run yarn build.

http://localhost:8080/ にアクセスする。
Vue.js App

メモ

Compass を有効にする。

$ yarn add compass-mixins
yarn add v1.22.4
warning ..\package.json: No license field
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@2.1.3: The platform "win32" is incompatible with this module.
info "fsevents@2.1.3" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@1.2.13: The platform "win32" is incompatible with this module.
info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning "@vue/cli-plugin-e2e-cypress > eslint-plugin-cypress@2.11.1" has unmet peer dependency "eslint@>= 3.2.1".
warning "@vue/cli-plugin-unit-mocha > mochapack@1.1.15" has unmet peer dependency "webpack@^4.0.0".
warning " > sass-loader@8.0.2" has unmet peer dependency "webpack@^4.36.0 || ^5.0.0".
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ compass-mixins@0.12.10
info All dependencies
└─ compass-mixins@0.12.10
Done in 24.40s.

パッケージの追加

Handsontable - スプレッドシートのルックアンドフィールを備えた JavaScript/HTML5 データグリッドコンポーネント

トラブルシューティング

Vue CLI v4.5.9
✨  Creating project in C:\Users\tomoyan\vuejs_env\vue_project.
🗃  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...

info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
error https://registry.npm.taobao.org/@types/glob/download/@types/glob-7.1.3.tgz: Integrity check failed for "@types/glob" (computed integrity doesn't match our records, got "sha512-vcfuiIxogLV4DlGBHIUOwI0IbrJ8HWPc4MU7HzviGeNho/UJDfi6B5p3sHeWIQ0KGIU0Jpxi5ZHxemQfLkkAwQ== sha1-OWCDLT8VdBCDQtr9OmezMsCWnfE=")
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
error https://registry.npm.taobao.org/@types/parse-json/download/@types/parse-json-4.0.0.tgz: Integrity check failed for "@types/parse-json" (computed integrity doesn't match our records, got "sha512-aOIos8bujGN93/8Ox/jPLh7RwVnPEysynVFE+fQZyg6jKELEHwzgKdLRFHUgXJL6kylijVSBC4BvN9OmsB48Rw== sha1-vjX1Qlvh9/bHRxhPmKeIy5lHfuA=")
 ERROR  command failed: yarn
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

参考文献

yarnとは - Qiita
yarnチートシート - Qiita
Windows10 に scoop で nvm と yarn をインストールする - Qiita
yarnpkg/assets: Yarn logo and assets
Sass を気軽にインストール - Qiita
フロントエンド開発の３ステップ（npmことはじめ） - Qiita

ドキュメント | Yarn
CLI の紹介 | Yarn
Migrating from npm | Yarn

【VueJS+yarn】Vue CLIを使ってvueプロジェクトの作成をする - Qiita

付録


javascript/yarn.txt · 最終更新: 2021/06/13 00:52 by ともやん

ページ用ツール

特に明示されていない限り、本Wikiの内容は次のライセンスに従います： CC Attribution 4.0 International
CC Attribution 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki