一、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>
三、vat
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/[email protected]/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/[email protected]/lib/vant.min.js"></script>
