Blog

Nuxt.jsをコーディングツールとして使えるか試してみる

2019.03.12Cat:javascript デザイナー

nuxt.jsは静的なHTMLファイルを生成することができるため、コーディングツールとして使えるのではないかと思い、試してみました。

nuxt.jsをコーディングツールとして使うメリットとしては、

  • gulpやwebpackと違い、nuxt.jsはある程度インストール時点で環境が整っているため、環境設定に時間を使わなくて済む
  • Vue.jsを使ったコンポーネント単位のモダンなコーディングが可能
  • 静的な出力だけでなく、SPAへの切り替えも簡単にできる

などが挙げられます。

今回私が導入するときに行ったことを紹介いたします。

↓作ってみたもの

DEMO

インストール

Macの場合はターミナル、Windowsの場合はコマンドプロンプトを開き、cdコマンドでコーディングを行うディレクトリへ移動。

Nuxt.jsのプロジェクトを作成

プロジェクトの設定

インストールが始まるので、しばらく待ちます。

が表示されたら、インストール完了です。
表示されているコマンドを使って制作を始められます。

 

SASSの利用とGlobal CSSの読み込みに対応させる

スタイリングをSASSで行いたい場合は、以下のコマンドを実行します。

外部ファイルとしてSASSを読み込みたい場合は、加えて以下を実行します。

nuxt.config.jsにCSSの読み込みを設定します。

これで、SASSの利用と、Global CSSの読み込みができるようになりました。SASSの変数やmixinなどを共通でincludeして利用したい場合は、上記のようにstyle-resourcesモジュールを使います。

各ページやモジュールのstyleをSASSで記述したい場合は、styleにlang=”scss”属性を追加することでSASSを利用できます。

styleの影響範囲にをコンポーネント内に限定する場合は、styleにscoped属性を付けます。

 

コンポーネントの読み込み

ヘッダーやフッターのようなページの共通部分をコンポーネントとして作成し、各ページから読み込みます。

コンポーネントの作成

コンポーネントごとにスタイルやスクリプトを設定できるので、スタイルやスクリプトの編集時にファイル間を移動する必要がなく、制作の効率を高めることができます。

コンポーネントの読み込み

 

 

Author Profile

ninomiya
ninomiya
Webデザイナー兼コーダーです。 イラストを描くのも好きです。 SVGとCanvasを使ったWEBアプリにも興味があります。 よろしくお願いいたします。
» 投稿一覧
     
  • Launch Cart越境ECカート

Archive

ページTOPへ