vue3

【介绍】

# vue3 的变化
    1.性能的提升
        -打包大小减少41%
        -初次渲染快55%, 更新渲染快133%
        -内存减少54%
    2.源码的升级
        使用Proxy代替defineProperty实现响应式
        重写虚拟DOM的实现和Tree-Shaking
    3.拥抱TypeScript
        Vue3可以更好的支持TypeScript
    4.新的特性
        Composition API（组合API）
        setup配置
        ref与reactive
        watch与watchEffect
        provide与inject
        新的内置组件
        Fragment
        Teleport
        Suspense
        其他改变

        新的生命周期钩子
        data 选项应始终被声明为一个函数
        移除keyCode支持作为 v-on 的修饰符

--------------------------------
 # 组合式API和配置项API
    vue2 ：配置项API
         new Vue({
             el:'#app',
             data:{}
         })

    vue3: 组合式API
        let name='lqz'
        let add=()=>{
        }

。

。

【vue3项目创建】

# 1 跟之前创建vue2一样

# 2 步骤： 1 vue create vue3_demo001 2 注意选择vue3，其他都一样

# 3 webstorm打开--》配置启动

# 4 配置npm 镜像站 npm config set registry https://registry.npmmirror.com

检测：npm config get registry

【vite创建（推荐）】

#1 什么是vite？—— 新一代前端构建工具。
优势如下：
开发环境中，无需打包操作，可快速的冷启动。
轻量快速的热重载（HMR）。
真正的按需编译，不再等待整个应用编译完成。
传统构建 与 vite构建对比图


# 2 兼容性注意
Vite 需要 Node.js 版本 18+，20+。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本
官网：https://cn.vitejs.dev/

# 3 创建工程
# 不指定名字创建：npm create vite@latest
# 配置npm镜像站：npm config set registry https://registry.npmmirror.com
# 查看镜像站：npm config get registry
# 指定名字创建 
    # 创建项目方式一
    npm create vite@latest
    # 创建项目方式二:指定名字
    npm create vite@latest vue3_demo002
    # 创建项目方式三
    cnpm create vite@latest vue3_demo002
    # 创建项目方式四
    cnpm create vite vue3_demo002
# 3 使用编辑器打开vue3项目
# 4 安装依赖
    npm install 
# 5 运行项目
    npm run dev

。

。

。

【常用API】

1.setup函数

　　# 1 如果使用配置项API---》写起来跟vue2一样 　　

　　# 2 如果写组合式API---》所有代码都要写在setup函数中 　　

　　　　-后期除了setup函数，其他都不带了 　　

　　# 3 setup函数必须返回变量或函数--》在template中才能使用 　　

　　# 4 默认不带响应式，需要使用ref或reactive包裹

<template>
  <div class="home">
    <h2>姓名：{{ name }}</h2>
    <h2>年龄：{{ age }}</h2>
    <button @click="handleAdd">点击加年龄</button>
    <button @click="handleChange">点击改名字</button>
  </div>
</template>

<script>


13 import {ref} from "vue";

export default {
  name: 'HomeView',
  setup() {
//1.插值语法
//   let name='张三'
    let name = ref('张三')
    // let age=18  默认没有响应式
    let age = ref(18)  //做成响应式，需要导入模块
    //2.方法--点击年龄+1
    function handleAdd() {
      console.log(age)  //age的类型是RefImpl,
      age.value += 1  //age的值+1需要通过value来操作

    }

    //3.方法--改名字
    function handleChange() {
      name.value = '小龙女'
    }

    //.必须return,然后才能在template中使用
    return {name, age, handleAdd, handleChange}
  }
}
</script>

 

2.ref和reactive

# 1 ref 包裹值类型[数字，字符串，布尔]，做成响应式

# 2 reactive包裹引用类型[对象，数组]，做成响应式

# 3 使用reactive包裹的对象，直接通过 . [] 取值赋值就是响应式的

ref包裹的对象，需要使用 对象.value 修改值

