Vue使用export、export default和import说明

你的名字 2022-11-27 03:13 205阅读 0赞

### Vue使用export、export default和import说明 ###

*  示例1
 *   *   *   *  export default
             *  import
 *  示例2
 *   *   *   *  export
             *  Import

下面是可运行的代码，进行示例说明

# 示例1 #

使用`export default`的vue。在Import时不需要大括号

#### export default ####

**Service.vue**

#### import ####

**index.vue**

// 注意Service是没有大括号的
    import Service from './service.vue';
    // ...
    // 方法调用:
    Service.getProductInfo(to)

# 示例2 #

#### export ####

**Utils.vue**

</script>
    // 变量
    let SERVER_SECURITY_URL = `/securityapi`;
    // 方法
    const responseTips = (response, tipsText) => { 
        if (response.code == '200' || response.code == '201') { 
          Toast.success(tipsText || '操作成功!');  
        } else { 
          Dialog.alert({ 
            title: `${ response.code}`,
            message: `${ response.message}`
            }).then(() => { 
            // on close
            });
        }
      }
    // 其他代码略...
    
    export const SERVER_URL = { 
      SERVER_SECURITY_URL,
      THIRDSERVER_URL,
      SERVER_PAY_URL,
      SERVER_PAY_RETURN_URL,
      SERVER_AUTH_URL
    }
    export const UTILS_SERVICE = { 
      responseTips,
      responseExecute,
      responseNone,
      getUrlVars
    }
    </script>

#### Import ####

**index.vue**

// 注意有大括号
    import {  SERVER_URL, UTILS_SERVICE } from '../../share/utils.vue';
    // 具体的使用
    const url = SERVER_URL.SERVER_SECURITY_URL;