学んだことを忘れないために、一度アウトプットしまする。
環境
実施時の環境
現時点のcreate-nuxt-appの最新版は（v4.0.0）です。
今回実施した環境についてですが、Windows10にWSL2のせて、そこにubunt走らせてます。
なので若干PowerShellやコマンドプロンプトの方とは微妙に違うかもです。
$ npm -v
8.4.0
$ cat /etc/os-release
NAME="Ubuntu"
VERSION="20.04.2 LTS (Focal Fossa)"
ID=ubuntu
ID_LIKE=debian
PRETTY_NAME="Ubuntu 20.04.2 LTS"
VERSION_ID="20.04 "
前準備
node.jsをインスールします。
https://nodejs.org/ja/
プロジェクト生成
create-nuxt-app
$ npx create-nuxt-app helloNuxtjs
helloNuxtjsプロジェクトを生成
プロジェクト名
create-nuxt-app v4.0.0
✨ Generating Nuxt.js project in helloNuxtjs
? Project name: (helloNuxtjs)
プロジェクト名「helloNuxtjs」で良いか聞いてくるので、このままEnter
言語
? Programming language: (Use arrow keys)
❯ JavaScript
TypeScript
使用する言語を聞いています、今回はJavaScriptを選択。
パッケージマネージャ
? Package manager: (Use arrow keys)
Yarn
❯ Npm
パッケージマネージャを何にするか聞いてきます。今回はNpmで
UI
? UI framework: (Use arrow keys)
❯ None
Ant Design Vue
BalmUI
…
UIを選択します、今回は文字出すだけなのでNone
モジュール
? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◯ Axios - Promise based HTTP client
◯ Progressive Web App (PWA)
◯ Content - Git-based headless CMS
nuxtのモジュールを使うときは、選択しますが今回は文字出すだけなので
何も選択しないでEnter
補足
ちなみそれぞれ何を表しているのかざっと解説すると
- Axios - Promise based HTTP client
プロミスベースのHTTPクライアント、NuxtでREST-APIを作るときに使う - Progressive Web App (PWA)
PWAという、ウェブページをスマホのアプリのように利用するもの - Content - Git-based headless CMS
GitベースのCMS、画像とかの資材をGitに置く場合に使いそう
コードレビュー
? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◯ ESLint
◯ Prettier
◯ Lint staged files
◯ StyleLint
◯ Commitlint
Lintingツールを選択します、ソースのタブとか書きぶりを整えてくれるツールです
今回はESLintを選択、
テスト
? Testing framework:
❯ None
Jest
AVA
WebdriverIO
Nightwatch
テスト用フレームワークを選択します、今回は文字出すだけなので、Noneを選択
レンダリング
? Rendering mode:
❯ Universal (SSR / SSG)
Single Page App
SSRを行うとサーバーサイドでJSをレンダリングしてhtmlを吐き出してくれます。
こっちのほうがSEO的には嬉しい。
デプロイ先
? Deployment target: (Use arrow keys)
❯ Server (Node.js hosting)
Static (Static/Jamstack hosting)
レンダリングをサーバーでやるか、静的にやるか。
IDE
? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◯ jsconfig.json (Recommended for VS Code if you're not using typescript)
◯ Semantic Pull Requests
◯ Dependabot (For auto-updating dependencies, GitHub only)
開発に何を使っているか聞いてくるので、jsconfig.jsonを選択
(VSC以外の場合は別途環境に合わせて調べてください)
CI
? Continuous integration:
❯ None
GitHub Actions (GitHub only)
Travis CI
CircleCI
CI指定
補足
CIはざっくり言って試験を自動にしてくれるもの。
今回は、文字を出力するだけなのでNoneとする。
バージョン管理
? Version control system: (Use arrow keys)
❯ Git
None
バージョン管理は、Gitか使ってないかの二択。
Success!!
🎉 Successfully created project helloVue
To get started:
cd helloVue
npm run dev
To build & start for production:
cd helloVue
npm run build
npm run start
Successfullyが出たら成功
生成物確認
$ ls
helloNuxtjs
プロジェクト名のディレクトリができていることを確認。
プロジェクト起動
$ cd helloNuxtjs/
プロジェクト配下に移動
$ npm run dev
で、ローカルにページを立ち上げます。
http://localhost:3000/ に接続して画面が正常に表示されればOKです！
ちなみに、今表示されている画面はindex.vueをいじることで変更することができます。
メッセージを表示してみる。
マスタッシュ構文
<template>
<p>{{ message }}</p>
</template>
<script>
export default {
data: () => ({message: 'Hello World!'})
}
</script>
{{ 変数名 }}でvueのdataオブジェクトをテンプレート（html）に出力することができます。
補足
アロー関数を短縮にして、オブジェクトを返すとき
data: () => {message: 'Hello World!'}
だとエラーになる。
どうやら”{}”が、オブジェクトの”{}”ではなく関数の”{}”と判定されてしまうみたい。
なので大枠を”()”で囲って上げる必要がある。
リンクを設定してみる
<template>
<div>
<p>
<router-link to="/next">次のページ</router-link>
</p>
</div>
</template>
遷移先のページを作成します。「next.vue」を新規に作成しました。
<template>
<div>
<h1>次のページだよ</h1>
</div>
</template>
templateタグ直下のタグは必ず一つではないといけないのでdivタグで囲っています。
divタグを外して、h1とrouter-linkがtemplateの直下に来ると、ルートが2つになってしまうため、「Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.」エラーが発生します。
動作確認
ちゃんと動くか確認します。
次のページリンク押下で、
遷移できたら成功！
アドレスバーにもちゃんとnextが表示されています。
npmとnpxの違い
気になったのでちょっと調べてみる、ざっくり説明。
-
npm
package.jsonに記載されてる、npmのレポジトリを取得。
CLIツールを入れたとき、package.jsonのscriptsにいちいち定義を書かないと駄目。 -
npx
package.jsonに記載しなくても、npxコマンドで勝手にインストールされてるパスを調べて入力したコマンドが存在するか見て実行してくれる。
npxが便利なのは、これをローカルだけじゃなくて、ネットにある未インストールのパッケージをインストールしないで利用できるのが素晴らしい。
最後に
半分自分用のまとめに近いです、理解が間違っている箇所などがあったらご指摘大歓迎です。