目次
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 よりも処理が高速である。
インストール
Linux
anyenv をインストールする。
anyenv - rbenv スタイルのオールインワン環境マネージャー (Linux)
anyenv - anyenv-update (anyenv とセットで必ずインストールを推奨)
anyenv - nodenv のインストール ← ここまでの手順を済ませてから…🤔
$ anyenv update
Updating 'anyenv'... Updating 'anyenv/anyenv-update'... Updating 'nodenv'... Updating 'nodenv/node-build'... | From https://github.com/nodenv/node-build | 8eb08bb0..eaefcd83 master -> origin/master | * [new tag] v4.9.90 -> v4.9.90 Updating 'nodenv/nodenv-vars'... Updating 'anyenv manifest directory'...
node のインストール
$ nodenv install 20.11.1
Downloading node-v20.11.1-linux-x64.tar.gz... -> https://nodejs.org/dist/v20.11.1/node-v20.11.1-linux-x64.tar.gz Installing node-v20.11.1-linux-x64... Installed node-v20.11.1-linux-x64 to /home/tomoyan/.anyenv/envs/nodenv/versions/20.11.1
$ nodenv rehash $ nodenv global 20.11.1 $ nodenv versions
* 20.11.1 (set by /home/tomoyan/.anyenv/envs/nodenv/version)
$ node -v
v20.11.1
$ npm -v
10.2.4
$ npx -v
10.2.4
$ npm -g list
/home/tomoyan/.anyenv/envs/nodenv/versions/20.11.1/lib ├── corepack@0.23.0 └── npm@10.2.4
yarn のインストール
$ npm install -g yarn
added 1 package in 4s
$ exec $SHELL -l $ yarn -v
1.22.22
プロジェクトの yarn バージョンをセット🤔
$ yarn set version stable
➤ YN0000: You don't seem to have Corepack enabled; we'll have to rely on yarnPath instead ➤ YN0000: Downloading https://repo.yarnpkg.com/4.9.1/packages/yarnpkg-cli/bin/yarn.js ➤ YN0000: Saving the new release in .yarn/releases/yarn-4.9.1.cjs ➤ YN0000: Done with warnings in 8s 658ms
$ yarn -v
4.9.1
Windows
Scoop によるインストール。
Node.js をインストールする。
nvm (Node Version Manager)、および、Node.js - サーバーサイド JavaScript 環境 のインストールについては、Node.js - サーバーサイド JavaScript 環境 | Windows - nvm-windows 編 を参照のこと。
$ scoop install nvm $ nvm install 14.17.5 64 $ nvm use 14.17.5 64
Node.js の動作確認。
$ node --version
v14.17.5
Yarn をインストールする。
$ scoop install yarn
Installing 'yarn' (1.22.19) [64bit] yarn-v1.22.19.tar.gz (1.2 MB) [===============================================================================] 100% Checking hash of yarn-v1.22.19.tar.gz ... ok. Extracting yarn-v1.22.19.tar.gz ... done. Linking ~\scoop\apps\yarn\current => ~\scoop\apps\yarn\1.22.19 Persisting cache Persisting global Persisting mirror Running post_install script... yarn config v1.22.19 success Set "cache-folder" to "C:\\Users\\tomoyan\\scoop\\apps\\yarn\\current\\cache". Done in 0.17s. yarn config v1.22.19 success Set "yarn-offline-mirror" to "C:\\Users\\tomoyan\\scoop\\apps\\yarn\\current\\mirror". Done in 0.13s. yarn config v1.22.19 success Set "global-folder" to "C:\\Users\\tomoyan\\scoop\\apps\\yarn\\current\\global". Done in 0.13s. yarn config v1.22.19 success Set "prefix" to "C:\\Users\\tomoyan\\scoop\\apps\\yarn\\current\\global". Done in 0.12s. 'yarn' (1.22.19) was installed successfully!
Yarn のバージョン確認。
$ yarn --version
1.22.19
もしも、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 |
Yarn による React アプリ開発
creat-react-app のインストール
$ yarn global add create-react-app
yarn global v1.22.19 [1/4] Resolving packages... warning create-react-app > tar-pack > tar@2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap. [2/4] Fetching packages... [3/4] Linking dependencies... [4/4] Building fresh packages... success Installed "create-react-app@5.0.1" with binaries: - create-react-app Done in 11.09s.
$ npx create-react-app haruoworld
Creating a new React app in C:\Users\tomoyan\haruoworld. Installing packages. This might take a couple of minutes. Installing react, react-dom, and react-scripts with cra-template... > core-js@3.23.5 postinstall C:\Users\tomoyan\haruoworld\node_modules\core-js > node -e "try{require('./postinstall')}catch(e){}" > core-js-pure@3.23.5 postinstall C:\Users\tomoyan\haruoworld\node_modules\core-js-pure > node -e "try{require('./postinstall')}catch(e){}" + cra-template@1.2.0 + react@18.2.0 + react-scripts@5.0.1 + react-dom@18.2.0 added 1403 packages from 621 contributors in 470.196s 203 packages are looking for funding run `npm fund` for details Initialized a git repository. Installing template dependencies using npm... npm WARN deprecated source-map-resolve@0.6.0: See https://github.com/lydell/source-map-resolve#deprecated npm WARN @apideck/better-ajv-errors@0.3.6 requires a peer of ajv@>=8 but none is installed. You must install peer dependencies yourself. npm WARN fork-ts-checker-webpack-plugin@6.5.2 requires a peer of typescript@>= 2.7 but none is installed. You must install peer dependencies yourself. npm WARN tsutils@3.21.0 requires a peer of typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta but none is installed. You must install peer dependencies yourself. npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.2 (node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) + web-vitals@2.1.4 + @testing-library/user-event@13.5.0 + @testing-library/jest-dom@5.16.4 + @testing-library/react@13.3.0 added 52 packages from 109 contributors in 41.81s 203 packages are looking for funding run `npm fund` for details Removing template package using npm... npm WARN @apideck/better-ajv-errors@0.3.6 requires a peer of ajv@>=8 but none is installed. You must install peer dependencies yourself. npm WARN fork-ts-checker-webpack-plugin@6.5.2 requires a peer of typescript@>= 2.7 but none is installed. You must install peer dependencies yourself. npm WARN tsutils@3.21.0 requires a peer of typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta but none is installed. You must install peer dependencies yourself. npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.2 (node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) removed 1 package and audited 1455 packages in 19.97s 203 packages are looking for funding run `npm fund` for details found 1 high severity vulnerability run `npm audit fix` to fix them, or `npm audit` for details Git commit not created Error: Command failed: git commit -m "Initialize project using Create React App" at checkExecSyncError (child_process.js:760:11) at execSync (child_process.js:833:15) at tryGitCommit (C:\Users\tomoyan\haruoworld\node_modules\react-scripts\scripts\init.js:62:5) at module.exports (C:\Users\tomoyan\haruoworld\node_modules\react-scripts\scripts\init.js:350:25) at [eval]:3:14 at Script.runInThisContext (vm.js:134:12) at Object.runInThisContext (vm.js:310:38) at internal/process/execution.js:81:19 at [eval]-wrapper:6:22 at evalScript (internal/process/execution.js:80:60) { status: 128, signal: null, output: [ null, null, null ], pid: 18120, stdout: null, stderr: null } Removing .git directory... Success! Created haruoworld at C:\Users\tomoyan\haruoworld Inside that directory, you can run several commands: npm start Starts the development server. npm run build Bundles the app into static files for production. npm test Starts the test runner. npm run eject Removes this tool and copies build dependencies, configuration files and scripts into the app directory. If you do this, you can’t go back! We suggest that you begin by typing: cd haruoworld npm start Happy hacking!
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/ にアクセスする。
メモ
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.
パッケージの追加
トラブルシューティング
error `--global` has been deprecated.
Yarn でのグローバルへのインストールは yarn global add
である🤔
$ yarn install @google-cloud/functions-framework -g
yarn install v1.22.19 info No lockfile found. error `--global` has been deprecated. Please run "yarn global add @google-cloud/functions-framework" instead. info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
$ yarn global add @google-cloud/functions-framework
yarn global v1.22.19 [1/4] Resolving packages... [2/4] Fetching packages... [3/4] Linking dependencies... [4/4] Building fresh packages... success Installed "@google-cloud/functions-framework@3.1.3" with binaries: - functions-framework - functions-framework-nodejs Done in 9.32s.
その他
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.
参考文献
Cache strategies | Yarn
enableGlobalCache - Settings (.yarnrc.yml) | Yarn