看懂vue3项目所需的一些基础知识

一、Composition API (组合式API)
    1、setup和ref的基本使用

补充说明，reactive和ref用法类似，如果涉及到复杂类型的数据，比如对象和数组，一般建议用reactive，对象类型也可以用ref，不过实际上内部也是借助reactive代理proxy来实现的。

二、provide和inject 实现嵌套组件之间的数据传递

注意点：只能实现父组件向子组件传递数据

父组件 向下传递数据

import { provide } from 'vue'
export default{
    setup(){
        provide("service","业务")
    }
}

子组件 获取父组件传过来的数据

import { inject } from 'vue'
export default{
    setup(){
        //接收数据
        const service=inject("service")
    }
}

三、前端框架Vue——vue-i18n ，vue项目中如何实现国际化，$t的用法

需求分析，页面右上角有一个中英文切换的按钮，点击按钮可将网页切换到不同的语言。

以下步骤已省去 vue-i18n的安装、引入、挂载等，详情请查阅参考链接

 1、准备本地的翻译信息

const messages = {
 zh: {
  message: {
  hello:'好好学习，天天向上！'
  }
 },
 en: {
  message: {
  hello:'good good study, day day up!'
  }
 }
}

 2、vue-i18n 数据渲染的模板语法     {{ $t("") }}

{{ $t("message.hello") }}

参考链接前端框架Vue——vue-i18n ，vue项目中如何实现国际化，$t的用法_$t 国际化_Dream_xun的博客-CSDN博客

四、Axios网络请求的封装

1、网络请求方法及相关配置信息的封装，在src目录下创建文件夹utils，并创建文件request.js,用来存储网络请求对象

import axios from 'axios'
import { getToken } from './CookieUtils'

export const instance = axios.create({
  baseURL: process.env.BASE_API,
  timeout: 1000 * 180
})

instance.interceptors.request.use(
  config => {
    if (getToken()) {
      config.headers.Authorization = 'Bearer ' + getToken()
    }
    return config
  },
  error => Promise.error(error)
)

export const get = (url, params = {}) => {
  return new Promise((resolve, reject) => {
    instance.get(url, {
      params
    }).then((response) => {
      resolve(response.data)
    }, err => {
      reject(err)
    })
  })
}

export const post = (url, data = {}) => {
  return new Promise((resolve, reject) => {
    instance.post(url, data, {
      headers: {
        'Content-Type': 'application/json'
      }
    }).then((response) => {
      resolve(response.data)
    }, err => {
      reject(err)
    })
  })
}

// export default { get, post, request:instance };

2、创建一个api文件夹，用来集中存放网络请求

3、设置请求转发（请求代理）

在 vue.config.js 中对 devServer 进行配置：

 为什么跨域？ 因为浏览器是由同源策略的

devServer 就是vuecli在开发环境给我们提供的一个代理服务器,(使用的是 http-proxy-middleware)

devServer 就相当于 用一个 中间件服务器来访问，服务器是没有 同源策略的

  devServer: {
    host: "localhost",//配置本项目运行主机
    port: 8080,//配置本项目运行端口
    //配置代理服务器来解决跨域问题
    proxy: {
      // ‘/api’ 的作用就是 替换 baseURL 的，假如这里我用的 localhost：8080 ,前端请求时直接用 /api 就行了
      //  ‘/api’ 只在前端请求时添加，而后端不需要添加 /api 这个路径
      "/api": {
        target: "http://localhost:3008", //配置要替换的后台接口地址
        // changeOrigin设置为true时，服务器收到的请求头中的host为http://11.111.11.111:5000
        // 设置为false时，服务器收到的请求头中的host为http://localhost:8080
        // 默认设置为true
        changOrigin: true, //配置允许改变Origin
        ws: true, // proxy websockets
        pathRewrite: {
          "^/api": "/",
          //pathRewrite: {'^/api': '/'} 重写之后url为 http://localhost：8080/xxxx
          //pathRewrite: {'^/api': '/api'} 重写之后url为http://localhost：8080/api/xxxx
        },
      },
    },
  },