vue-axios(web数据交互方式)

下载

npm install --save axios vue-axios

引入

import axios from 'axios'====>引入axios跨域
import Vueaxios from 'vue-axios'=====>vue-axios基于axios
axios.defaults.baseURL=''====>公共基础路径
const ajax=createApp(app)======>添加到跟组件Vue中
ajax.use(Vueaxios,axios)

使用

axios.get('',{
params:{}
}).then((result)=>{
console.log(result.data)
})

其他封装

function fun(){
    return new promise(resolive,reject){
         Vue.axios.get('',{
            params:{}
        }).then((result)=>{
        console.log(result.data)
        })
    }
}

     Vue.axios.get('',{
    params:{}
    }).then((result)=>{
    console.log(result.data)
    })
}

elementUI(Vue页面组件库)

下载

npm install element-plus --save

引入

import elementUI from 'element-plus'
import 'element-plus/dist/index.css
createApp(app).use(elementUI)

使用

elementUI使用

echarts(可视化图表库)

下载

npm install echarts --save

引入(最新版本的不支持全局echarts挂载，即vue3+echarts5)

使用

第一步:引入echarts:import * as echarts from 'echarts' 第二步:创建dom,let 变量名=echarts.init(document.getElementById("id名")); 第三步:编写变量名，具体详见基本使用基本使用:echarts使用

mintUI(移动端组件库)

下载

npm install mint-ui --save

引入

import mintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
const phone=createApp(app) phone.use(mintUI)

使用

mintUI使用

vantUI(移动端组件库)

下载

npm install vant@next --save

引入

import vant from 'vant'
import 'vant/lib/index.css'
const phone=creatApp(app) phone.use(vant)

使用

vantUI使用

Vue3