# 4 使用ref包裹的，在template中，不用使用 变量.value

##### js###
const hobby = ref('篮球')
const wife = reactive({name: '刘亦菲', age: 38, height: 168})
const handleAddHeight = () => {
    wife.height += 1
}

#### template####
<h1>ref和reacitve</h1>
<p>爱好是：{{ hobby }}</p>
<p>wife名字是：{{ wife.name }}-->wife年龄是：{{ wife.age }}---》wife身高是：{{ wife.height }}</p>
<button @click="handleAddHeight">点击wife身高+1</button>

 

3.计算属性computed

##### js###
 // 3 计算属性
    const person = reactive({
      firstName: '',
      lastName: ''
    })

    // 只有 计算属性，不修改值的情况
    // person.fullName = computed(() => {
    //   return person.firstName+person.lastName
    // })

    // 支持修改
    person.fullName = computed({
      get() {
        return person.firstName + person.lastName
      },
      set(value) {
        person.firstName = value.slice(0, 1)
        person.lastName = value.slice(1)
      },
    })
    
#### template###
<h1>计算属性</h1>
<p>姓：<input type="text" v-model="person.firstName"></p>
<p>名：<input type="text" v-model="person.lastName"></p>
<p>全名：{{ person.fullName }}</p>
<p>全名修改：<input type="text" v-model="person.fullName"></p>

 

 

4.监听属性

4.1监听值类型，监听对象类型，监听多个变量，watchEffect函数

<template>
  <div class="home">
    <h1>监听属性</h1>
    <h3>年龄是:{{ age }}</h3>
    <button @click="ageAdd">点击年龄增加</button>
    <hr>
    <h3>姓名是:{{ person.name }}</h3>
    <button @click="changeName">点击修改姓名</button>
    <hr>
    <button @click="changeSum">点我变sum</button>
    <button @click="changeMsg">点我变msg</button>
  </div>
</template>

<script>
import {ref, watch, reactive, watchEffect} from "vue";

export default {
  name: 'HomeView',
  setup() {
    const age = ref(18)

    const person = reactive({name: 'xxx'})

    const sum = ref(100)
    const msg = ref('你好啊')

    function ageAdd() {
      age.value++
    }

    function changeName() {
      person.name = '刘亦菲'
    }

    function changeSum() {
      sum.value++
    }

    function changeMsg() {
      msg.value = '哦哦哦'
    }

    //1.监听属性  普通监听
    watch(age, (newValue, oldValue) => {
      console.log('监听到了', newValue, oldValue)
    })

    //2.监听对象
    watch(() => person.name, (newValue, oldValue) => {
      console.log('person.name变化了', newValue, oldValue)
    })

    //3.监听多个
    watch([sum, msg], (newValue, oldValue) => {
      console.log('sum或msg变化了', newValue, oldValue)
    })

    //watchEffect函数，使用：不用指定监听谁，只要watchEffect内部用了某个变量，某个变量发送变化，就会触发
    watchEffect(() => {
      const x1 = sum.value
      const x2 = person.name
      console.log('watchEffect配置的回调执行了')
    })
    return {age, ageAdd, watch, changeName, person, sum, msg, changeSum, changeMsg}
  }
}
</script>

 

5.生命周期

5.1配置项API生命周期

beforeCreate

created

beforeMount

mounted

beforeUpdate

updated

beforeUnmount

unmounted

5.2组合式API生命周期

beforeCreate===>setup()
created=======>setup()
beforeMount ===>onBeforeMount
mounted=======>onMounted
beforeUpdate===>onBeforeUpdate
updated =======>onUpdated
beforeUnmount ==>onBeforeUnmount
unmounted =====>onUnmounted

<template>
  <div class="home">
    <h1>生命周期钩子</h1>
    <h3>年龄是:{{ age }}</h3>
    <button @click="ageAdd">增加年龄</button>
  </div>
</template>

<script>
import {ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted} from "vue";

