JAVASCRIPT

module.exports = {
  pages: {
    index: {
      entry: 'src/main.js', // 必須パラメータ
      title: 'ページタイトル',
    }
  }
}

import Dexie from 'dexie';

const db = new Dexie('testDB');

async noteInit(){
  await db.delete();
  await db.version(1).stores({
    notes: 'fileName, noteTxt',
  });
  await db.open()
},

// page.vue (呼び出し元)
<Btn :to="'/'" :className="{active: true}">実行する！</btn>

// btn.vue (受け取り側)
<template>
  <router-link class="btn" :class="className" :to="to"><slot></slot></router-link>
</template>

const router = new Router({
  mode: 'history',
  routes: [
    {
      path: "/index.html",
      name: "index",
      redirect: '/',
    },
    {
      path: "/",
      name: "Home",
      component: () => import( './views/Home/Index.vue'),
    },
    {
      path: "/:categories(code|note|author)",
      name: "CategoryTop",
      component: () => import( './views/Categories/Detail.vue'),
    }
  ]
})

buildImgProxyUrl: function(url){
  const crypto = require('crypto');
  const key = 'CAMO_KEY'; // 自分のものに置き換える
  const hmac = crypto.createHmac('sha1', key);
  const convUrl = hmac.update(url);
  const digest = hmac.digest('hex')
  const result = 'サーバーのURL' + digest + '?url=' + encodeURIComponent(url)  // 自分のものに置き換える
  return result;
}

for(let [key, val] of Object.entries(testObj)){
  this[key] = val
}

// 以下router-viewするコンポーネントの設定
<keep-alive :include="/List/" :max="20">
  <router-view/>
</keep-alive>

// 以下キャッシュさせるコンポーネント側の設定
<script>
export default {
  name: "TopList", // ここにマッチする
}
</script>

methods: {
  someMethod(){
    setInterval(function () {
    console.log('30秒毎に処理')
      setTimeout(
        function() {
          console.log('5秒後に処理')
          setTimeout(
            function() {
              console.log('4秒後に処理')
            }.bind(this),
            4000
          );
        }.bind(this),
        5000
      );
    }.bind(this), 30000)
  },

export default {
  beforeMount () {
    window.addEventListener('scroll', this.scrollHandler);
  },
  beforeDestroy () {
    window.removeEventListener('scroll', this.scrollHandler);
  },
}

<template>
  <div v-for="data in List" :key="data.page" class="list" :id="'page-' + data.page">
    何かの表示
  </div>
<template>

data() {
  return {
    pageTotal: 0,
    pageNumber: 1,
  };
},
computed: {
  getRel: function() {
    let rel = []

    if(this.pageNumber !== 1){
      const prev = { rel: 'prev', id: 'rel-prev'}
      prev.href = this.$route.path + '?page=' + (parseInt(this.pageNumber) - 1)
      rel.push(prev)
    }
    if(parseInt(this.pageNumber) < parseInt(this.pageTotal)){
      const next = { rel: 'next', id: 'rel-next'}
      next.href = this.$route.path + '?page=' + (parseInt(this.pageNumber) + 1)
      rel.push(next)
    }
    return rel
  },
},
head: {
  link: function () {
    return this.getRel
  },
},

<form @submit.prevent="doSearch">
  <label for="search-txt">検索</label>
  <input type="text" name="key" placeholder="検索する" id="search-txt">
</form>

<input type="text" name="key" placeholder="キーワードで探す"  v-model="keyword">
.
. // 省略
.
computed: {
  keyword: {
    get () {
      return this.$store.state.getKeyword
    },
    set (value) {
      this.$store.commit('setKeyWord', value)
    }
  }
},

getPaginate: function() {
  let pages = []
  // 最大ページ数から1引いた半分の数値をstartとendにセットする
  let start = parseInt(this.page) - (parseInt(this.pageMax - 1)/2);
  let end = parseInt(this.page) + (parseInt(this.pageMax - 1)/2);

  // startが1未満だった時はstartを1にしてendを最大ページ数にする
  if (start <= 0) {
    end = this.pageMax
    start = 1
  }

  // endがpageTotal以上だった時はendをpageTotalにして
  // startを合計ページから最大ページ数-1個分戻った値にする
  if(this.pageTotal <= end){
    end = this.pageTotal
    start = parseInt(this.pageTotal) - parseInt(this.pageMax - 1)
  }

  // ループしてpagesにページ番号を挿入する
  for(let i =start; i<=end; i++){
    pages.push(i)
  }
  return pages
},

<template>
  <div>
    <router-view v-bind:hoge="fuga"/>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fuga: {1: 'apple', 2: 'lemon'}
    }
  }
}
</script>

<template>
  <ul>
    <li v-for="page in pages">
      <router-link :to="page.route" v-bind:exact="page.exact">
        <span>{{page.title}}</span>
      </router-link>
    </li>
  </ul>
</template>

<script>

export default {
data() {
  return {
    pages: {
      page1: {
        route: {name: 'ParentChild1'}},
        title: '子ページ',
        exact: false, 
      },
      page2: {
        route: {name: 'Parent'}},
        title: '親ページ',
        exact: true, // trueじゃないと、子ページルート時にもactiveになる
      },
      page3: {
        route: {name: 'ParentChild2'}},
        title: '子ページ2', //このページ内でさらに子子ルートをネストしている
        exact: false,
      }    
    }
  }
}
}
</script>
<style>
.router-link-active{

}
</style>

.
.
.

router.afterEach((to) =>{
  if(store.getters.pageCount < 1){
    store.commit('addPageCount')
  }else{
    store.commit('setHasHistory', true)
  }
})

<template>
  <div>
    <button v-show="appBnr">インストールする</button>
  </div>
</template>

<script>

export default {
  data() {
    return {
      appBnr: false
    };
  },
  mounted () {
    // アプリ
    if (window.matchMedia('(display-mode: standalone)').matches === false) {
      this.appBnr = true;
    }
    // safari
    if (window.navigator.standalone === false) {
      this.appBnr = true;
    }
  },
}
</script>

<template>
  <div>
    <button v-on:click="installBnr">インストールする</button>
  </div>
</template>

<script>

export default {
  methods: {
    installBnr(){
      let deferredPrompt;

      window.addEventListener('beforeinstallprompt', (e) => {
        // Prevent Chrome 67 and earlier from automatically showing the prompt
        e.preventDefault();
        // Stash the event so it can be triggered later.
        deferredPrompt = e;
        deferredPrompt.prompt();
      });
    }
  }
}
</script>

const commandLineArgs = require('command-line-args');

const optionDefinitions = [
  {
    name: 'verbose',
    alias: 'v',
    type: Boolean
  },
  {
    name: 'title',
    alias: 't',
    type: String,
  },
  {
    name: 'num',
    alias: 'n',
    type: Number,
    defaultValue: 3
  }
];
const options = commandLineArgs(optionDefinitions);