JavaScript

nuxt.jsで簡単にweb制作をしてみる!

nuxt.jsで簡単にweb制作をしてみる!


こんにちはYoshinoです。
今回はnuxt.jsで簡単に、そしてパフォーマンスの良いポートフォリオサイトを作ってみましょう!
まずは、公式ドキュメントを参照しながらインストールしてみてください。


インストール

npx create-nuxt-app nuxt-my-app

cd my app 

npm install 

npm run dev


scssを使う場合はこちらも入れておきましょう。

npm install -D sass sass-loader@10


nuxt.config.jsに追記

css: [
  { src: '~/assets/scss/main.scss' },
],


componentsディレクトリ配下にHeader.vue,Footer.vueを作成します。
"layouts/default.vue" で共通パーツを読み込んであげたら準備は完了です。

ここからはオリジナルのデザインやウェブアニメーションを組み合わせてお好きなウェブサイトを作ってみてくださいね!