Javascript 如何使用VueJS CDN循环通过外部JS文件中的阵列？

我已经创建了一个通过CDN使用VueJs的页面，并且正在尝试了解如何从外部JS文件循环数组中的数据。我尝试按如下方式导入数据，但在控制台中出现未定义的错误

我的index.html中的循环如下所示

        <ul>
            <li v-for="animal in animals">
              {{ animal.type }}
            </li>
        </ul>

---

这实际上与vue没有多大关系，但与如何引入数据有关

如果要使用script标记，则导出动物将不起作用

如果这只是开始，在list.js中，您可以这样做

var animals = [ ... your data ];

或者如果您想使用导出

将导出更改为

export const animals = [
    {
        type: 'Cat'
    },
    {
        Type: 'Dog'
    }
];

{{animal.type}


从“/scripts/list.js”导入{animals}
var app=新的Vue（{
el:“#testapp”，
数据（）{
返回{
动物：动物
};      
}
});       

在list.js文件中，必须导出为常量，如下所示

export const animals = [
    {
        type: 'Cat'
    },
    {
        Type: 'Dog'
    }
]

然后像这样导入它（在.js文件中）：

---

之后，您可以随意循环，…

重要的是，还要用

type=“module”

标记包含

import

的脚本标记。包含

导出的文件/代码也是如此。两个建议的答案都会导致两个错误SyntaxError：导出声明可能只出现在模块的顶级&SyntaxError：导入声明可能只出现在模块的顶级。哦，是的，我修复了导出
导出错误[
同样，我用固定版本更新了答案
export const animals = [
    {
        type: 'Cat'
    },
    {
        Type: 'Dog'
    }
];

export const animals = [
    {
        type: 'Cat'
    },
    {
        Type: 'Dog'
    }
]

import { animals } from 'js/list.js'

var app = new Vue({
    router: router,
    el: '#app',
    data() {
      return {
        animals: animals //you can use animal in data like this
      };
    }
});