はじめに
こんにちはRIN1208です。
今回はポートフォリオサイトをFirebase Hostingを使って公開したのでその手順について書いていきます。
この記事は自分が今サーバーサイドエンジニアインターンさせていただいているJX通信社のアドベントカレンダー「JX通信社Advent Calendar 2019」の13日目の記事です。
開発環境
- macOS Catalina
- Vue-cli
- Nuxt.js
- ElementUI
- VSCode（お好みのエディターを使用して下さい）
上記の環境で、npmとvue-cliが使える前提で説明します
#制作物
今回制作したサイトはこちらになります。
ドメインは買ってないです.......
#プロジェクトの作成
$ vue init nuxt-community/starter-template projectname
projectnameの部分はプロジェクト名の為自由に入れて下さい
またinitでエラーが出た場合はこちらのコマンドを行いinitをインストールして下さい
$ npm install -g @vue/cli-init
プロジェクト作成します
特に無ければEnter三回で大丈夫ですがAuthorの部分はメアドの場合変更した方がいいかもしれません。今回は編集しました。
$ vue init nuxt-community/starter-template projectname
? Project name projectname
? Project description Nuxt.js project
? Author rin1208
#ElementUIの導入
こちらのコマンドを入力して下さい.
またインストール時に質問されますがEnter二回押していただければで大丈夫です
$ git init
$ vue add element-ui
次にpluginsというディレクトリの中にelement-ui.jsという名前のファイルを作成して下さい。
以下のように編集して下さい
import Vue from "vue";
import ElementUI from "element-ui";
const locale = require("element-ui/lib/locale/lang/ja");
Vue.use(ElementUI, { locale });
次にnuxt.config.jsというファイルを以下のように編集して下さい
module.exports = {
/*
** この部分にhead:などがありますが今回は省略します
*/
mode: "spa",
build: {
extend(config, { isDev, isClient }) {
if (isDev && isClient) {
config.module.rules.push({
enforce: "pre",
test: /\.(js|vue)$/,
loader: "eslint-loader",
exclude: /(node_modules)/
});
}
},
vendor: ["element-ui"]
},
plugins: ["~plugins/element-ui"],
css: ["element-ui/lib/theme-chalk/index.css"]
};
mode: "spa"と書かれている部分は今回作成するのはSPAのためこちらを追加します。
Firebaseの準備
こちらのFirebaseにログインしてプロジェクトを作成します。
適当なプロジェクトを作成したらFirebaseのツールをインストールします
$ npm install -g firebase-tools
インストール完了後
$ firebase login
こちらのコマンドでブラウザからログインできます
ログイン後にこちらのコマンドで初期設定を行います
$ firebase init hosting
プロジェクトを選択するように聞かれるので先ほどFirebaseで作ったプロジェクトを十字キーで選択しエンターで決定します。
次に
? What do you want to use as your public directory?
と聞かれるのでdistと入力して下さい
あとはEnterを押していただければ大丈夫です。
#デプロイする
$ npm run build
こちらのコマンドでdistファイルを生成します
以下のコマンドでデプロイします。URLが表示されるのでそちらにアクセスすると先ほどビルドしたページが表示されます。またURLはFirebaseの方でも確認できます。
$ firebase deploy
#今回使用したコンポーネントライブラリ等
ここではElementUIにプラス、コンポーネントライブラリという形で書いていきます。
vue-simple-timeline
- 自分の出場したことのある大会、インターンの経歴などに使用しました
####実装方法
インストール
$ npm i vue-simple-timeline
pluginsにtimeline.jsというファイルを作成して下さい
import Vue from "vue";
import SimpleTimeline from "vue-simple-timeline";
Vue.use(SimpleTimeline);
nuxt.config.jsに今作成したtimeline.jsのパスを追加していきます
module.exports = {
/*
** この部分にhead:などがありますが今回は省略します
*/
mode: "spa",
build: {
extend(config, { isDev, isClient }) {
if (isDev && isClient) {
config.module.rules.push({
enforce: "pre",
test: /\.(js|vue)$/,
loader: "eslint-loader",
exclude: /(node_modules)/
});
}
},
vendor: ["element-ui"]
},
plugins: ["~plugins/element-ui", "~/plugins/timeline.js",],
css: ["element-ui/lib/theme-chalk/index.css"]
};
サンプルコードやyarnを使ったインストールはこちらを参照して下さい。
vue-burger-menu
- スマホでのタブ切り替えの時に使用しました。デフォルトのメニューはなぜか切り替え後にもう一度メニューが開いてしまう謎の動作をしてしまう為こちらを使用しました。（謎）
- こちらもこちらでなぜかel-rowで範囲とかいじってるのに位置が動いてくれない....cssも効かない....なんで....(現在改善してます)
- GitHubはこちらです。
インストール
$ npm install --save vue-burger-menu
pluginsにtimeline.jsというファイルを作成して下さい
import Vue from "vue";
import { Slide } from "vue-burger-menu";
Vue.component("slide", Slide);
nuxt.config.jsに今作成したmenu.jsのパスを追加していきます
module.exports = {
/*
** この部分にhead:などがありますが今回は省略します
*/
mode: "spa",
build: {
extend(config, { isDev, isClient }) {
if (isDev && isClient) {
config.module.rules.push({
enforce: "pre",
test: /\.(js|vue)$/,
loader: "eslint-loader",
exclude: /(node_modules)/
});
}
},
vendor: ["element-ui"]
},
plugins: [
"~/plugins/element-ui.js",
"~/plugins/timeline.js",
"~/plugins/menu.js"
],
css: ["element-ui/lib/theme-chalk/index.css"]
};
#おわりに
ここまで読んでくださり有難うございます。今回初めてNuxt.jsに触れてみましたが作っている最中「あれ？これNuxt作ってる意味なくね....?」と思いながら制作してました。制作期間はページ自体は一日ほどでその他レスポンシブや調整などを毎日コツコツとやってたので一週間ほどかかりました。まだまだ修正するべき点はありますので少しずつ修正していきます。デザインもやったことがなくシンプルなものにしています。自分自身フロントが壊滅的に苦手&できない（backendもそこまでできないですが....）のでフロントできる人ほんと凄い.......devドメイン買います(掠れた声)......
明日はペイさんの記事になります。