新しいMacにNuxt.js環境を構築して、以前のファイルを流用する方法

Tweet

Pocket

新しいMacにNuxt.js環境を構築するには、以下のようにします。

ref:
Nuxt.jsを動かす環境を構築する
まっさらなMacにNuxt.js環境を構築

Node.jsの環境を作る

npm install –save vue-displacement-slideshow
（npm i vue-displacement-slideshow）
でスライドショーのプラグインをインストール

npx create-nuxt-app html_nuxt
でローカルにnuxtのプロジェクト環境を作成する（html_nuxtは任意のプロジェクト名）

Pages/slideshowをコピーする
assets/css と　assets/imgをコピーする

nuxt.config.jsを上書きする

ターミナルで npm run dev
http://localhost:3000/ でブラウザに表示（この場合は、http://localhost:3000/slideshow/）

動きがnuxt上で出来上がるので、
control + cでnpm run devの状態から抜けて、
npm run generate でhtmlを生成する

distディレクトリにhtmlが書き出されるので、
slideshowディレクトリと、_nuxtディレクトリをルートにコピー

html:
<p><iframe class=”iframe_top” src=”/slideshow/”></iframe></p>

css:
.iframe_top {
width: 100%;
height: 100vh;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}ターミナルで処理をkillする場合は、control + c