首先导入CDN

<!--导入vue与axios-->

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

然后在“script”标签书写。其中先建立一个后缀名为“json”的文件，该文件有两种参考写法，且都不支持注释

写法一：每个独立的对象都被包装在一个顶层对象中，其中的键是自定义的名称。这样就符合了JSON的语法规则。每个内部对象都有自己的键值对，并且整个结构由一个大括号包围，表示这是一个单一的JSON对象。

{

"hunshuideyunxue": {

"name": "hunshuideyunxue",

"age": 20,

"address": "qiludadi"

},

"百度": {

"name": "hunshuidezhangyu",

"url": "https://www.baidu.com"

},

"B站": {

"name": "B站",

"url": "https://www.bilibili.com"

}

}

或者所有对象都被放置在一个数组中，由方括号包围。

[

{

"name": "hunshuideyunxue",

"age": 20,

"address": "qiludadi"

},

{

"name": "yun",

"url": "https://www.baidu.com"

},

{

"name": "B站",

"url": "https://www.bilibili.com"

}

]

然后在“html”文件中的“script”标签中写

mounted(){ //钩子函数，链式编程

axios.get('data.json').then(response=>(console.log(response.data)));

//连接“deta.json”文件，拿到后在控制台输出“data.json”中的内容

//注意该文件与当下的这个文件的位置关系

}

此时运行后在浏览器控制台中就可以查看输出内容，本次用的HbuiderX所写。因环境等问题导致浏览器无法显示文件内的元素，求解！！！