使用CDN引入Axios和Vue

在使用CDN引入Axios和Vue之前，您需要确保您的项目已经创建并设置好了。接下来，按照以下步骤操作：
步骤1：引入Axios
在您的HTML文件的头部，添加以下代码来引入Axios库：

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

步骤2：引入Vue
接下来，在您的HTML文件的头部，添加以下代码来引入Vue库：

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

步骤3：创建Vue实例并挂载到DOM元素上
在您的HTML文件的主体部分，添加以下代码来创建一个Vue实例并将其挂载到DOM元素上：

<div id="app">
{{ message }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello, Axios and Vue via CDN!'
}
})
</script>

在上面的代码中，我们创建了一个Vue实例并将其挂载到了id为“app”的DOM元素上。我们在data对象中定义了一个名为“message”的数据属性，并将其初始化为“Hello, Axios and Vue via CDN!”。在模板中，我们通过双大括号插值表达式将“message”的值显示在页面上。
步骤4：使用Axios发起请求
现在，您可以使用Axios发起请求了。在您的Vue实例的methods对象中，添加以下代码：

methods: {
fetchData() {
axios.get('https://api.example.com/data')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.log(error);
});
}
}

在上面的代码中，我们定义了一个名为“fetchData”的方法。该方法使用Axios的get方法发起一个GET请求，请求的URL为“https://api.example.com/data”。然后，我们使用then方法处理响应数据，并使用console.log打印响应数据。如果发生错误，我们使用catch方法捕获错误并打印错误信息。
步骤5：调用fetchData方法
最后，您可以在模板中调用fetchData方法来发起请求。将以下代码添加到模板中：

<button @click="fetchData">Fetch Data</button>

在上面的代码中，我们添加了一个按钮元素，并使用@click指令绑定了fetchData方法。当用户点击按钮时，将调用fetchData方法并发起请求。
现在，您已经成功地使用CDN引入了Axios和Vue，并在Vue实例中发起了请求。请注意，以上代码仅用于演示目的，您需要根据自己的需求进行修改和调整。