export default {
  name: 'HomeView',
  setup() {
    //1.写在这里就是beforeCreate
    console.log('beforeCreate')

    const age = ref(18)

    function ageAdd() {
      age.value++
    }

    //2.created
    console.log('created', age.value)

    //3.onBeforeMount
    onBeforeMount(() => {
      console.log('onBeforeMount', '组件挂载之前')
    })

    //4.,onMounted
    onMounted(() => {
      console.log('onMounted', '组件挂载之后')
    })

    //5.onBeforeUpdate
    onBeforeUpdate(() => {
      console.log('onBeforeUpdate', '组件更新之前')
    })

    //6.onUpdated
    onUpdated(() => {
      console.log('onUpdated', '组件更新之后')
      console.log('age', age.value)
    })

    //7.onBeforeUnmount
    onBeforeUnmount(() => {
      console.log('onBeforeUnmount', '组件卸载之前')
    })

    //8.onUnmounted
    onUnmounted(() => {
      console.log('onUnmounted', '组件卸载之后')
    })

    return {age, ageAdd}
  },


}
</script>

 

6.toRefs

　　将响应式对象转换为普通对象，但其属性被转换为 ref

<template>
  <div class="home">
    <h1>toRefs</h1>
    <h3>{{ name }}----------{{ age }}</h3>
    <button @click="age++">年龄+1</button>
    <hr>
    <button @click="handleShow">看控制台</button>
    <button @click="ageAdd">年龄增加</button>

  </div>
</template>

<script>
import {ref, reactive, toRefs} from "vue";

export default {
  name: 'HomeView',
  setup() {
    let person = reactive({name: '张三', age: 48})

    function ageAdd() {
      person.age++
      console.log(person)
    }

    function handleShow() {
      console.log(person)
    }

    return {...toRefs(person), ageAdd, handleShow}// toRefs: 将响应式对象转换为普通对象，但其属性被转换为 ref。
    //相当于return {name:ref(person.name),age:ref(person.age}
    //这样做的好处是，你可以在模板中直接使用 name 和 age（而不是 person.name 和 person.age），而它们仍然是响应式的。
  },


}
</script>

 

【用vit+vue3创建项目】

App.vue

<script setup>

// 以后，只要再 这样写[ <script setup> ] ,script就是setup函数中的
// 定义的变量和函数，不需要return，以后，就不再写配置项了

// 1 组件，只需要导入，就会自动注册
import HelloWorld from './components/HelloWorld.vue'

import HelloWorld from './components/HelloWorld.vue'
import Child from "./components/Child.vue";
import Child2 from "./components/Child2.vue";
import utils from "../public/utils/index.js";
import Child3 from "./components/Child3.vue";

//1.setup写法
import {ref, reactive, computed, toRefs, toRef} from 'vue'

const name = ref('张三')

function changeName() {
  name.value = '李四'
}

//2.生命周期钩子---created
console.log('created')

//3.计算属性
const newName = computed(() => {
  return name.value + '123'
})

//4.自定义属性---父传子
const msg1 = ref('猪猪侠')

//5.自定义事件---子传父
const child_name = ref('')

function handleEvent(name) {
  child_name.value = name
}

//6.插槽
//7.没有全局mixin，只有局部自己建的
let b = utils.name = '我是熊大'
let a = utils.add(1, 2)
console.log(a, b)

//8.toRefs
const person = reactive({
  name2: '光头强',
  age2: 8
})
let {name2, age2} = toRefs(person)
console.log(typeof (name2), age2)
name2.value = '吉吉国王'

//9.toRef---只把对象中某一个做成响应式
let name3 = toRef(person, 'name2')
console.log(name3.value)

//10.ref属性
const child3 = ref()  // 代指  this.$refs.child3  ,这个地方必须叫child3，放在组件上的ref是child3
// created--->还没挂载---》组件还没有
function showLog() {
  console.log(child3.value.age)
  child3.value.changeAge()
  console.log(child3.value.age)
}

