1ページ目zukucode主にWEB関連の情報を技術メモとして発信しています。前へ123次へvueファイル(単一ファイルコンポーネント)をwebpackでビルドvueファイル(単一ファイルコンポーネント)をwebpackでビルドする手順を紹介します。バージョンは、Vue.jsは2.x、webpackは2.xです。Replacement(HMR)の設定を行います。lessを使いwebpackでビルドする.vueファイル(単一ファイルコンポーネント)のstyleをcssではなくlessで実装して、webpackでビルドをします。vue-loaderのオプションにlessのloaderを追加します。lessで外部のlessファイルをImportするメインカラーなどの共通情報は外部のlessファイルに記載し、各vueファイルではそのlessファイルをImportして実装するのが効率的です。.vueファイル内のlessで外部のlessファイルをIm...Vue.jsにVuexを導入するVuexを導入する手順の作業メモです。Vuexを利用することにより、各コンポーネントで保持していたデータをstateにまとめられるので、ある程度規模が大きくなっても耐えられるプログラムを作成できます。stateを作成して各コンポーネントで参照する実際にstoreを作成して、各コンポーネントでその値を参照できるようにします。mutations.jsにstateのオブジェクトを定義します。stateがアプリケーション全体の状態を管理します。mutationでstateの値を変更するstateはmutationの処理でしか変更できません。コンポーネントからmutationを実行し、stateの値を更新する方法を紹介します。mutationを作成するにあたって、最初にmutatio...Vue.jsを学習する上で知っておきたいES2015の文法Vue.jsは公式ドキュメントを始め、ネット上のほとんどのサンプルがES2015(ES6)の表記で実装されています。Vue.jsで頻繁に使用するであろうES2015の文法を紹介します。axiosをajaxライブラリとして導入するVue.jsではajaxまわりの処理は用意されておらず、外部のライブラリを各自で自由に用意するようになっています。axiosの設定用にhttp.jsというファイルを作成します。actionの処理でaxiosでajaxを行うVuexのactionでaxiosのライブラリを使ったajaxの処理を行います。システム日付をYYYYMMDD形式などの文字列型に変換する当ホームページに記載されている会社名・製品名・システム名などは、各社の登録商標、もしくは商標です。