vue项目中抽离.vue文件中的js代码

当你的页面业务逻辑较多时，你会发现，你的script标签中的代码已经多到你害怕，这时，你应该需要将其抽离出来，成单独的文件。

就类似下图这样，让它们三足鼎立 ↓

效果图

怎么实现呢，抽出来有怎么引入才有效呢

假如你的文件都在 alipayOrWxpay 文件夹中
.vue 文件是长这样

// .vue 文件是长这样
<template>
  <div class="alipayOrWxpay-wrapper">
  </div>
</template>

<script>
import alipayOrWxpay from './alipayOrWxpay'
export default {
  ...alipayOrWxpay
}
</script>

<style lang="scss" scoped>
@import "./alipayOrWxpay.scss";
</style>

.js 文件是长这样

export default {
  data () {
    return {
      // 定义data
    }
  }
// 这里跟之前没有抽离是一毛一样，只是单独成立了一个文件，之前怎么写，现在怎么写。
}

.scss 文件是长这样，这里我用的是scss，如果你是 css直接.css即可，less同理。

// 这里是你的样式

---

---

其实主要是运用了 es6的export和import大法， 和 ... 展开运算符。

---

---- 记录是一种习惯，至少你可以方便自己以后忘了，不用再去百度，直接打开即可。

Google - 下你就知道