</script>

<template>
  <h1>setup写法</h1>
  <h2>{{ name }}</h2>
  <button @click="changeName">点我改名字</button>
  <h2>计算属性：{{ newName }}</h2>
  <hr>
  <h1>自定义属性---父传子</h1>
  <HelloWorld :msg="msg1"></HelloWorld>
  <h2>自定义事件--子传父</h2>
  <h3>子组件传过来的---{{ child_name }}</h3>
  <Child @myevent="handleEvent"></Child>
  <hr>
  <h2>插槽</h2>
  <Child2>
    <template v-slot:a>
      <div>我是a</div>
    </template>
    >
    <template v-slot:b>
      <div>我是b</div>
    </template>
    >
  </Child2>
  <hr>
  <h1>ref属性-放在组件上</h1>
  <Child3 ref="child3"></Child3>
  <button @click="showLog">点我看控制台</button>

</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}

.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}

.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>

HelloWorld.vue-->父传子

<script setup>
import {ref} from 'vue'

// 父传子，接收父传过来的变量：数组形式
// defineProps(['msg'])

//2.对象形式
defineProps({
  msg: String
})

const count = ref(0)
</script>

<template>
  <h1>{{ msg }}</h1>

</template>

Child.vue-->父子通信子传父

<script setup>
import {ref} from "vue";

let $emit = defineEmits(['myevent'])
const name = ref('')

function handleSend() {
  $emit('myevent', (name.value))
}
</script>

<template>
  <input type="text" v-model="name">--->{{ name }}--->
  <button @click="handleSend">点我传到父</button>
</template>

<style scoped>

</style>

Child2.vue--》插槽

<script setup>

</script>

<template>
<h2>child2</h2>
  <slot name="a"></slot>
  <hr>
  <slot name="b"></slot>
</template>

<style scoped>

</style>

Child3.vue-->ref属性

<script setup>
import {ref} from 'vue'

const age = ref(0)

function changeAge() {
  age.value += 4
}

defineExpose({age, changeAge})
</script>

<template>
  <h1>ref属性</h1>

</template>

<style scoped>

</style>

mixin.index.js

export default {
    name:'熊大',
    add:function (a,b){
        return a+b
    }
}

。

。

。

2.axios使用

2.1 基本使用

import axios from "axios";
// 相当于写在了created中--》页面加载完，就发送请求
axios.get('自己地址').then(res => {
  console.log(res)
})

2.1.1 小电影案例

<script setup>
import HelloWorld from './components/HelloWorld.vue'
import axios from "axios";
import {reactive} from "vue";

const filmsList = reactive({result: []})
axios.get('http://127.0.0.1:8000/app01/films/').then(res => {
  console.log(res.data)
  if (res.data.code == 100) {
    //加载成功.把数据放到变量中
    filmsList.result = res.data.result
    console.log('----', filmsList)
  } else {
    alert(res.data.msg)
  }
})
</script>

<template>
  <h1>加载电影案例</h1>
  <div v-for="item in filmsList.result">
    <h3>{{ item.name }}</h3>
    <img :src="item.poster" alt="" height="200px" width="150px">
  </div>

</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}

.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}

.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>

<script setup>
import HelloWorld from './components/HelloWorld.vue'
import axios from "axios";
import {reactive} from "vue";

const filmsList = reactive({result: []})
//2.升级
// axios.get('http://127.0.0.1:8000/app01/films/').then(res => {
//   console.log(res.data)
  // if (res.data.code == 100) {
    // 2.1 直接把res.data.result 复制到filmList.result
    // Object.assign(filmsList.result, res.data.result)

    // 2.2 解构赋值
    // let {data} = res  // res={data:{code:100,msg:成功}}
    // Object.assign(filmsList.result, data.result)

    // 2.3 解构赋值
    // let {data: {result}} = res
    // Object.assign(filmsList.result, result)

    // 2.4 解构赋值
    // let {data} = res  // {code:100,msg:成功,result:[]}
    // Object.assign(filmsList, data)
    //
    // } else {
    //   alert(res.data.msg)
    // }
