Vue開発してて、これは便利だなって裏技がたくさんあるんですが、すぐ忘れてしまい毎回ググらないで済むよう、自分用のメモのつもりでまとめておきます。他にもこんなんあるで！ってのあればぜひ教えてくださいね。
ローカル開発中、ホットリロードの度にブラウザのコンソールをクリア
コンソールがエラーだらけになってると、ちゃんとコンパイル通ったかよくわからなくなりますよね。そんな時はこちら。変更を保存してホットリロードされる度にコンソールが綺麗になります。
main.js
if (module.hot) {
module.hot.accept()
module.hot.addStatusHandler(status => {
if (status === 'prepare') console.clear()
})
}
親子コンポ間の双方向バインディングには$emitよりv-model
ネットでほとんど事例が見つからないので、これはv-modelの正しい使い方なのかよくわかりませんが、エラーもWarningも出ずにきちんと動きます。ネストされた複雑なオブジェクトでもマルッと子コンポーネントに渡して、双方向バインディングができます。子だけじゃなくて孫やその子孫にも同様に渡していけるので、$emit地獄にならずに済むので気に入って使っています。
親：子コンポーネントに渡したいobjectをv-modelする
子："value"という名のpropsで受け取れるので、v-modelでオブジェクトの一部を更に孫に渡したり、フォーム要素にv-modelしたり、あるいは値を直に変更したりできます。変更は自動的に親に渡されます。
App.vue
<template>
<div id="app">
<h1>counter: {{ userData.counter }}</h1>
<Child v-model="userData"/>
</div>
</template>
<script>
import Child from "./components/Child";
export default {
name: "App",
components: { Child },
data() {
return {
userData: { counter: 0 }
}
}
}
</script>
Child.vue
<template>
<div id="counter">
<p>
<button @click="increment">increment</button>
</p>
<p>
<input type="number" v-model.number="value.counter">
</p>
</div>
</template>
<script>
export default {
name: "Child",
props: ["value"],
methods: {
increment() { this.value.counter++ }
}
};
</script>
デモ： https://codesandbox.io/s/vue-template-df8oc
グローバルなfiltersは外部ファイルにまとめておく
filters.js
export default {
toPercentage (n) { return (Math.round(n * 10000) / 100).toFixed(2) },
toLocalString (n) { return n.toFixed().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,') }
}
main.js
import filters from '@/filters'
Object.keys(filters).forEach(key => { Vue.filter(key, filters[key]) })
重たいコンポーネントはLazyLoadしよう。
// 普通にコンポーネントを読み込む場合
import Hoge from '@/Hoge.vue'
// LazyLoadで呼ばれた時に読み込む場合
const Foo = () => import('@/Foo.vue')
その他にも、ロジックをjsファイルに切り出した場合も、WebpackでLazyLoadすると初期ロードを軽くできます。
import(/* webpackChunkName: "Hoge" */ '@/Hoge.js').then(module => {
const Hoge = module.default
Hoge.doSomething()
})
配列やオブジェクトのリアクティブな変更はスプレッド構文がシンプル
// $setを使う場合
this.$set(this.user, 'age', 36)
// スプレッド構文を使う場合
this.user = { ...user, age: 36 }
FontAwesomeを使う
参考: Font awesome を Vue.js で使ってみよう
vue-cli
$ yarn add @fortawesome/fontawesome-svg-core
$ yarn add @fortawesome/free-solid-svg-icons
$ yarn add @fortawesome/vue-fontawesome
@/plugins/fontawesome.js
import Vue from 'vue'
import { library } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
library.add(fas)
Vue.component('font-awesome-icon', FontAwesomeIcon)
main.js
import '@/plugins/fontawesome'
アイコンの使い方：
hoge.vue
<font-awesome-icon icon="file-download" />
SCSSの変数やmixinをvueファイル内でグローバルに使えるようにする
Vue2の場合：
vue.config.js
module.exports = {
productionSourceMap: false,
css: {
loaderOptions: {
sass: {
data: `
@import "@/assets/scss/base/_variables.scss";
@import "@/assets/scss/base/_media_queries.scss";
@import "@/assets/scss/base/_mixins.scss";
`
}
}
}
}
Vue3の場合：
vue.config.js
module.exports = {
productionSourceMap: false,
css: {
loaderOptions: {
scss: {
prependData: `
@import "~@/assets/scss/base/_variables.scss";
@import "~@/assets/scss/base/_media_queries.scss";
`
}
}
}
}
