vue3 安装axios配置 vue安装axios出错

1. 引入项目内部js文件报错

import{bz} from '../api/index'
//报错信息
Could not find a declaration file for module '../api/index'. 'D:/01-project/01-rd/npc-vue-dbfw/dbfw-dj/src/api/index.js' implicitly has an 'any' type.

//原因：因为引入的文件不是ts类型
//解决办法
//在shims-vue.d.ts中加入
declare module '*'

2. 引入axios报错

import axios from 'axios'
import vueAxios from 'vue-axios'
import vueAxiosPlugin from 'vue-axios-plugin'
const app=createApp(App);
//此句报错
app.use(vueAxios,axios)

解决办法：

1、降vue-axios版本

npm uninstall vue-axios
npm i vue-axios@2.0.1

然后继续报错：

2、方法一失败，尝试把vue-axios-plugin的拦截注掉，不在报错

//注掉此处
app.use(vueAxiosPlugin,{
    // 第二步：请求拦截处理
  reqHandleFunc: (config:any) => config,
  reqErrorFunc: (error:any) => Promise.reject(error),
  // 响应拦截处理
  resHandleFunc: (response:any) => response,
  resErrorFunc: (error:any) => Promise.reject(error)
})

还是不行，最后放弃，弃用vue-axios,改用axios

//在main.js中
import axios from 'axios'
import vueAxios from 'vue-axios'
const app=createApp(App);
app.config.globalProperties.axios=axios

在src下新建util/axios.ts
写以下代码

import req from 'axios'
// req.defaults.baseURL = 'rest/2020'
req.interceptors.request.use((config:any) => {
  const token = window.localStorage.getItem('token')
  if (token) config.headers.Authorization = token
  return config
})
export default req

然后就可以使用了
例如我的api文件中这样写

import axios from '../utils/axios'
const baseURL='****'
export function bz(data:any) {
    // QzhBMzgzOEJBN0VFNDkzQTg3MzdENEM3QjI5REI4ODU=
    // ZmY4MDgxODE3MWIwOGFlNDAxNzFiMTQxOGYzOTEwNzU=
    return axios.get(baseURL + 'user/getData', data)
}

3.eslintrc报错

解决办法：
1、在vue.config.js中的module.exports中加入

transpileDependencies: true,
lintOnSave:false,

随后，在eslintrc.js中的extends中，如果为vue3+ts,写入

"plugin:vue/vue3-essential",
'@vue/typescript'

其他注释掉

4. 在vue3中经常不知道用什么去声明变量

1. reactive是一个函数，它可以定义一个复杂数据类型，成为响应式数据。通常是用来定义响应式对象数据

const obj = reactive({
      name: 'ls',
      age: 18
    })

2. toRef是函数，转换响应式对象中某个属性为单独响应式数据，并且值是关联的
   使用场景：有一个响应式对象数据，但是模版中只需要使用其中一项数据。

// 1. 响应式数据对象
    const obj = reactive({
      name: 'ls',
      age: 10
    })
    console.log(obj)
    // 2. 模板中只需要使用name数据
    // 注意：从响应式数据对象中解构出的属性数据，不再是响应式数据
    // let { name } = obj 不能直接解构，出来的是一个普通数据
    const name = toRef(obj, 'name')

3. toRefs是函数，转换响应式对象中所有属性为单独响应式数据，对象成为普通对象，并且值是关联的
   使用场景：剥离响应式对象（解构|展开），通常用于解构|展开reactive定义对象,想使用响应式对象中的多个或者所有属性做为响应式数据。

// 1. 响应式数据对象
    const obj = reactive({
      name: 'ls',
      age: 10
    })
    console.log(obj)
    // 2. 解构或者展开响应式数据对象
    // const {name,age} = obj
    // console.log(name,age)
    // const obj2 = {...obj}
    // console.log(obj2)
    // 以上方式导致数据就不是响应式数据了
    const obj3 = toRefs(obj)
    console.log(obj3)

    const updateName = () => {
      // obj3.name.value = 'zs'
      obj.name = 'zs'
    }

    return {...obj3, updateName}

4. ref函数，常用于简单数据类型定义为响应式数据

• 再修改值，获取值的时候，需要.value
• 在模板中使用ref申明的响应式数据，可以省略.value

当你明确知道需要的是一个响应式数据 对象 那么就使用 reactive 即可其他情况使用ref

const name = ref('ls')
    console.log(name)
    const updateName = () => {
      name.value = 'zs'
    }
    // 2. age数据
    const age = ref(10)