vueでページを作ったことがありますが、nuxtはほとんど触ってなかったですが
仕事でガッツリ使っていきそうなので、nuxtをちょっと個人でもゴニョってみます！
nuxt.jsを使って画面表示を行ってみるまでをやっています。
ちょっとだけindex.vueを書き換えてみました。
UIにvuetify.jsを使ってみてます！
確認環境
・macbook pro
・node v13
事前準備
node, npmをインストール
まさかのnodeが入ってなかったのでインストールします。
brew install node
-v オプションでバージョン確認。
node -v
v13.7.0
npm コマンドもnodeインストールと一緒に使えるようになっているので確認します。
npm -v
6.13.6
yarnをインストール
yarnでnodeモジュールを管理しようと思うのでyarnをインストールしました。
npm install -g yarn
yarn いいやーん。
npxをインストール
npxはnpm5.2.0からデフォルトで入っているらしいので確認！
npm -v
6.13.6
あるある😀
npxでプロジェクト作成
下記コマンドでプロジェクトが作成できます。
poc-nuxtはプロジェクト名、好きにつけて大丈夫です。
npx create-nuxt-app poc-nuxt
選べるオプションは下記。
create-nuxt-app v2.12.0
✨ Generating Nuxt.js project in poc-nuxt
? Project name poc-nuxt => プロジェクト名
? Project description My cat's meow Nuxt.js project => プロジェクトの説明
? Author name yasuaki=> 作った人
? Choose the package manager Yarn => パッケージマネージャ(npm or yarn)
? Choose UI framework Vuetify.js => UIフレームワーク
? Choose custom server framework None (Recommended) => サーバーフレームワーク
? Choose Nuxt.js modules (Press <space> to select, <a> to toggle all, <i> to invert selection) => 通信モジュール？ Axiosを選びました。
? Choose linting tools (Press <space> to select, <a> to toggle all, <i> to invert selection) => 静的検証ツール 今回はESLint
? Choose test framework None => テストフレームワーク
? Choose rendering mode Single Page App => SSR or SPA 今回はSPA
エラー発生（未解決）
なんかエラーが出ました。😨
プロジェクトディレクトリはできているので、とりあえず無視。。
gyp ERR! stack at ChildProcess.emit (events.js:321:20)
gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:275:12)
gyp ERR! System Darwin 19.3.0
gyp ERR! command "/usr/local/Cellar/node/13.7.0/bin/node" "/usr/local/Cellar/node/13.7.0/libexec/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--release"
gyp ERR! cwd /Users/xxxx/poc-nuxt/node_modules/fibers
gyp ERR! node -v v13.7.0
gyp ERR! node-gyp -v v5.0.5
gyp ERR! not ok
node-gyp exited with code: 1
ディレクトリ構成
プロジェクト作成時のディレクトリ構成はこんな感じ。
poc-nuxt/
▾ assets/
README.md
variables.scss
▾ components/
Logo.vue
README.md
VuetifyLogo.vue
▾ layouts/
default.vue
error.vue
README.md
▸ middleware/
▸ node_modules/
▾ pages/
index.vue
inspire.vue
README.md
▾ plugins/
README.md
▾ static/
favicon.ico
README.md
v.png
▾ store/
README.md
nuxt.config.js
package.json
README.md
動作確認
初回確認
下記コマンドで立ち上げます。
yarn run dev
立ち上げた後
http://localhost:3000(ローカルホスト)にアクセスすると…
問題なく立ち上がった！
ちょっと書き換えてHello,Worldしてみる。
pages/index.vue が初期ページだと、感が言っているので開いて編集しますw
ここを
<v-card-title class="headline">
Welcome to the Vuetify + Nuxt.js template </v-card-title>
こうする
<v-card-title class="headline">
<h1>Hello, World!!!</h1>
</v-card-title>
デーン！
おわり。👏🏻
今後はページ増やしたり、axios使ったりやってみたいと思います。
コメント