The sky is the limit

Vue.js、PHP、Java、Cordova、Monacaを中心にハイブリッドアプリ開発、PWA開発など効率的なWEB、iOS、Androidアプリ開発の情報を共有します。

【Vue.js】Vue.jsとLocalStorageを使ってテンプレートの作成【LocalStorage】

【Vue.js】Vue.jsとLocalStorageを使ってテンプレートの作成【LocalStorage】

f:id:duo-taro100:20160218004611p:plain

最近、簡単なアプリを作る時にVue.jsとローカルストレージを使うことが多いので、そのためのテンプレートを作りました。

Vue.jsテンプレート

github.com

共通ヘッダーメニュー

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などを利用してもいいと思います。

以上、テンプレートの説明でした。