blog
copyright ©
creamu Inc. All Rights Reserved.
art direction & design: Kunitaka Kawashimo
code, interaction & photography: creamu Inc.
category: Technology

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

Pocket

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

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

Node.jsの環境を作る

npm install –save 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