如何将Axios包添加到非cli Vue 3项目中

Question

我试图将Axios包添加到我的非cli Vue 3项目中。我试图在页面顶部的脚本标记中添加包，但这不起作用。我还尝试为axios创建一个新变量，同时直接将axios包URL传递给变量，但这也不起作用。我如何在我的项目中设置Axios包?

代码如下:

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.tailwindcss.com"></script>
<div id="demo" class="min-h-full bg-gray-200">
<!-- UI -->
</div>
<script>
const { axios } = "https://unpkg.com/axios/dist/axios.min.js";
const { onMounted, ref, computed } = Vue
const app = Vue.createApp({
const cities = ref()

setup() {
const getData = async (e) => {
if (e.key == "Enter") {
try {
const res = await axios.get(
`https://api.openweathermap.org/data/2.5/weather?zip={enterzipcodehere},US&appid={youropenweathermapidhere}&units=imperial`
)
cities.value = res.data.name

console.log(cities.value)
} catch (error) {
console.log(error)
}
}
}
onMounted(() => {
getData()
}
}
})
app.mount('#demo')
</script>

Answer 1

从安装文档…

Using jsDelivr CDN:

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

使用unpkg CDN:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

在您将这些标记中的任何一个添加到HTML页面之后，axios全局变量将可用。

---

如果您使用module

，您也可以导入ESM版本。

<script type="module">
import axios from "https://cdnjs.cloudflare.com/ajax/libs/axios/1.2.2/esm/axios.min.js";
console.log(
"todo:",
(await axios.get("https://jsonplaceholder.typicode.com/todos/1")).data
);
</script>

Answer 2

在html中添加<script src="https://unpkg.com/axios/dist/axios.min.js"></script>，可以直接使用axios作为全局变量