// })

    // 3 async  await
    async function load() {
     let{data}=await axios.get('http://127.0.0.1:8000/app01/films/')
          Object.assign(filmsList, data)
      }
 load()

</script>

后端

 。

。

。

【promise】

1.0 普通函数和回调函数

//普通函数: 正常调用的函数,一般函数执行完毕后才会继续执行下一行代码

<script>
    let fun1 = () =>{
        console.log("fun1 执行了")
    }
    // 调用函数
    fun1()
    // 函数执行完毕,继续执行后续代码
    console.log("其他代码继续执行")
</script>

//回调函数: 一些特殊的函数,表示未来才会执行的一些功能,后续代码不会等待该函数执行完毕就开始执行了

<script>
    // 设置一个2000毫秒后会执行一次的定时任务，基于事件自动调用，console.log先执行
    setTimeout(function (){
        console.log("延迟演示执行了")
    },2000)
    console.log("其他代码执行")
</script>

 

2.0promise基本使用(用来处理回调函数)

# Promise对象代表一个异步操作，有三种状态：`Pending`（进行中）、`Resolved`（已完成，又称 Fulfilled）和`Rejected`（已失败）

# 现实生活中对应 你跟你女朋友说，5年后等我赚够500w就结婚--》定义函数 ​

　　　　-1 进行中（努力赚钱，其他代码继续执行） ​

　　　　-2 成功（赚够500w---》结婚） ​

　　　　-3 失败（没赚够---》分手）

<script setup>
import HelloWorld from './components/HelloWorld.vue'
import axios from "axios";
import {reactive} from "vue";

let promise = new Promise(function (resolve, reject) {
  // resolve,reject 是两个函数
  console.log("promise 开始执行")
  // resolve("promise 执行成功")
  reject("promise 执行失败")
  // 主动抛异常，也是执行失败
  // throw new Error("error message")
})
console.log('11111')
// promise.then(
//     function (value) {console.log(`promise中执行了resolve:${value}`)},
//     function (error) {console.log(`promise中执行了reject:${error}`)})

//2.
promise.then(res => {
  console.log(res)
}).catch(err => {
  console.log(err)
})
console.log('222222')
</script>

3.0async和await的使用

promise对象 支持async和await 写法

<script setup>
import HelloWorld from './components/HelloWorld.vue'

// async 和await 写法
// 1  async标识函数后,async函数的返回值会变成一个promise对象
async function demo01() {
  let promise = new Promise(function (resolve, reject) {
    // resolve,reject 是两个函数
    console.log("promise 开始执行")
    // resolve("promise 执行成功")
    // reject("promise 执行失败")
    // 主动抛异常，也是执行失败
    throw new Error("error message")
  })
  return promise
}

console.log('11111')

// await 关键字，必须写在async修饰的函数中
async function demo02() {
  try {
    let res = await demo01()  // 正常调用，返回promise 对象，加await 调用--》返回正常then的数据
    console.log(res)
  } catch (err) {
    console.log('出错了')
  }

}

demo02()  // 它会等正常执行完成才会调用
console.log('222222')
</script>

axios其它配置项

