vue中怎么引用外部JS中的变量？

Question

import customData from '../js/data.js';

data.js:

var customData = {
    userInfo : {
        admin : 'admin',
        pwd : 'admin',
        name : 'admin',
        icon : '../img/admin.png'
    },
    blog : {}
}

data.js里面应该怎么写，.vue中应该怎么引用？

Answer 1

Data.js中定义了一个变量customData
在默认的Vue实例中返回一个customData的方法让他返回定义好的变量

var customData = 'mmp'
export default {
    customData: function(){
        return customData
    }
}

定义一个组件Data用import的方式将data.js引入进去
就可以通过导入的Data.customData()获得返回的变量customData并渲染到页面上

<template>
    <h1>{{ newData }}</h1>
</template>

<script>
import Data from './data'
export default {
    name: 'data',
    data:  function() { 
        return{
            newData : Data.customData()
        }
    } 
}
</script>

<style scoped>

</style>

页面渲染结果

Answer 2

外部js文件export 封装的对象，引用的地方import进来，然后可以是
import {ABC} from '../../a.js'
或者import Data from '../../a.js'
具体可参考es6的语法export、import

Answer 3

export default cunstomData