vue导入文件时增加一个加载的

在Vue.js中，如果你想要在导入外部文件时添加一个加载指示，可以利用`axios`、`vue-resource`（已被Vue官方弃用，推荐使用`axios`）或其他HTTP库来异步加载资源，并显示一个加载组件或者Loading提示。这里是一个简单的例子：

首先，安装`axios`库（如果还没安装）：

npm install axios

然后，在你的组件中，你可以创建一个`asyncData`生命周期钩子，这将在数据加载前触发：

<template>
  <div v-if="!isLoaded">
    <!-- 显示加载组件 -->
    <LoadingComponent />
  </div>
  <YourComponent :data="yourData" />
</template>

<script>
import axios from 'axios';
import LoadingComponent from '@/components/Loading.vue'; // 引入你的加载组件

export default {
  async asyncData() {
    try {
      const response = await axios.get('your-api-url'); // 替换为你需要请求的URL
      return { yourData: response.data };
    } catch (error) {
      console.error('Error loading data:', error);
      throw error;
    }
  },
  data() {
    return {
      isLoaded: false,
    };
  },
};
</script>

在这个例子中，当`asyncData`正在运行时，`v-if="!isLoaded"`会展示`LoadingComponent`，直到数据加载完成并赋值给`yourData`，`isLoaded`变为`true`。