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

归途。

已于 2023-05-19 11:55:02 修改

阅读量135

点赞数

分类专栏：工作中的学习笔记文章标签： vue.js javascript 前端

于 2023-05-12 14:13:41 首次发布

本文链接：https://blog.csdn.net/qq_41027095/article/details/130640916

版权

工作中的学习笔记专栏收录该内容

2 篇文章 1 订阅

订阅专栏

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

<template>
  <h2>count：{{count}}</h2>
  <h2>m1:{{m1}}</h2>
  <h2>m2:{{m2}}</h2>
  <hr>
  <button @click="update">更新</button>
</template>

<script>
import {ref} from 'vue'
export default {

  /* 使用vue3的composition API */
  setup () {

    // 定义响应式数据 ref对象
    const count = ref(1)
    const m1=ref('abc')
    // 对象类型的数据
    const m2=ref({
      loginId: 'pjz0000',
      loginBefEntDtm: new Date(),
      usrMlAdr: 'carlospan@foxmail.com'
    })
    console.log(count)

    // 更新响应式数据的函数
    function update () {
      // alert('update')
      count.value = count.value + 1
    }

    return {
      count,
      m1,
      m2,
      update
    }
  }
}
</script>

补充说明，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("") }}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script type="text/javascript" src="src/main.js"></script>
</head>
<body>
<div id="app">
<h1 style="font-size: 16px; text-align: center;">{{ $t("message.hello") }}</h1>
</div>
</body>
</html>

参考链接前端框架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
        },
      },
    },
  },