CAUTION

この記事は、2019/03/19にnoteに投稿した「vueのインストール絶対完了させるメモ」「vue-cli3(webpack4)で出たエラーとやったこと」をVue CLI4版に加筆修正しまとめたものです。

【絶対完了させるメモ2020】Vue(Vue CLI4)のインストール・関連エラーALLまとめ

v4.4.1での環境構築フローと、主なプラグインのインストール方法、過去アップグレードした際に出たエラーの対処法のまとめです。

インストール方法

まずはグローバルに登録

npm install -g @vue/cli @vue/cli-service-global
vue -V

バージョン確認しておきましょう。

projectを作成

任意のディレクトリで

vue create project-name

いくつかの質問に答えるだけ。

Creating a Project | Vue CLI(opens new window)

質問に答える

  1. Please pick a preset:

Vue(Vue CLI4)のインストールからエラーまでALLまとめ|インストール手順1

「Manually select features」を選択すると諸々個別で設定ができます。

  1. Check the features needed for your project:

Vue(Vue CLI4)のインストールからエラーまでALLまとめ | インストール手順2

  1. Use history mode for router? (Requires proper server setup for index fallback in production)

Vue(Vue CLI4)のインストールからエラーまでALLまとめ | インストール手順3

  1. Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)

Vue(Vue CLI4)のインストールからエラーまでALLまとめ | インストール手順4

ものによるけれど、Babel、Router、CSS Pre-processors、Linter / Formatter、(Vuex)あたりは入れておいた方が良いかも。

  1. Pick a linter / formatter config: (Use arrow keys)

Vue(Vue CLI4)のインストールからエラーまでALLまとめ | インストール手順5

  1. Pick additional lint features:

Vue(Vue CLI4)のインストールからエラーまでALLまとめ | インストール手順6

  1. Where do you prefer placing config for Babel, ESLint, etc.?

Vue(Vue CLI4)のインストールからエラーまでALLまとめ | インストール手順7

  1. Save this as a preset for future projects? (y/N)

Vue(Vue CLI4)のインストールからエラーまでALLまとめ | インストール手順8

この設定を保存しておきたいなら「y」。

Vue(Vue CLI4)のインストールからエラーまでALLまとめ | インストール中

インストール完了です。

localhost起動

cd project-name
npm run serve

で起動。

Vue(Vue CLI4)のインストールからエラーまでALLまとめ - 起動画面

おしまい、簡単です。

主なプラグインインストール

pug

npm i pug pug-plain-loader -D

2系からのアップグレードの場合

npm uninstall pug-loader -D

Getting Started | pug(opens new window)

vuetify

vue add vuetify

styleを変える場合

npm i stylus stylus-loader style-loader css-loader -D

Vuetify(opens new window)

vue-axios

npm install axios vue-axios -S

src/main.js

import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)

imcvampire/vue-axios | GitHub(opens new window)

エラー集

インストールがうまくいかなかった場合

npm install @vue/cli
npx vue create project-name

パスが通っていない時

export PATH=$PATH:~/.npm-global/bin/

Error: Cannot find module 'webpack/bin/config-yargs'

npm run dev、npm run serve、またはnpm installした時に

Error: Cannot find module 'webpack/bin/config-yargs'

が出た場合。

  1. webpack-cliを追加
npm i -D webpack-cli
  1. バージョン確認

package.json内の

  • webpack
  • webpack-cli
  • webpack-dev-server

のバージョンが最新になっているか確認。

npm i -D webpack@latest
npm i -D webpack-cli@latest
npm i -D webpack-dev-server@latest

または

brew reinstall node

Permissionあれこれ言われた場合

  1. sudo chown -R $(whoami) $(npm config get prefix)/{lib/node_modules,bin}
npm config get prefix
sudo chown -R $(whoami) $(npm config get prefix)/{lib/node_modules,bin}
  1. export PATH
mkdir ~/.npm-global
npm config set prefix '~/.npm-global'
export PATH=~/.npm-global/bin:$PATH
source ~/.profile
  1. brew update
sudo chown -R $USER /usr/local
brew update

ダメだった場合、

brew doctor
brew link node
brew cleanup
brew link node
brew update

DeprecationWarning: Tapable.plugin is deprecated. Use new API on .hooks instead

DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead

と出た場合。

npm i -D copy-webpack-plugin

package.json

・・・
"extract-text-webpack-plugin": "^4.0.0-beta.0",
・・・

Using request for node-pre-gyp https download

Using request for node-pre-gyp https download

と出た場合。

npm i sqlite3 --build-from-source

Error: Cannot find module 'eslint-plugin-vue'

Error: Cannot find module 'eslint-plugin-vue'

と出た場合。

npm install --save eslint eslint-plugin-vue@next eslint-config-vue

packageのアップデート(個人開発でない場合は要確認)

npm i -g npm-check-updates
ncu
ncu -u

Error: No ESLint configuration found.

Error: No ESLint configuration found.

と出た場合。

eslint --init

その他の対処法

npmのキャッシュをクリアしてみる

npm cache clean
npm i
npm cache verify

他のプロセスをkillしてみる

killall node

node_modulesを入れ直してみる

rm -r node_modules
npm install

packageの最新を調べる

npm i -g npm-check-updates

調べる

ncu

アップデート

ncu -u
npm i