vue-cli@3封装mixins，module（vue项目模板封装系列）

前言

上一期分享了如何在vue-cli3的框架中，封装Mock.js。本期将分享如何在vue项目中封装mixins，module 并使用。

GitHub项目地址：https://github.com/jiangjiaheng/web-template

关于mixins，module

本文默认你对mixins，module有一定的了解，并且阅读过相关的官方文档，因此本文就不在赘述关于mixins，module的基础知识。

mixins官方文档：https://cn.vuejs.org/v2/guide/mixins.html

module官方文档：http://es6.ruanyifeng.com/#docs/module

项目实例

1. 介绍

如图所示，我封装了两个JS文件，分别通过mixins和module的方式将数据引入到vue文件中。

2. 封装mixins

如图所示，在src文件夹下面建一个mixins文件夹，添加mixins.js文件，代码内容如下。

const mixObj = {
    methods: {
        sayHello() {
            return 'I come from mixin.js'
        }
    }
}

export {
    mixObj
}

3. 封装module

如图所示，在src文件夹下面建一个common文件夹，添加common.js文件，代码内容如下。

const comObj = {
    sayHello() {
        return 'I come from common.js'
    }
}

export default comObj

4. 调用mixins，module

如图所示，在pages文件夹下面的About.vue文件中，引入mixins.js，common.js，具体代码如下。

<template>
  <div class="about">
    <h1>This is an mixin.js and common.js example</h1>
    <p>{{comTitle}}</p>
    <p>{{mixTitle}}</p>
  </div>
</template>

<script>
import { mixObj } from "@/mixin/mixin";
import comObj from "@/common/common";
export default {
  name: "",
  mixins: [mixObj],
  components: {},
  data() {
    return {
      comTitle: comObj.sayHello(),
      mixTitle: this.sayHello()
    };
  }
};
</script>

<style scoped>
p {
  font-size: 40px;
  color: chocolate;
}
</style>