mounted() {
 setTimeout(() => window.onresize = () => {
 this.$refs.chart1.chartWrapperDom.resize()
 this.$refs.chart2.chartWrapperDom.resize()
 // ... 
 }, 200)
destroyed() { window.onresize = null }

computed: {
 /**
 * 圖表DOM
 */
 chartWrapperDom() {
 const dom = document.getElementById('consume-analy-chart-wrapper')
 return dom && Echarts.init(dom)
 },
 /**
 * 圖表resize節(jié)流，這里使用了lodash，也可以自己使用setTimout實(shí)現(xiàn)節(jié)流
 */
 chartResize() {
 return _.throttle(() => this.chartWrapperDom && this.chartWrapperDom.resize(), 400)
 }
},
mounted() {
 window.addEventListener('resize', this.chartResize)
},
destroyed() {
 window.removeEventListener('resize', this.chartResize)
}

export default {
 data () { return {} },
 filters:{
 orderBy (){
 // doSomething
 },
 uppercase () {
 // doSomething
 }
 }
}

// 注冊(cè)
Vue.filter('my-filter', function (value) {
 // 返回處理后的值
})
// getter，返回已注冊(cè)的過濾器
var myFilter = Vue.filter('my-filter')

let dateServer = value => value.replace(/(\d{4})(\d{2})(\d{2})/g, '$1-$2-$3') 
export { dateServer }
/src/main.js
import * as custom from './common/filters/custom'
Object.keys(custom).forEach(key => Vue.filter(key, custom[key]))

<template>
 <section class="content">
 <p>{{ time | dateServer }}</p> <!-- 2016-01-01 -->
 </section>
</template>
<script>
 export default {
 data () {
 return {
 time: 20160101
 }
 }
 }
</script>

<template>
 <BaseInput v-model="searchText" @keydown.enter="search"/>
 <BaseButton @click="search">
 <BaseIcon name="search"/>
 </BaseButton>
</template>
<script>
 import BaseButton from './baseButton'
 import BaseIcon from './baseIcon'
 import BaseInput from './baseInput'
 export default {
 components: { BaseButton, BaseIcon, BaseInput }
 }
</script>

import Vue from 'vue'
/**
 * 首字母大寫
 * @param str 字符串
 * @example heheHaha
 * @return {string} HeheHaha
 */
function capitalizeFirstLetter(str) {
 return str.charAt(0).toUpperCase() + str.slice(1)
}
/**
 * 對(duì)符合'xx/xx.vue'組件格式的組件取組件名
 * @param str fileName
 * @example abc/bcd/def/basicTable.vue
 * @return {string} BasicTable
 */
function validateFileName(str) {
 return /^\S+\.vue$/.test(str) &&
 str.replace(/^\S+\/(\w+)\.vue$/, (rs, $1) => capitalizeFirstLetter($1))
}
const requireComponent = require.context('./', true, /\.vue$/)
// 找到組件文件夾下以.vue命名的文件，如果文件名為index，那么取組件中的name作為注冊(cè)的組件名
requireComponent.keys().forEach(filePath => {
 const componentConfig = requireComponent(filePath)
 const fileName = validateFileName(filePath)
 const componentName = fileName.toLowerCase() === 'index'
 ? capitalizeFirstLetter(componentConfig.default.name)
 : fileName
 Vue.component(componentName, componentConfig.default || componentConfig)
})

components
│ componentRegister.js
├─BasicTable
│ BasicTable.vue
├─MultiCondition
│ index.vue

data() {
 return {
 loading: false,
 error: null,
 post: null
 }
},
watch: {
 '$route': { // 使用watch來監(jiān)控是否是同一個(gè)路由
 handler: 'resetData',
 immediate: true
 }
},
methods: {
 resetData() {
 this.loading = false
 this.error = null
 this.post = null
 this.getPost(this.$route.params.id)
 },
 getPost(id){ }
}

<router-view :key="$route.fullpath"></router-view>

// 父組件
<BaseInput :value="value"
 label="密碼"
 placeholder="請(qǐng)?zhí)顚懨艽a"
 @input="handleInput"
 @focus="handleFocus">
</BaseInput>
// 子組件
<template>
 <label>
 {{ label }}
 <input :value=" value"
 :placeholder="placeholder"
 @focus="$emit('focus', $event)"
 @input="$emit('input', $event.target.value)">
 </label>
</template>

<input :value="value"
 v-bind="$attrs"
 @input="$emit('input', $event.target.value)">

<input :value="value"
 v-bind="$attrs"
 v-on="listeners"/>
computed: {
 listeners() {
 return {
 ...this.$listeners,
 input: event =>
 this.$emit('input', event.target.value)
 }
 }
}

import Login from '@/views/login.vue'
export default new Router({
 routes: [{ path: '/login', name: '登陸', component: Login}]
})

const _import = require('./_import_' + process.env.NODE_ENV)
export default new Router({
 routes: [{ path: '/login', name: '登陸', component: _import('login/index') }]
})

<ul>
 <li>1111</li><li>2222</li><li>333</li>
</ul>

{
 vue: {
 preserveWhitespace: false
 }
}

<template>
 <p>
 <avatar :default-src="DEFAULT_AVATAR"></avatar>
 </p>
</template>
<script>
 export default {
 created () {
 this.DEFAULT_AVATAR = require('./assets/default-avatar.png')
 }
 }
</script>

{
 vue: {
 transformToRequire: {
 avatar: ['default-src']
 }
 }
}

<template>
 <p>
 <avatar default-src="./assets/default-avatar.png"></avatar>
 </p>
</template>

transformToRequire: {
 video: ['src', 'poster'],
 source: 'src',
 img: 'src',
 image: 'xlink:href'
}

<template>
 <p>
 <p v-if="level === 1"> <slot></slot> </p>
 <p v-else-if="level === 2"> <slot></slot> </p>
 <h1 v-else-if="level === 3"> <slot></slot> </h1>
 <h2 v-else-if="level === 4"> <slot></slot> </h2>
 <strong v-else-if="level === 5"> <slot></slot> </stong>
 <textarea v-else-if="level === 6"> <slot></slot> </textarea>
 </p>
</template>

<template>
 <p>
 <child :level="level">Hello world!</child>
 </p>
</template>
<script type='text/javascript'>
 import Vue from 'vue'
 Vue.component('child', {
 render(h) {
 const tag = ['p', 'p', 'strong', 'h1', 'h2', 'textarea'][this.level]
 return h(tag, this.$slots.default)
 },
 props: {
 level: { type: Number, required: true } 
 }
 }) 
 export default {
 name: 'hehe',
 data() { return { level: 3 } }
 }
</script>

<template>
 <p>
 <button @click='level = 0'>嘻嘻</button>
 <button @click='level = 1'>哈哈</button>
 <hr>
 <child :level="level"></child>
 </p>
</template>
<script type='text/javascript'>
 import Vue from 'vue'
 import Xixi from './Xixi'
 import Haha from './Haha'
 
 Vue.component('child', {
 render(h) {
 const tag = ['xixi', 'haha'][this.level]
 return h(tag, this.$slots.default)
 },
 props: { level: { type: Number, required: true } },
 components: { Xixi, Haha }
 })
 
 export default {
 name: 'hehe',
 data() { return { level: 0 } }
 }
</script>