[javascript]nuxt.jsを使ってみた

javascript

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使ったりやってみたいと思います。

コメント

タイトルとURLをコピーしました