| ページ | 日付 |
|---|---|
| Raspberry Pi (ラズベリー パイ) | 2021/01/19 10:06 |
| AliExpress (アリエクスプレス) | 2021/01/17 15:25 |
| リビジョン コード | 2021/01/17 11:25 |
| MicroPython - マイクロコントローラー向けに最適化された Python | 2021/01/15 22:10 |
| SD メモリーカード | 2021/01/10 13:00 |
| Arduino (アルドゥイーノ) | 2021/01/08 00:27 |
| ハードウェア関連 | 2021/01/06 20:39 |
| Wi-Fi - 無線LAN | 2021/01/05 14:28 |
| ネットワーク関連 | 2021/01/05 14:27 |
本家: 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 よりも処理が高速である。
ヤ～ンばか～ん…😅💦💦💦 (※これはイメージです！！)
んふ～ん🎵 そこはお耳なの んふ～ん🎵…
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
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 (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 |
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.
$ 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.
$ 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.
プロジェクトのディレクトリに入る。
$ 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:8281/ - Network: unavailable Note that the development build is not optimized. To create a production build, run yarn build.
http://localhost:8281/ にアクセスする。
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.
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.
