export default用法vue_vue全家桶开发的一些小技巧和注意事项

`export default` 是 ES6 中的一个语法，用于导出一个默认的模块。在 Vue/Vue全家桶开发中，我们可以使用它来导出组件、函数、对象等。

下面是一些小技巧和注意事项：

1. 组件中使用 `export default` 导出组件对象

// MyComponent.vue
<template>
  <div>Hello World</div>
</template>

<script>
export default {
  name: 'MyComponent',
  // ...
}
</script>

2. 在单文件组件中使用 `export default` 导出一个函数

// myFunction.js
export default function() {
  console.log('Hello World')
}

// MyComponent.vue
<script>
import myFunction from './myFunction.js'

export default {
  name: 'MyComponent',
  mounted() {
    myFunction()
  }
}
</script>

3. 在 Vuex 中使用 `export default` 导出 store

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  // ...
})

4. 在 Vue Router 中使用 `export default` 导出路由配置

// router.js
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  // ...
]

export default new VueRouter({
  routes
})

5. 在 main.js 中使用 `import` 引入组件、store、router

// main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

注意事项：

1. 在一个模块中只能有一个 `export default`，但可以有多个 `export`。
2. 在导入默认模块时，可以使用任意名称，例如 `import MyComponent from './MyComponent.vue'`。
3. 在导入非默认模块时，必须使用原来的名称，例如 `import { myFunction } from './myFunction.js'`。
4. 在使用 Vue Router 和 Vuex 时，需要先使用 Vue.use() 安装插件。