nuxt.js開発環境を作る

nuxt.jsの開発環境を作成は以下の手順でできます。

フォルダを作成しコマンドラインで聞かれる各種設定を選択。

npx create-nuxt-app nuxt-test

npxでcreate-nuxt-appを指定し、この場合はnuxt-testという名前のフォルダを作成しています。cd nuxt-testで作成したフォルダに移動し、npm run devで仮想サーバーを立ち上げます。

また、package.jsonがすでにある場合は以下コマンドでも可能です。該当のフォルダに移動し、

npm install --save nuxt

このコマンドを実行することで、node_modulesディレクトリが生成されます。

nuxt.jsの環境で、デフォルトのレイアウトなどを変更したい場合は、

ディレクトリ直下にapp.htmlを配置し、htmlを変更。スタイルはlayoutsのdefault.vueに記述してあるstyleを変更。ページごとのスタイルなどを編集したい場合は、それぞれのvueファイルの記述を追記・変更すると良いでしょう。共通化したい場合は、app.htmlとdefault.vueに記載するのが鉄則だと思います。

Witten by Masa

情報工学系学部卒のエンジニアです。メインはフロントエンドですが、そのほかにもPython,PHP,GAS,など色んな言語、開発、データ分析、マーケティングなど手広くやってます。