//axios.get()
//axios.post()
axios({
    url:'地址'，
    method:'post',
    headers: {'token': 'adsfa.adsfa.adsf',contentType:'application/json'},
    params: {name: lqz,age:19},
    data: {firstName: 'Fred'},
    timeout: 1000, 
})
// 更多参数
{
  //1 `url` 是用于请求的服务器 URL
  url: '/user',
  //2 `method` 是创建请求时使用的方法
  method: 'get', // 默认值
  //3 `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。
  // 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
  baseURL: 'https://some-domain.com/api/',
  //4 `transformRequest` 允许在向服务器发送前，修改请求数据
  // 它只能用于 'PUT', 'POST' 和 'PATCH' 这几个请求方法
  // 数组中最后一个函数必须返回一个字符串， 一个Buffer实例，ArrayBuffer，FormData，或 Stream
  // 你可以修改请求头。
  transformRequest: [function (data, headers) {
    // 对发送的 data 进行任意转换处理
    return data;
  }],
  // `transformResponse` 在传递给 then/catch 前，允许修改响应数据
  transformResponse: [function (data) {
    // 对接收的 data 进行任意转换处理
    return data;
  }],
  //5  自定义请求头
  headers: {'X-Requested-With': 'XMLHttpRequest'},
  //6 params` 是与请求一起发送的 URL 参数
  // 必须是一个简单对象或 URLSearchParams 对象
  params: {
    ID: 12345
  },
  // 7 aramsSerializer`是可选方法，主要用于序列化`params`
  // (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
  paramsSerializer: function (params) {
    return Qs.stringify(params, {arrayFormat: 'brackets'})
  },
  //8 data` 是作为请求体被发送的数据
  // 仅适用 'PUT', 'POST', 'DELETE 和 'PATCH' 请求方法
  // 在没有设置 `transformRequest` 时，则必须是以下类型之一:
  // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
  // - 浏览器专属: FormData, File, Blob
  // - Node 专属: Stream, Buffer
  data: {
    firstName: 'Fred'
  },
  // 发送请求体数据的可选语法
  // 请求方式 post
  // 只有 value 会被发送，key 则不会
  data: 'Country=Brasil&City=Belo Horizonte',
  // 0imeout` 指定请求超时的毫秒数。
  // 如果请求时间超过 `timeout` 的值，则请求会被中断
  timeout: 1000, // 默认值是 `0` (永不超时)
  // 11 thCredentials` 表示跨域请求时是否需要使用凭证
  withCredentials: false, // default
  //12 dapter` 允许自定义处理请求，这使测试更加容易。
  // 返回一个 promise 并提供一个有效的响应 （参见 lib/adapters/README.md）。
  adapter: function (config) {
    /* ... */
  },
  //13 auth` HTTP Basic Auth
  auth: {
    username: 'lqz'
    password: '123‘
  },
  //14 `responseType` 表示浏览器将要响应的数据类型
  // 选项包括: 'arraybuffer', 'document', 'json', 'text', 'stream'
  // 浏览器专属：'blob'
  responseType: 'json', // 默认值
  //15 `responseEncoding` 表示用于解码响应的编码 (Node.js 专属)
  // 注意：忽略 `responseType` 的值为 'stream'，或者是客户端请求
  // Note: Ignored for `responseType` of 'stream' or client-side requests
  responseEncoding: 'utf8', // 默认值
  //16  `xsrfCookieName` 是 xsrf token 的值，被用作 cookie 的名称
  xsrfCookieName: 'XSRF-TOKEN', // 默认值
  //17  `xsrfHeaderName` 是带有 xsrf token 值的http 请求头名称
  xsrfHeaderName: 'X-XSRF-TOKEN', // 默认值
  //18  `onUploadProgress` 允许为上传处理进度事件
  // 浏览器专属
  onUploadProgress: function (progressEvent) {
    // 处理原生进度事件
  },
  //19  `onDownloadProgress` 允许为下载处理进度事件
  // 浏览器专属
  onDownloadProgress: function (progressEvent) {
    // 处理原生进度事件
  },
  // 20 `maxContentLength` 定义了node.js中允许的HTTP响应内容的最大字节数
  maxContentLength: 2000,
  //21  `maxBodyLength`（仅Node）定义允许的http请求内容的最大字节数
  maxBodyLength: 2000,
  // 22 `validateStatus` 定义了对于给定的 HTTP状态码是 resolve 还是 reject promise。
  // 如果 `validateStatus` 返回 `true` (或者设置为 `null` 或 `undefined`)，
  // 则promise 将会 resolved，否则是 rejected。
  validateStatus: function (status) {
    return status >= 200 && status < 300; // 默认值
  },
  // 23 `maxRedirects` 定义了在node.js中要遵循的最大重定向数。
  // 如果设置为0，则不会进行重定向
  maxRedirects: 5, // 默认值
  //24  `socketPath` 定义了在node.js中使用的UNIX套接字。
  // e.g. '/var/run/docker.sock' 发送请求到 docker 守护进程。
  // 只能指定 `socketPath` 或 `proxy` 。
  // 若都指定，这使用 `socketPath` 。
  socketPath: null, // default
  //25  `httpAgent` and `httpsAgent` define a custom agent to be used when performing http
  // and https requests, respectively, in node.js. This allows options to be added like
  // `keepAlive` that are not enabled by default.
  httpAgent: new http.Agent({ keepAlive: true }),
  httpsAgent: new https.Agent({ keepAlive: true }),
  //26  `proxy` 定义了代理服务器的主机名，端口和协议。
  // 您可以使用常规的`http_proxy` 和 `https_proxy` 环境变量。
  // 使用 `false` 可以禁用代理功能，同时环境变量也会被忽略。
  // `auth`表示应使用HTTP Basic auth连接到代理，并且提供凭据。
  // 这将设置一个 `Proxy-Authorization` 请求头，它会覆盖 `headers` 中已存在的自定义 `Proxy-Authorization` 请求头。
  // 如果代理服务器使用 HTTPS，则必须设置 protocol 为`https`
  proxy: {
    protocol: 'https',
    host: '127.0.0.1',
    port: 9000,
    auth: {
      username: 'lqz',
      password: '123'
    }
  },
  // 27 see https://axios-http.com/zh/docs/cancellation
  cancelToken: new CancelToken(function (cancel) {
  }),
  // 28 `decompress` indicates whether or not the response body should be decompressed 
  // automatically. If set to `true` will also remove the 'content-encoding' header 
  // from the responses objects of all decompressed responses
  // - Node only (XHR cannot turn off decompression)
  decompress: true // 默认值
}

 。

