Go to Qiita Advent Calendar 2024 Top
LoginSignup
2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@sky0621

Linux(ubuntu)環境でVue.js/Nuxt.js試行（その１：「create-nuxt-app」）

Last updated at Posted at 2019-01-06

お題

表題のお試し。npm付属のnpxでなくyarnを使う方でNuxtプロジェクトを生成するだけ。

対象読者

Linux(ubuntu)環境を開発用の端末に使っていて、これからNuxt.jsを使ってみようと思っている人。

開発環境

# OS

$ cat /etc/os-release 
NAME="Ubuntu"
VERSION="18.04.1 LTS (Bionic Beaver)"

# yarn

$ yarn -v
1.12.3

参考

■Vue.js
https://jp.vuejs.org/v2/guide/

■Nuxt.js
https://ja.nuxtjs.org/guide/

■yarn
https://yarnpkg.com/ja/

実践

yarnでプロジェクト作成

参考

■コマンド実行

※作成するルートディレクトリ名は「try001」とする。

$ yarn create nuxt-app try001
yarn create v1.12.3
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Installed "create-nuxt-app@2.1.1" with binaries:
      - create-nuxt-app
[###################################################################################################################################################################################################] 385/385> Generating Nuxt.js project in /home/sky0621/work/src/go111/src/github.com/sky0621/try-nuxt.js/try001

■プロジェクト名を入力

デフォルトではプロジェクト作成コマンドに渡したルートディレクトリ名が使われる。
例えば、この名前をルートディレクトリ名（try001）と異なるものにしてみる。

? Project name (try001) prj001

プロジェクト作成後に上記の名前が反映される先は下記。

  • README.md
  • package.json（の「"name"」）

■プロジェクト説明文を入力

デフォルトでは「My top-notch Nuxt.js project」となる。
例えば、この説明文を「My-Initial-Nuxt.js-Project」にしてみる。

? Project description (My top-notch Nuxt.js project) My-Initial-Nuxt.js-Project

プロジェクト作成後に上記の説明文が反映される先は下記。

  • README.md
  • package.json（の「"description"」）

■サーバーサイドフレームワークを選択

デフォルトでは「none」が選択される。
今回は「express」を採用してみる。
expressについては下記参照。
https://expressjs.com

? Use a custom server framework 
  none 
❯ express 
  koa 
  adonis 
  hapi 
  feathers 
  micro

■UIフレームワークを選択

デフォルトでは「none」が選択される。
今回は「vuetify」を採用してみる。
vuetifyについては下記参照。
https://vuetifyjs.com/en/getting-started/quick-start

? Use a custom UI framework 
  none 
  bootstrap 
❯ vuetify 
  bulma 
  tailwind 
  element-ui 
  buefy

■レンダリングモードを選択

デフォルトでは「Universal」が選択される。
今回は「Single Page App」を採用してみる。
両者の説明については下記参照。
https://ja.nuxtjs.org/guide/#%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%82%B5%E3%82%A4%E3%83%89%E3%83%AC%E3%83%B3%E3%83%80%E3%83%AA%E3%83%B3%E3%82%B0-%E3%83%A6%E3%83%8B%E3%83%90%E3%83%BC%E3%82%B5%E3%83%AB-ssr-

? Choose rendering mode 
  Universal 
❯ Single Page App

■HTTPクライアントとしてAxiosを使うか否かを選択

デフォルトでは未使用。
今回は使用する。
Axiosモジュールについては下記参照。
https://axios.nuxtjs.org/
Axios自体については下記参照。
https://github.com/axios/axios/blob/master/README.md

? Use axios module 
  no 
❯ yes

■静的検証ツールとしてESLintを使うか否かを選択

デフォルトでは未使用。
今回は使用する。
ESLintについては下記参照。
https://eslint.org

? Use eslint 
  no 
❯ yes

■コードフォーマッターとしてprettierを使うか否かを選択

デフォルトでは未使用。
今回は使用する。
prettierについては下記参照。
https://prettier.io
また、ESLintの方にもコードフォーマット機能はあるのにprettierを使う理由については下記参照。
https://qiita.com/soarflat/items/06377f3b96964964a65d

? Use prettier 
  no 
❯ yes

■プロジェクト作成者を入力

デフォルトでは、Githubアカウント(?)が使われる。
今回はデフォルトのまま。

? Author name (sky0621)

■パッケージマネージャを選択

デフォルトでは「npm」が選択される。
今回は「yarn」を採用。

? Choose a package manager 
  npm 
❯ yarn

■最終結果

? Project name prj001
? Project description My-Initial-Nuxt.js-Project
? Use a custom server framework express
? Use a custom UI framework vuetify
? Choose rendering mode Single Page App
? Use axios module yes
? Use eslint yes
? Use prettier yes
? Author name sky0621
? Choose a package manager yarn
Initialized empty Git repository in /home/sky0621/work/src/go111/src/github.com/sky0621/try-nuxt.js/try001/.git/
yarn install v1.12.3
info No lockfile found.
[1/4] Resolving packages...
warning eslint > file-entry-cache > flat-cache > circular-json@0.3.3: CircularJSON is in maintenance only, flatted is its successor.
[2/4] Fetching packages...
info fsevents@1.2.4: The platform "linux" is incompatible with this module.
info "fsevents@1.2.4" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning " > vuetify@1.4.0" has unmet peer dependency "vue@^2.5.18".
warning " > eslint-loader@2.1.1" has unmet peer dependency "webpack@>=2.0.0 <5.0.0".
warning " > eslint-plugin-vue@4.7.1" has incorrect peer dependency "eslint@^3.18.0 || ^4.0.0".
[4/4] Building fresh packages...
success Saved lockfile.
Done in 12.03s.

  To get started:

    cd try001
    yarn run dev

  To build & start for production:

    cd try001
    yarn run build
    yarn start

Done in 2219.03s.

作成プロジェクトのディレクトリ構造

Nuxt.js独自のディレクトリ構造については下記参照。
https://ja.nuxtjs.org/guide/directory-structure/

try001/
├── README.md
├── assets
│   ├── README.md
│   └── style
│       └── app.styl
├── components
│   ├── Logo.vue
│   ├── README.md
│   └── VuetifyLogo.vue
├── layouts
│   ├── README.md
│   └── default.vue
├── middleware
│   └── README.md
├── node_modules
│   └── 【省略】
│　　　　　　・・・
├── nuxt.config.js
├── package.json
├── pages
│   ├── README.md
│   ├── index.vue
│   └── inspire.vue
├── plugins
│   ├── README.md
│   └── vuetify.js
├── server
│   └── index.js
├── static
│   ├── README.md
│   ├── favicon.ico
│   └── v.png
├── store
│   └── README.md
└── yarn.lock

依存モジュールのバージョン

package.jsonの内容より、以下の通り。

    "nuxt": "^2.0.0",
    "express": "^4.16.3",
    "vuetify": "^1.2.4",
    "@nuxtjs/axios": "^5.0.0"
    "eslint": "^5.0.1",
    "prettier": "1.14.3",

動作確認

yarnで起動

$ cd try001/
$ yarn run dev
yarn run v1.12.3
$ cross-env NODE_ENV=development nodemon server/index.js --watch server
[nodemon] 1.18.9
[nodemon] to restart at any time, enter `rs`
[nodemon] watching: /home/sky0621/work/src/go111/src/github.com/sky0621/try-nuxt.js/try001/server/**/*
[nodemon] starting `node server/index.js`
ℹ Preparing project for development                                                                                                                                                                15:06:29
ℹ Initial build may take a while                                                                                                                                                                   15:06:29
✔ Builder initialized                                                                                                                                                                              15:06:29
✔ Nuxt files generated                                                                                                                                                                             15:06:29

✖ Client
  Compiled with some errors in 11.50s


 ERROR  Failed to compile with 1 errors                                                                                                                                            friendly-errors 15:06:41


 ERROR  in ./layouts/default.vue                                                                                                                                                   friendly-errors 15:06:41

Module Error (from ./node_modules/eslint-loader/index.js):                                                                                                                         friendly-errors 15:06:41

/home/sky0621/work/src/go111/src/github.com/sky0621/try-nuxt.js/try001/layouts/default.vue
   89:1  error  Delete `··`                           prettier/prettier
   90:3  error  Delete `··`                           prettier/prettier
   91:1  error  Replace `······` with `····`          prettier/prettier
   92:1  error  Delete `··`                           prettier/prettier
   93:1  error  Replace `········` with `······`      prettier/prettier
   94:1  error  Delete `··`                           prettier/prettier
   95:1  error  Replace `········` with `······`      prettier/prettier
   96:1  error  Delete `··`                           prettier/prettier
   97:1  error  Replace `··········` with `········`  prettier/prettier
   98:7  error  Delete `··`                           prettier/prettier
   99:1  error  Delete `··`                           prettier/prettier
  100:7  error  Delete `··`                           prettier/prettier
  101:1  error  Delete `··`                           prettier/prettier
  102:7  error  Delete `··`                           prettier/prettier
  103:5  error  Delete `··`                           prettier/prettier
  104:1  error  Replace `····` with `··`              prettier/prettier
  105:1  error  Delete `··`                           prettier/prettier

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

                                                                                                                                                                                   friendly-errors 15:06:41
 @ ./.nuxt/App.js 4:0-47 6:14-23
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi webpack-hot-middleware/client?name=client&reload=true&timeout=30000&path=/__webpack_hmr/client ./.nuxt/client.js
                                                                                                                                                                                   friendly-errors 15:06:41
ℹ Waiting for file changes                                                                                                                                                                         15:06:41

 READY  Server listening on http://127.0.0.1:3000                                                                                                                                                  15:06:41

prettierさんに怒られた。

問題解消

下記を参考に修正。
https://qiita.com/bellx2/items/9ff80594d57ff36fa0b1

$ yarn run lint --fix
yarn run v1.12.3
$ eslint --ext .js,.vue --ignore-path .gitignore . --fix
Done in 1.38s.

再実行

$ yarn run dev
yarn run v1.12.3
$ cross-env NODE_ENV=development nodemon server/index.js --watch server
[nodemon] 1.18.9
[nodemon] to restart at any time, enter `rs`
[nodemon] watching: /home/sky0621/work/src/go111/src/github.com/sky0621/try-nuxt.js/try001/server/**/*
[nodemon] starting `node server/index.js`
ℹ Preparing project for development                                                                                                                                                                15:20:29
ℹ Initial build may take a while                                                                                                                                                                   15:20:29
✔ Builder initialized                                                                                                                                                                              15:20:29
✔ Nuxt files generated                                                                                                                                                                             15:20:29

✔ Client
  Compiled successfully in 10.41s

ℹ Waiting for file changes                                                                                                                                                                         15:20:40

 READY  Server listening on http://127.0.0.1:3000                                                                                                                                                  15:20:40

今度は成功した様子。
「http://localhost:3000/」にアクセスしてみると。

Opera スナップショット_2019-01-06_152226_localhost.png

これにて、プロジェクト作成は終了。
今後は、ここで作ったプロジェクトをいじりながら、Nuxt.js自体やVuetify、Axiosといったところを掘り下げていこう。

2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?