【html模板】在html内使用vue-elementul-axios功能。模板一键复制使用

每次创建都需要自己写一遍,所以干脆这次弄一个模板放在这,直接复制就可以使用,网上很多都是vue-cli的使用,而我要的是html文件的使用方法

模板代码

<!DOCTYPE html>
<html>

<head>
  <meta charset='UTF-8'>
  <!-- 先引入 Vue -->
  <script src='vue.js'></script>
  <!-- 引入element-UI组件 -->
  <script src='index.js'></script>
  <link rel='stylesheet' href='index.css'>
  <!-- 引入axios -->
  <script src='axios.min.js'></script>
</head>

<body>
  <div id='app'>
    <el-button type="primary" @click='jump'>{
    
    {
    
    title}}</el-button>
  </div>
</body>
<script>
  new Vue({
    
    
    el: '#app',
    data() {
    
    
      return {
    
    
        title:'测试按钮'
      }
    },
    mounted() {
    
    

    },
    methods: {
    
    
      jump() {
    
    
      //网上找的免费api模拟测试一下请求能不能发出去,地址就是这个,自己去申请账号可以用appid和appsecret测试一下,我的就不写出来了
        axios.get('https://tianqiapi.com/free/week', {
    
    
          params: {
    
    
            appid: '你的id',
            appsecret: '你的appsecret',
            unescape: 1
          }
        }).then(res => {
    
    
          this.title=res.data.city
          console.log(res,'返回数据');
        }).catch(error => {
    
    
          console.log(error,'请求失败');
        })
      }
    },
  })
</script>
<style>

</style>

</html>

接下来是引入文件的下载

1,axios

百度github,进去搜索axios
注意:因为是国外网站,所以不稳定,可能一次进不去,多刷新几次就进去了
在这里插入图片描述
code这边下载压缩包
在这里插入图片描述
解压后进入dist文件夹,拿你需要的文件复制出来放到对应的路径下
在这里插入图片描述

2,vue.js

直接去vue官网下载就行了
在这里插入图片描述

3,element-UI本地资源

element.js: https://unpkg.com/[email protected]/lib/index.js
element.css: https://unpkg.com/[email protected]/lib/theme-chalk/index.css

猜你喜欢

转载自blog.csdn.net/seeeeeeeeeee/article/details/121791323
今日推荐