。

。

【vue-router插件】

安装：npm install vue-router@4

 main.js

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from "./router/index.js";

createApp(App).use(router).mount('#app')

App.vue

<script setup>
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <router-view></router-view>
</template>

HomeView.vue-AboutView.vue--LoginView.vue

<script setup>
import {useRouter} from 'vue-router'
let router = useRouter()
function handleTo(){
// router.push('/about')
//   router.push({'name':'about',query:{name:'吉吉',age:8}})
  router.push({name:'about',params:{id:1}})
  }
</script>

<template>
  <h1>首页</h1>
  <h2>页面跳转</h2>
  <router-link to="/about"><button>跳转到about-html跳</button></router-link>
  <button @click="handleTo">js跳到about</button>
</template>

<style scoped>

</style>


========================================
<script setup>
//取出home页面传入的数据
import {useRoute} from 'vue-router'

let route = useRoute()
// console.log(route.query.name)
// let name=route.query.name

//路径中带数据取值
let id = route.params.id
</script>

<template>
  <h1>about页面</h1>
  <!--  <h1>{{name}}</h1>-->
  <h1>{{ id }}</h1>
</template>

<style scoped>

</style>

==========================================
<script setup></script>

<template>
<h1>登录</h1>
</template>

router/index.js

import {createRouter, createWebHashHistory, createWebHistory} from "vue-router";
import HomeView from "../view/HomeView.vue";
import AboutView from "../view/AboutView.vue";
import LoginView from "../view/LoginView.vue";

const routes = [
    {path: '/', name: 'home', component: HomeView},
    {path: '/about/:id', name: 'about', component: AboutView},
     {path: '/login', name: 'login', component: LoginView},
]

const router = createRouter({

    history: createWebHistory(),
    routes,
})

// 全局路由守卫
router.beforeEach(async (to, from) => {
   if (
     // 检查用户是否已登录
     !localStorage.getItem('token') && to.name !== 'login'
   ) {
     // 将用户重定向到登录页面
     return { name: 'login' }
   }
 })
