2018.07.16Nuxt.js+Bulmaの組み合わせがとても使いやすかったので、プロジェクト作成からレイアウト作成までを共有したいと思います。親レイアウトに読み込むコンポーネントの作成TOPページ、bulmaテストページを作成コンポーネントの作成まとめなぜNuxt.js+Bulmaなのか?Vue.jsベースでフロントエンドを作成するにあたって、bootstrapみたいにjQueryベースのヘビーなCSSフレームワークは使いたくないし、VueのuiコンポーネントのElementUIは、レスポンシブ対応してないし柔軟性がない。求めているのは、コンポーネント・レイアウトがレスポンシブで対応し、CSSベースのシンプルな軽量なCSSフレームワークである。これを満たしているのがBulmaである。未来を感じるモダンなデザインにも惹かれるものがある。10.13node.jsnpmyarn1からプロジェクトを作りながらNuxt.jsの仕組みを理解したい方はこちらをご覧ください!Nuxt.js(Vue.js)+ElementUI(UIライブラリ)のフロントエンド環境を1から作る手順この記事では、Nuxt.js(Vue.js)+ElementUI(UIライブラリ)のフロントエンド環境を1から作る手順を解説していきます。Nuxt.jsプロジェクトを初めて作る方や1からNuxtプロジェクトを作りたい方向けのチュートリアル的...kapi-travel.com2018.07.10プロジェクト作成デスクトップにNuxtプロジェクトを作成していきます。[プロジェクト名]create-nuxt-appコマンドに従って以下のように入力していきましょう。devブラウザでlocalhost:3000を開くと、Nuxt.jsのデフォルトページが表示されます。font-awesomeをインストールfont-awesomeを使えるようにインストールします。次に、default.vueに読み込むヘッダーとフッターコンポーネントを作成していきます。}</script>コンポーネントの作成testbulma.vueに読み込むTestCard.vueを作成していきます。}</style>はい、これでNuxt.jsのレイアウトと簡単なページ遷移が完成しました。まとめNuxt.jsには、SSRやPWAなど魅力的な要素が多いので、今後も勉強していきたいです。Vue.jsシェアするTwitterFacebookはてブPocketLINEtaikishiinoかぴトラベル関連記事プログラミングBashコマンドの履歴を積極的に活用したら作業効率が上がったBashを使っている時に過去に実行したコマンドをもう一度実行したいことが開発をしているとよくあると思います。数回前のコマンドでしたら、↑↓で十分ですがそれ以上前だと大変です。今回は、履歴を積極的に活用した方法を記事にしました。コ...PHP【Windows10】Laravelのプロジェクト作成から動作確認まで解説Laravelプロジェクトを作成するにもいくつかのツールをインストールしておく必要があります。今回はwindows環境に1からLaravelプロジェクトを作成していきます。...プログラミング初心者エンジニアが0ベースでのwebサービス開発を経験して学んだことプログラミングを初めて1ヶ月の初心者エンジニアが、インターン先で企画提案から0ベースでのwebサービス開発を経て学んだことを備忘録に記事にします。7.2...プログラミングElasticsearchのローカル導入からMySQLのデータをインポートするまでElasticsearch(エラスティックサーチ)とは、Elastic社が提供する「Lucene」ベースのオープンソース全文検索エンジン。laradock環境にLaravelプロジェクトが乗っかっていることを前提に説明しています。doc...PHPLaravelでマイグレーションを変更(DB設計変更)する方法Laravelのマイグレーション処理は仕様の癖が多少あり、特に外部キー追加ではエラーに苦しめられました。ある時、テーブルに外部キーを追加(カラム追加)しようと、作成したマイグレーションに再定義して、以下のコマンドを実行しました。