執筆者 Masa | 2月 28, 2021 | Javascript, Vue.js, Vuetify
技術進歩が昨今著しいフロント業界ですが、今回はよく使用されているフレームワークあれるVue.jsの開発環境を構築します。 npm install vue これで最新の安定版のVueがインストールできます。 github上の最新コードからインストールを行う場合は以下のように行います。 git clone https://github.com/vuejs/vue.git node_modules/vue cd node_modules/vue npm install npm run build...
執筆者 Masa | 2月 14, 2021 | Nuxt.js, Javascript, Vue.js
http通信で、ブラウザとWebサーバーとの間で通信を行うためのパッケージであるaxiosをnuxt.js環境に導入します。 npm install axios JSON Placeholderなどの外部サービスからテスト用にリクエストを送れるJSONデータを用意します。 <template> <div>{{users}}</div> </template> <script> const axios = require("axios"); let...
執筆者 Masa | 2月 10, 2021 | SPA, Firebase, Javascript, Nuxt.js, Vue.js
フロントをnuxt.js、バックエンドをfirebaseでSPA開発をする場合の連携方法についてご紹介します。 まずは、npx create-nuxt-appでnuxt.jsの環境を構築し、その後の方法を以下に示します。注意として、create-nuxt-appで環境構築する際の設定として、レンダリングモードをSPAにすることが必要になる点に気をつけましょう。...
執筆者 Masa | 2月 8, 2021 | Next.js, CSS, Javascript, Vue.js
Next.js環境でコンポーネント単位でCSSを適応する コンポーネント単位で、CSSをNextの環境で実装したい場合は、以下のようにやります。 ①CSS Modulesを読み込む import styles from './layout.module.css' ①CSSを適用したい箇所全体をLayoutコンポーネントでラップする ②以下のようにstyles.<該当のセレクタ> を適応する export default function Layout({ children }) { return...
執筆者 Masa | 2月 3, 2021 | Javascript
nuxt.jsの環境にWebフォントを読み込むには、nuxt.config.jsのheadの中のlink配列に要素を追加(インクルード)する必要があります。 link:[ {rel:'icon',type:'image/x-icon',href:'/favicon.ico'},...
