怎么把vue组件export default（{ }）中的代码写到另外的js文件中。

Question

一般写vue-cli创建项目的时候，组件是*.vue，这个组件里面的js部分都写在如下格式内：

export default {
  data() {},
  methods: {}
}

因为有时候页面的需求很大的时候，就要在*.vue的文件中既要写很多的html代码，还在在export default{}中写很多的代码，页面就很长，也很乱了，我想问的是可不可以把export default{}中的js代码分离到一个.js文件中，再通过import引入来使用的呢？我试过，好像不行，兄弟们，求教呀！

Answer 1

sample.js文件

export default {
  data() {},
  methods: {}
}

sample.vue 文件

import sample from './sample'

<script>
    export default {
        ...sample
    }
</script>

我用vue做第一个项目的时候，只抽离公共组件，一个页面一个vue，也很长，现在页面都组件化了，分组件后不会那么长的

Answer 2

你具体是怎么分离的呢？

一般来说，你可以把你代码量最大的函数摘出来，然后写到一个js文件中，然后export供组件import。

不过解耦必然意味着要多写代码，而且单页面组件本身就是为了能够很好的追踪到每个模板对应的方法和样式。如果真的代码量很大，建议拆分成多个组件文件，而不是单纯的分离代码。

Answer 3

函数和变量都可以拿到别的js文件中，比如放到out.js中进行定义与export，然后在当前文件内import进来。

Answer 4

例如outter.js,vue页面内import该js，再mixins：[outer]

Answer 5

bold italic link > 引用 code - 列表。

Answer 6

<template src="./template.html"></template>
<style src="./style.css"></style>
<script src="./script.js"></script>