html 引入 vue.js axios element-ui
时间: 2023-07-13 09:36:02 浏览: 435
要在 HTML 中引入 Vue.js、Axios 和 Element-UI,你需要按照以下步骤进行操作:
1. 在 HTML 文件中引入 Vue.js 和 Element-UI 的 CSS 和 JavaScript 文件。可以在官网上下载这些文件,也可以使用 CDN 引入。
```html
<!-- 引入 Vue.js 和 Element-UI 的 CSS 和 JavaScript 文件 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
```
2. 引入 Axios。可以在官网上下载 Axios 的 JavaScript 文件,也可以使用 CDN 引入。
```html
<!-- 引入 Axios 的 JavaScript 文件 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
```
3. 在 Vue.js 中使用 Element-UI 和 Axios。可以在 Vue.js 的实例中引入 Element-UI 和 Axios,然后在 methods 中使用它们。
```html
<div id="app">
<el-button @click="getData">获取数据</el-button>
</div>
<script>
new Vue({
el: '#app',
methods: {
getData() {
axios.get('/api/data').then(response => {
console.log(response.data);
}).catch(error => {
console.log(error);
});
}
}
});
</script>
```
其中,`el-button` 是 Element-UI 中的一个按钮组件,`axios.get` 是使用 Axios 发送 GET 请求获取数据。注意,在实际使用中需要根据具体情况进行配置和调整。
阅读全文