lisz-works

技術と興味の集合体

NuxtプロジェクトをPullしたら1番はじめにやること

【スポンサーリンク】

Nuxt.js

Nuxt.jsのプロジェクトをgitで管理して、他のPCでCloneしたときのこと。
ライブラリが不足して動かない。

これを解決するために、1番はじめにやることについてです!

gitのpushしているもの

ライブラリなどは省いたものをgitで管理しています。

こんな感じ。

作成プロジェクト Cloneしたプロジェクト
store store
static static
plugins plugins
pages pages
node_modules ★なし★
assets assets
components components
middleware middleware
layouts layouts
test test
.babelrc .babelrc
.editorconfig .editorconfig
.gitignore .gitignore
jest.config.js jest.config.js
.eslintrc.js .eslintrc.js
nuxt.config.js nuxt.config.js
package-lock.json package-lock.json
package.json package.json
README.md README.md
.prettierrc .prettierrc

これでnpm run devはエラーが出る

当たり前だが、このままnpm run devで実行するとエラーが出る。
本来あるべきモジュールがない状態で動かそうとしているので当たり前だ。

こんな感じ。

表示を開く

C:\work\firebase-nuxt-sample>npm run dev

> TestNuxtProject@1.0.0 dev C:\work\firebase-nuxt-sample
> nuxt

'nuxt' は、内部コマンドまたは外部コマンド、
操作可能なプログラムまたはバッチ ファイルとして認識されていません。
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! TestNuxtProject@1.0.0 dev: `nuxt`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the TestNuxtProject@1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\lis\AppData\Roaming\npm-cache\_logs\2019-03-09T08_40_54_784Z-debug.log

もはやnuxtすらない状態である。

Nuxtのモジュールをインストールする

ということでモジュールを追加していく。

npm install --save nuxt

を実行します。

表示を開く

C:\work\firebase-nuxt-sample>npm install --save nuxt

> nodemon@1.18.10 postinstall C:\work\firebase-nuxt-sample\node_modules\nodemon
> node bin/postinstall || exit 0


> nuxt@2.4.5 postinstall C:\work\firebase-nuxt-sample\node_modules\nuxt
> opencollective || exit 0


                                     :-:
                                   .==-+:
                                  .==. :+- .-=-
                                 .==.   :==++-+=.
                                :==.     -**: :+=.
                               :+-      :*+++. .++.
                              :+-      -*= .++: .=+.
                             -+:      =*-   .+*: .=+:
                            -+:     .=*-     .=*-  =+:
                          .==:     .+*:        -*-  -+-
                         .=+:.....:+*-.........:=*=..=*-
                         .-=------=++============++====:

                          Thanks for installing nuxtjs
                 Please consider donating to our open collective
                        to help us maintain this package.

                           Number of contributors: 172
                              Number of backers: 179
                            Annual budget: US$ 46,381
                           Current balance: US$ 13,430

             Donate: https://opencollective.com/nuxtjs/donate

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.7 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.7: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ nuxt@2.4.5
added 1592 packages from 875 contributors and audited 33188 packages in 72.818s
found 63 low severity vulnerabilities
  run `npm audit fix` to fix them, or `npm audit` for details

node_modulesが追加される

nuxtのインストールを行うと、プロジェクト内に「node_modulesフォルダ」が追加されています!

node_modulesフォルダが追加される

中を見ると、create-nuxt-appしたときみたいに、モジュールが沢山入っています!

おそらく元通りでしょうか!

改めて実行する

改めて

npm run dev

してみます。

表示を開く

C:\work\firebase-nuxt-sample\pages\index.vue
   6:24  warning  Expected 1 line break before closing bracket, but no line breaks found  vue/html-closing-bracket-newline
  15:66  warning  Expected 1 space before '}}', but not found                             vue/mustache-interpolation-spacing

✖ 2 problems (0 errors, 2 warnings)
  0 errors and 2 warnings potentially fixable with the --fix option.

                                                                             friendly-errors 17:46:59
You may use special comments to disable some warnings.                       friendly-errors 17:46:59
Use // eslint-disable-next-line to ignore the next line.                     friendly-errors 17:46:59
Use /* eslint-disable */ to ignore all warnings in a file.                   friendly-errors 17:46:59
i Waiting for file changes                                                                   17:46:59

   ╭─────────────────────────────────────────────╮
   │                                             │
   │   Nuxt.js v2.4.5                            │
   │   Running in development mode (universal)   │
   │   Memory usage: 197 MB (RSS: 330 MB)        │
   │                                             │
   │   Listening on: http://localhost:3000       │
   │                                             │
   ╰─────────────────────────────────────────────╯

いつものlocalhost:3000にアクセスしてね表示まで出ました!

アクセスすると、ちゃんと表示することができました!

表示の確認

あとがき

Nuxtのプロジェクトをgit clone後に動かすための方法についてでした!

超絶初心者が故に、こんなことにすら躓いています……

よくよく考えたら簡単にわかりそうな話ですが、知らないが故に

「なにこれできない……」

と一人ビクビクしていました(笑)

もし同じように困っていたら試してみてください!

勉強中に書いている記事はコチラ。

www.lisz-works.com

www.lisz-works.com