【Vue.js】Vue.jsとLocalStorageを使ってテンプレートの作成【LocalStorage】
最近、簡単なアプリを作る時にVue.jsとローカルストレージを使うことが多いので、そのためのテンプレートを作りました。
共通ヘッダーメニュー
components/commonComponent.jsの「headers」で定義しました。
app/data.jsで定義したrouteLinkの値を元に作成しています。
ヘッダーを変更したい場合は、app/data.jsのrouteLink変更し、かつrouters/router.jsも変更が必要です。
共通フッター
components/commonComponent.jsの「footers」で定義しました。
app/data.jsで定義したserviceNameの値をcopyrightの変数に入るように実装しています。
ベタがきでも問題ないと思います。
共通サイドバー
components/commonComponent.jsの「sidebars」で定義しました。
「infos」,「ads」,「links」の3つの共通コンポーネントを含んでいます。
ウインドウがある一定の幅よりも狭くなった場合、sidebarsを非表示にする実装にしています。(sidebar.cssでdisplay:noneしている箇所)
メイン画面
index.htmlの
routers/router.jsに記載のあるコンポーネントがここに表示される対象となります。
各メインコンポーネントはcomponents/mainComponent.jsに記載しました。
ストレージ
共通処理を実行するcommonStorage.jsとストレージキーに関する処理を記載するstorage.jsに分けています。
storage/storage.jsでコメントアウトしているような実装をする想定です。
アプリ内処理
appディレクトリ内に共通で使用するjsファイルを置いています。
calendar.jsは、私の自作です。よく日付関係の処理が必要になるのでここにまとめています。
common.jsはアプリを跨いでも使えるようなものとなるのが理想です。
data.jaはデータオブジェクトを格納するのに使用します。
フィルター
vue.jsはフォーマットを自作しなければならないですが、それをfilterで実施します。
vue
vue.jsとvue-routerはダウンロードしてアプリに組み込んでいます。
cdnなどを利用してもいいと思います。
以上、テンプレートの説明でした。
