サルでもわかるWEBプログラミング

フリーソフトのみでホームページ作成

ユーザ用ツール

サイト用ツール


vue:nuxt.jsとbulmaでハンバーガーメニュー


文書の過去の版を表示しています。


Nuxt.jsとBulmaでハンバーガーメニュー

WEBサイトのデザインとして、「レスポンシブデザイン」というものがあります。

パソコンで見るときは、メニューが左右に並んでいて、スマホで見ると、メニューが折りたたまれて、ハンバーガーのような横線3つのボタンなどになる、アレが、「レスポンシブデザイン」の代表例と言えると思います。

今回は、外部リンク

前回の写経元サイト:https://qiita.com/isamusuzuki/items/5ec800e423a3a56ef03d

開発環境

Windows 8.1 Pro
VisualStudioCode
nvm-windows 1.1.7
node v10.14.1
npm 6.4.1
@vue/cli 3.2.1
<code>

===== Nuxt.jsアプリ(Bulma)の作成 =====
C:/vue/ フォルダに、Nuxt-Bulma-Hamburger2 アプリを作成する。

<code>
npx create-nuxt-app Nuxt-Bulma-Hamburger2
//いろいろ聞かれるが、UI flameworkで、bulmaを選択
//rendering modeはSingle Page Appを選択

cd Nuxt-Bulma-Hamburger2
npm install
npm run dev

前回の写経元サイト


vue/nuxt.jsとbulmaでハンバーガーメニュー.1543753178.txt.gz · 最終更新: 2018/12/02 by adash333

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki