Vue.js プロジェクトを作成 #Ruby

はじめに

初めてVue.jsを使用したアプリを開発しているので、
そこで構築手順をアウトプットとして記載して行きたいと思います。^^

流れ

・vue-cliのコマンドでVue.jsのプロジェクトを作成する
　　　・プロジェクトの設定を聞かれるので一つずつ答えていく
・Vue.jsのサーバを起動してブラウザでウェルカム画面を表示する

プロジェクトの作成

ターミナル上で次のコマンドを実装

ターミナル

vue create 　フォルダ名

するとターミナル上に、プリセットを利用するかどうかの質問が表示されます。


? Please pick a preset:
  memo (babel, eslint)
  default (babel, eslint)
❯ Manually select features

今回は自分で設定を選択していきたいので「Manually select features」を選択してEnterを押します。

次に、プロジェクトで使用するライブラリを聞かれます。

? 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

今回は「Vuex」と「Linter / Formatter」を選択します。
スペースキーで選択/解除できますので、その2つを選択した状態でEnterを押します。

次に、linter / formatterの設定を聞かれます。

? Please pick a preset: Manually select features
? Check the features needed for your project: Vuex, Linter
? Pick a linter / formatter config:
  ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
❯ ESLint + Prettier

今回は「ESLint + Prettier」を選択してEnterを押します。

次に、Lintを実行するタイミングを聞かれます。

? Please pick a preset: Manually select features
? Check the features needed for your project: Vuex, Linter
? Pick a linter / formatter config: Prettier
? Pick additional lint features:
❯◉ Lint on save
 ◯ Lint and fix on commit

今回は「Lint on save」を選択してEnterを押します。

次に、ESLintなどの設定ファイルを集約するか各設定ファイルで分けて書くかを聞かれます。

? Please pick a preset: Manually select features
? Check the features needed for your project: Vuex, Linter
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.?
❯ In dedicated config files
  In package.json

今回は「In dedicated config files」を選択してEnterを押します。

次に、パッケージ管理をnpmコマンドかyarnコマンドのどちらを使うかを聞かれます。

? Pick the package manager to use when installing dependencies: (Use arrow keys)
  Use Yarn
❯ Use NPM

今回は「Use NPM」を選択してEnterを押します。

最後に、今回選択した設定をプリセットとして保存しておくかどうかを聞かれます。

? Please pick a preset: Manually select features
? Check the features needed for your project: Vuex, Linter
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Pick the package manager to use when installing dependencies: Use NPM
? Save this as a preset for future projects? (y/N)

今回は「N」を入力してEnterを押します。

これで設定の選択は完了です。
その設定に沿ってプロジェクトの作成処理が走ります。
作成が完了すると次のように表示されます。

Vue CLI v4.5.3
✨  Creating project in /Users/username/workspace/vue-calendar/frontend.
🗃  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...

> fsevents@1.2.13 install /Users/username/workspace/vue-calendar/frontend/node_modules/watchpack-chokidar2/node_modules/fsevents
> node install.js

  SOLINK_MODULE(target) Release/.node
  CXX(target) Release/obj.target/fse/fsevents.o
  SOLINK_MODULE(target) Release/fse.node

...

⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project frontend.
👉  Get started with the following commands:

作成されたディレクトリに移動します。

$ cd 作成したフォルダ名

nodeのバージョンを改めて設定します。
次のコマンドを実行して、今のディレクトリで使用するnodeのバージョンを指定します。

$ nodenv local 14.8.0

nodeのバージョンが14.8.0になっているかを確認します。

$ node -v
v14.8.0

次のコマンドでサーバーを起動します。

$ npm run serve

処理が完了すると次のように表示されます。

DONE  Compiled successfully in 1977ms                                                                                                                                                                  21:29:28


  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.2.110:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

そうしたら、ブラウザでhttp://localhost:8080/ を開いてください。
次の画面が表示されれば成功です。

ここまでで詰まったポイント

全ての設定を終えて作成処理が始まった後に、、

Vue CLI v4.5.3
✨  Creating project in /Users/username/workspace/vue-calendar/frontend.
⚙️  Installing CLI plugins. This might take a while...


added 1193 packages in 2m
🚀  Invoking generators...
📦  Installing additional dependencies...

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! Found: vue@2.6.14
npm ERR! node_modules/vue
npm ERR!   vue@"^2.6.11" from the root project
npm ERR!   peer vue@"^2.0.0" from vuex@3.6.2
npm ERR!   node_modules/vuex
npm ERR!     vuex@"^3.4.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer vue@"3.1.5" from @vue/compiler-sfc@3.1.5
{
npm ERR! node_modules/@vue/compiler-sfc
npm ERR!   peer @vue/compiler-sfc@"^3.0.0-beta.14" from @vue/cli-service@4.5.13
npm ERR!   node_modules/@vue/cli-service
npm ERR!     dev @vue/cli-service@"~4.5.0" from the root project
npm ERR!     3 more (@vue/cli-plugin-eslint, @vue/cli-plugin-router, @vue/cli-plugin-vuex)
npm ERR!   peer @vue/compiler-sfc@"^3.0.8" from vue-loader-v16@16.3.3
{
npm ERR!   node_modules/vue-loader-v16
npm ERR!     optional vue-loader-v16@"npm:vue-loader@^16.1.0" from @vue/cli-service@4.5.13
npm ERR!     node_modules/@vue/cli-service
npm ERR!       dev @vue/cli-service@"~4.5.0" from the root project
npm ERR!       3 more (@vue/cli-plugin-eslint, @vue/cli-plugin-router, @vue/cli-plugin-vuex)
npm ERR!
.
.

 ERROR  command failed: npm install --loglevel error

無数のエラーが発生してしまいました^^;
エラー内容で調べると
この記事にたどり着きなんとか作成できました！
https://qiita.com/saken649/items/ccabb2f34cdac784b383

正直内容は理解できていませんが、
解決に至った流れを記載しておきます🙌

$ vi ~/.vuerc

{
  "useTaobaoRegistry": true, ⇦ false 変更
  "latestVersion": "4.5.13",
  "lastChecked": 1627541270361,
  "packageManager": "npm"
}

trueをfalseに変更してあげる

 "useTaobaoRegistry": false

再度実行するといけました！
vue create フォルダ名

おわりに

Vue.jsやりたてほやほやです。
感じたこと大事だと思ったことはしっかりアウトプットして行きたいと思います^^