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

前言

上一期分享瞭如何在vue-cli3的框架中，封裝Mock.js。本期將分享如何在vue項目中封裝mixins，module 並使用。

GitHub項目地址：github.com/jiangjiahen…

關於mixins，module

本文默認你對mixins，module有必定的瞭解，而且閱讀過相關的官方文檔，所以本文就不在贅述關於mixins，module的基礎知識。

mixins官方文檔：cn.vuejs.org/v2/guide/mi…

module官方文檔：es6.ruanyifeng.com/#docs/modul…

項目實例

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>
複製代碼