Nuxt.jsの環境構築について、忘れないうちにまとめていきます。
前提条件としてNode.js、homebrew、npmはインストール済みとして進めていきます。
1.ディレクトリを作成。
mkdir nuxt
とりあえずnuxtフォルダを作成します。
ディレクトリ名は任意で大丈夫です。
2.create-nuxt-appでプロジェクトを作成。
npx create-nuxt-app nuxt-sumple
特にエラーがなければ、以下のようにプロジェクトの設定について質問をされます。
Project name: (nuxt-sumple) //これはこのままEnterで問題なし。
Programming language: (Use arrow keys) //初めての方はJavaScriptの方が無難。
❯ JavaScript
TypeScript
Package manager: (Use arrow keys) //Npmを選択
❯ Yarn
Npm
UI framework: (Use arrow keys) // Noneを選択(ただの環境構築が目的なので)
❯ None
Ant Design Vue
BalmUI
Bootstrap Vue
Buefy
Chakra UI
Element
Oruga
Primevue
Tachyons
Tailwind CSS
Windi CSS
Vant
View UI
Vuetify.js
Template engine: (Use arrow keys) //HTMLを選択
❯ HTML
Pug
Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert se
lection) //スペースキーで選択だが、何も選ばない。
❯◯ Axios - Promise based HTTP client
◯ Progressive Web App (PWA)
◯ Content - Git-based headless CMS
Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert sele
ction) //何も選ばない。
❯◯ ESLint
◯ Prettier
◯ Lint staged files
◯ StyleLint
◯ Commitlint
Testing framework: (Use arrow keys) // 何も選ばない。
❯ None
Jest
AVA
WebdriverIO
Nightwatch
Rendering mode: (Use arrow keys) //どちらでも大丈夫。（本来ならダメだが環境構築するだけなので）
❯ Universal (SSR / SSG)
Single Page App
Deployment target: (Use arrow keys) // Staticを選択
❯ Server (Node.js hosting)
Static (Static/Jamstack hosting)
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)
What is your GitHub username? // Enter
? Version control system: None // Noneを選択
これらの設定が終わったら、プロジェクトが作成されて成功すると以下のようになる。
Successfully created project nuxt-sumple
To get started:
cd nuxt-sumple
npm run dev
To build & start for production:
cd nuxt-sumple
npm run build
npm run start
3 プロジェクトを起動する。
プロジェクトを作成して、コマンドの位置をnuxt-sumpleに移動させてから、起動させる。
cd nuxt-sumple
npm run dev
成功すると、
nuxt-sumple@1.0.0 dev
> nuxt
╭───────────────────────────────────────╮
│ │
│ Nuxt @ v2.15.8 │
│ │
│ ▸ Environment: development │
│ ▸ Rendering: server-side │
│ ▸ Target: static │
│ │
│ Listening: http://localhost:3000/ │
│ │
╰───────────────────────────────────────╯
ℹ Preparing project for development 14:13:02
ℹ Initial build may take a while 14:13:02
ℹ Discovered Components: .nuxt/components/readme.md 14:13:02
✔ Builder initialized 14:13:02
✔ Nuxt files generated 14:13:02
✔ Client
Compiled successfully in 5.11s
✔ Server
Compiled successfully in 4.67s
ℹ Waiting for file changes 14:13:09
ℹ Memory usage: 249 MB (RSS: 341 MB) 14:13:09
ℹ Listening on: http://localhost:3000/
[http://localhost:3000]にアクセスして、以下の画面が出れば構築完了です。お疲れ様でした。
4.npm run devでエラーが出た時
nodeのバージョンの違いか何かで、以下のようなエラーが起きることがある。
node:internal/crypto/hash:71
this[kHandle] = new _Hash(algorithm, xofLen);
^
Error: error:0308010C:digital envelope routines::unsupported
中身省略
at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read_file_context:68:3) {
opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
library: 'digital envelope routines',
reason: 'unsupported',
code: 'ERR_OSSL_EVP_UNSUPPORTED'
}
Node.js v18.12.1
とでることがあるので、
export NODE_OPTIONS=--openssl-legacy-provider
をすると、エラーを回避できることが確認できた。