vue-cli中配置axios/element-ui/vant

最新推荐文章于 2023-11-26 22:01:10 发布

置顶 bbiu~biu~

最新推荐文章于 2023-11-26 22:01:10 发布

阅读量1.5k

点赞数 4

分类专栏： vue学习文章标签： vue 前端

本文链接：https://blog.youkuaiyun.com/qq_45784580/article/details/104536874

版权

vue学习专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何在Vue CLI项目中配置并使用axios、element-ui和vant。对于axios，详细讲解了安装、配置及发送HTTP请求的步骤；对于element-ui，阐述了安装和在main.js中的配置，还提到了通过CDN引入的方式；最后，对vant的安装、配置以及CDN使用进行了说明。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、axios

1、安装axios

在命令行中输入：npm install axios
在这里插入图片描述
在package.json中查看是否安装成功

2、配置axios

在main.js中引入：

import axios from 'axios'
Vue.prototype.$axios=axios;

在这里插入图片描述
这样就完成了在vue-cli中的配置

3、axios 发送get/post请求

mounted:function(){
 	this.axios.get("news/latest").then(res=>{
        // console.log(res.data.stories);
         this.bannerList=res.data.top_stories;
         this.articlerList=res.data.stories;               
     });
}

import qs from 'qs';
let params=qs.stringify({
    username:username,
    password:password
});
this.$axios.post(url,params).then(res=>{
    console.log(res);
})

二、element-ui

1、安装

npm i element-ui -S

在package.json中查看是否安装成功
在这里插入图片描述

2、配置

在main.js中引入

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

使用：

<template>
  <div class="index">
    <h1>哈哈哈哈哈哈哈哈哈哈</h1>
    <el-button>111</el-button>
  </div>
</template>

效果图：
在这里插入图片描述

CDN

（直接在 html 文件中引入 CDN 链接）

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
  <div id="app">
    <el-button @click="visible = true">Button</el-button>
    <el-dialog :visible.sync="visible" title="Hello world">
      <p>Try Element</p>
    </el-dialog>
  </div>
</body>
  <!-- import Vue before Element -->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: function() {
        return { visible: false }
      }
    })
  </script>
</html>

三、vant

1、安装

npm i vant -S

在package.json中查看是否安装成功
在这里插入图片描述

2、配置

在main.js中引入

import Vant from 'vant'
import 'vant/lib/index.css';
Vue.use(Vant)

使用：（下拉刷新代码展示）

<template>
  <div class="index">
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh" :head-height="80">
        <h1>哈哈哈哈哈哈哈哈哈哈</h1>
        <el-button>111</el-button>
    </van-pull-refresh>
  </div>
</template>

<script>
import {Toast} from 'vant';
export default {
    data(){
        return{
            count: 0,
            isLoading: false,
        }
    },
    methods:{
        onRefresh() {
            setTimeout(() => {
                this.isLoading = false;
            }, 1000);
	    }
    }
}
</script>

CDN

（直接在 html 文件中引入 CDN 链接）

<!-- 引入样式文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.4/lib/index.css">

<!-- 引入 Vue 和 Vant 的 JS 文件 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vant@2.4/lib/vant.min.js"></script>