vue.js + NuxtJSを初めてみる

自分なりの解釈で各項目にコメントを入れました。詳細は公式ドキュメントをみてください。

  1. インストール
  2. ディレクトリ構造
  3. 設定
  4. ルーティング
  5. ビュー

インストール

NuxtJS

Nuxt.js はとても簡単に始められます。シンプルなプロジェクトでは必要な依存パッケージは `nuxt` だけです。…

create-nuxt-app

$ npx create-nuxt-app <project-name>
? Project name

? Project description My fine Nuxt.js project

? Author name () 

? Choose the package manager (Use arrow keys)
  パッケージマネージャーを選択します(矢印キーを使用)
❯ Yarn 
  Npm 

? Choose UI framework (Use arrow keys)
  UIフレームワークを選択。自分でcssとか書いていくのがキツイ人は入れてもいい。
❯ None 
  Ant Design Vue 
  Bootstrap Vue 
  Buefy 
  Bulma 
  Element 
  Framevuerk 
  iView 
  Tachyons 
  Tailwind CSS 
  Vuetify.js 

? Choose custom server framework (Use arrow keys)
  カスタムサーバーフレームワークを選択する。推奨されてるやつをとりあえず選択しておく。
❯ None (Recommended) 
  AdonisJs 
  Express 
  Fastify 
  Feathers 
  hapi 
  Koa 
  Micro 

? Choose Nuxt.js modules (Press <space> to select, <a> to toggle all, <i> to invert selection)
  Nuxt.jsモジュールを選択します(選択するには<space>を押し、すべてを切り替えるには<a>、選択を反転するには<i>を押します)
  迷ったら全部選択してみる。
❯◯ Axios
 ◯ Progressive Web App (PWA) Support
 ◯ DotEnv

? Choose linting tools (Press <space> to select, <a> to toggle all, <i> to invert selection)
  リンティングツールを選択する
  必要なので入れましょ。どのツールも入れておいた方が良さげなので全部選択。
❯◯ ESLint
 ◯ Prettier
 ◯ Lint staged files
 ◯ StyleLint

? Choose test framework (Use arrow keys)
  テストフレームワークを選択する
  迷う。とりあえずJestかな。でも個人のサイトでテスト作る必要はないかも。
❯ None 
  Jest 
  AVA 

? Choose rendering mode (Use arrow keys)
  レンダリングモードを選択する
  SSRを推奨していたと思うのでそのまま。
❯ Universal (SSR) 
  Single Page App 

? Choose development tools (Press <space> to select, <a> to toggle all, <i> to invert selection)
  開発ツールを選択する
  とりあえず入れておく。
❯◯ jsconfig.json (Recommended for VS Code)? Author name () 
$ npm run dev
http://localhost:3000/ で確認

Stylelintエラー発生

以下のエラーが表示されている。Stylelintのエラーが既に出ているようです・・・(なぜ)

ERROR StylelintError friendly-errors 15:26:06
No rules found within configuration. Have you provided a “rules” property?
設定ファイルにruresプロパティが存在しない。何も入っていない初期状態です。スケルトンなので入れておいて欲しいところ。
// 変更前
module.exports = {
// add your custom config here
// https://stylelint.io/user-guide/configuration
}

// 変更後
module.exports = {
  "rules": {}
}

これで無事localhostが表示されました。

表示されている内容は pages/index.vue になります。

その他、公式ドキュメントがわかりやすくまとまっているので、こちらへどうぞ

NuxtJS

Nuxt.js はとても簡単に始められます。シンプルなプロジェクトでは必要な依存パッケージは `nuxt` だけです。…

 

次はディレクトリ構造です


Fatal error: Uncaught Error: Call to undefined function set_post_views() in /home/jszk/desnote.com/public_html/wpjs/wp-content/themes/the-thor-child/single.php:658 Stack trace: #0 /home/jszk/desnote.com/public_html/wpjs/wp-includes/template-loader.php(78): include() #1 /home/jszk/desnote.com/public_html/wpjs/wp-blog-header.php(19): require_once('/home/jszk/desn...') #2 /home/jszk/desnote.com/public_html/index.php(17): require('/home/jszk/desn...') #3 {main} thrown in /home/jszk/desnote.com/public_html/wpjs/wp-content/themes/the-thor-child/single.php on line 658