export default router

 。

。

【pinia】

状态管理器，统一状态管理，组件间通信

state、getter 和 action，我们可以假设这些概念相当于组件中的 data、 computed 和 methods

使用步骤： 1 安装 npm install pinia

　　　　　　 2 在store/xx.js,写入代码，可以定义多个

　　　　　　 3 main.js中使用插件

　　　　　　 4 在组件中使用pinia的数据

store/counter.js

import {defineStore} from 'pinia'

export const useCounterStore = defineStore('counter', {
    //1 定义变量
    state: () => {
        return {
            count: 0,
            hobby: '篮球'
        }
    },
    //2 这里面写方法，与后端交互或逻辑判断，再操作数据
    actions: {
        increment(id) {
            // 跟后端交互--》把good_id--》真正加购物车
            this.count++
        },
        changeHobby(hobby) {
            this.hobby = hobby
        }
    },
    //3 getter-->获取数据
    getters: {
        getCount() {
            return this.count
        },
    },
})

main.js

import {createPinia} from 'pinia'

const pinia = createPinia()
createApp(App).use(router).use(pinia).mount('#app')

goodsList组件

<script setup>
import {reactive} from "vue";
import ShoppingCard from "./ShoppingCard.vue";
//1.引入pinia的store/counter.js
import {useCounterStore} from "../store/counter";

let counter = useCounterStore()

//2.页面渲染数据,都通过counter对象来操作State、getter、action
const goodsList = reactive([
  {id: 1, name: '钢笔', price: 100},
  {id: 2, name: '毛笔', price: 20},
  {id: 3, name: '铅笔', price: 10},
  {id: 4, name: '圆珠笔', price: 15},
])

//点击按钮修改
function handleAdd(id) {
  console.log('加入购物车', id)
  // counter.count++
  counter.increment()
  // counter.getCount()
}

//测试pinia中的changeHobby
function changeHobby() {
  counter.hobby = '打羽毛球'
}
</script>

<template>
  <h2>商品</h2>
  <ShoppingCard/>
  <hr>
  <div>
    <div v-for="item in goodsList">
      <span>商品名:{{ item.name }}</span>
      <span>价格：{{ item.price }}</span>
      <button @click="handleAdd(item.id)">加入购物车</button>
    </div>
    <button @click="changeHobby">点我变pinia中的hobby</button>
  </div>
</template>

<style scoped>

</style>

shoppingCar组件

<script setup>
//1.引入pinia的store/counter.js
import {useCounterStore} from "../store/counter";

let counter = useCounterStore()
</script>

<template>
  <h2>购物车</h2>
  <p>数量:{{ counter.getCount }}</p>
  <p>爱好修改:{{ counter.hobby }}</p>
</template>

。

。

【elementui-plus】

# 0 ant-design :https://www.antdv.com/components/message-cn

# 1 官网：https://element-plus.org/zh-CN/#/zh-CN
# 2 安装
cnpm install element-plus --save

# 3 main.js中注册
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

createApp(App).use(router).use(pinia).use(ElementPlus).mount('#app')

# 4 组件中使用
<script setup>
import { ElMessage } from 'element-plus'
const open2 = () => {
  ElMessage({
    message: '恭喜您成功了',
    type: 'success',
  })
}
</script>

<template>
  <div class="mb-4">
    <el-button>Default</el-button>
    <el-button type="primary">Primary</el-button>
    <el-button type="success">Success</el-button>
    <el-button type="info">Info</el-button>
    <el-button type="warning">Warning</el-button>
    <el-button type="danger">Danger</el-button>
  </div>
  <div>
    <el-card style="max-width: 480px">
      <template #header>Yummy hamburger</template>
      <img
          src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
          style="width: 100%"
      />
    </el-card>
  </div>
  <div>
    <el-button :plain="true" @click="open2">Message</el-button>
  </div>
</template>

<style scoped>

</style>