vue3项目中px2rem

转载

hochie 2025-07-31 14:28:46

文章标签 vue3项目中px2rem vue vue.js 数据响应式 文章分类 机器学习人工智能

1.认识VUE3

vue是一套用于构建用户界面的渐进式框架,即用多少拿多少，不要求你一下用所有的功能。所以VUE3也就是用多少功能从vue中取多少功能

2.创建VUE

1.查看@vue/cli版本，确保@vue/cli版本在4.5.0以上
 vue --version
 2.安装或者升级你的@vue/cli
 npm install -g @vue/cli
 3.创建Vue项目，选择Vue3
 vue create test
 4.启动
 cdtest
 npm run serve

3.常用的Composition API

3.1什么是API

API，全称为application programming interface（应用程序编程接口），就是一个接口，一个通道，本质是预先定义的函数。它帮助开发人员实现特定功能而不用编写大量重复代码（类似最开始学C++时候自己写的功能函数）。

3.2常用的API

① `setup`

理解：Vue3.0中一个新的配置项，值为一个函数。
setup是所有Composition API（组合API）“ 表演的舞台 ”。
组件中所用到的：数据、方法等等，均要配置在setup中。
setup函数的两种返回值：

若返回一个对象，则对象中的属性、方法, 在模板中均可以直接使用。（重点关注！）
若返回一个渲染函数：则可以自定义渲染内容。（了解） (不常用)

1. <template>
2. <h1>博主的信息</h1>
3. <h2>姓名：{{name}}</h2>
4. <h2>年龄：{{age}}</h2>
5. <h2>性别：{{sex}}</h2>
6. <button @click="sayInfo">显示信息</button>
7. </template>
8. 
9. <script>
10. // import {h} from 'vue'
11. export default {
12. name: "App",
13. //此处只是测试一下setup，暂时不考虑响应式的问题。
14. setup(){
15. // 数据
16. let name = "青阳子"
17. let age = 28
18. let gender = "男"
19. 
20. // 方法
21. function sayInfo(){
22. alert(`你好${name}，你真帅`)
23. }
24. return {
25. name,age, gender,sayInfo
26. }
27. // return ()=> h('h1','青阳子')
28. }
29. };
30. </script>

如果返回的是渲染函数

那你在template里写的模板都不奏效了，页面渲染的就是你写的h函数中的

注意点：

尽量不要与Vue2.x配置混用

Vue2.x配置（data、methos、computed...）中可以访问到setup中的属性、方法。
但在setup中不能访问到Vue2.x配置（data、methos、computed...）。
如果有重名, setup优先。

setup不能是一个async函数，因为返回值不再是对象, 而是promise, 模板看不到return对象中的属性。（后期也可以返回一个Promise实例，但需要Suspense和异步组件的配合）

上面的数据不是响应式的数据，我们修改它，页面不会有更新，如何定义响应式的数据呢？

② `ref` 函数

作用: 定义一个响应式的数据
语法: const xxx = ref(initValue)

创建一个包含响应式数据的引用对象（reference对象，简称ref对象）。
JS中操作数据： xxx.value
模板中读取数据: 不需要.value，直接：<div>{{xxx}}</div>

备注：

接收的数据可以是：基本类型、也可以是对象类型。
基本类型的数据：响应式依靠的是类上的getter与setter完成的（我们等下看下源码你就知道了）。
对象类型的数据：内部 “ 求助 ” 了Vue3.0中的一个新函数—— reactive函数。

1. <template>
2. <h1>博主的信息</h1>
3. <h2>姓名：{{ name }}</h2>
4. <h2>年龄：{{ age }}</h2>
5. <h2>职业： {{ job.type }}</h2>
6. <h2>工资：{{ job.sex }}</h2>
7. <button @click="sayInfo">显示信息</button>
8. <button @click="changeInfo">修改信息</button>
9. </template>
10. 
11. <script>
12. import { ref } from "vue";
13. export default {
14. name: "App",
15. setup() {
16. // 数据
17. let name = ref("青阳子");
18. let age = ref(28);
19. let job = ref({
20. type: "前端工程师",
21. sex: "30K",
22. });
23. // 方法
24. function sayInfo() {
25. alert(`你好${name.value}，你真帅，薪水也${job.value.sex}这么高`);
26. }
27. function changeInfo() {
28. name.value = "三十年后的青阳子";
29. age.value = 58;
30. job.value.type = "退休老干部";
31. job.value.sex = "80K";
32. }
33. return {
34. name,
35. age,
36. job,
37. sayInfo,
38. changeInfo,
39. };
40. },
41. };
42. </script>

通过看源码可以知道调用ref会返回一个RefImpl的实例对象，是reference引用和implement实现的缩写，RefImpl类中有getter和setter可以检测到数据的变化

③ `reactive`函数

作用: 定义一个对象类型的响应式数据（基本类型不要用它，要用ref函数）
语法：const 代理对象= reactive(源对象)接收一个对象（或数组），返回一个代理对象（Proxy的实例对象，简称proxy对象）
reactive定义的响应式数据是“深层次的”。
内部基于 ES6 的 Proxy 实现，通过代理对象操作源对象内部数据进行操作。

1. <template>
2. <h1>博主的信息</h1>
3. <h2>姓名：{{ lee.name }}</h2>
4. <h2>年龄：{{ lee.age }}</h2>
5. <h2>职业： {{ lee.job.type }}</h2>
6. <h2>工资：{{ lee.job.salary }}</h2>
7. <h2>爱好：{{ lee.hobby }}</h2>
8. <h3>测试数据：{{ lee.job.a.b.c }}</h3>
9. <button @click="changeInfo">修改信息</button>
10. </template>
11. 
12. <script>
13. import { reactive } from "vue";
14. export default {
15. name: "App",
16. setup() {
17. // 数据
18. let lee = reactive({
19. name: "青阳子",
20. age: 28,
21. hobby: ["写博客", "研究前端", "看电影"],
22. job: {
23. type: "前端工程师",
24. salary: "30K",
25. a: {
26. b: {
27. c: 111,
28. },
29. },
30. },
31. });
32. 
33. // 方法
34. function changeInfo() {
35. lee.name = "三十年后的青阳子";
36. lee.age = 58;
37. lee.job.type = "退休老干部";
38. lee.job.salary = "80K";
39. lee.job.a.b.c = 222;
40. // 直接通过数组下标修改，可以触发响应式
41. lee.hobby[0] = "看小说";
42. }
43. return {
44. lee,
45. changeInfo,
46. };
47. },
48. };
49. </script>

④ Vue3.0中的响应式原理

Vue2.x的响应式

实现原理

对象类型：通过Object.defineProperty()对属性的读取、修改进行拦截（数据劫持）。
数组类型：通过重写更新数组的一系列方法来实现拦截。（对数组的变更方法进行了包裹）。

1. Object.defineProperty(data, 'count', {
2. get () {}, 
3. set () {}
4. })

存在问题

新增属性、删除属性, 界面不会更新。
直接通过下标修改数组, 界面不会自动更新。

解决方案

使用Vue.set、Vue.delete或者vm.$set、vm.$delete这些API

模拟Vue2中实现响应式

1. //源数据
2. let person = {
3. name:'青阳子',
4. age:28
5. }
6. //模拟Vue2中实现响应式
7. let p = {}
8. Object.defineProperty(p,'name',{
9. configurable:true,
10. get(){ //有人读取name时调用
11. return person.name
12. },
13. set(value){ //有人修改name时调用
14. console.log('有人修改了name属性，我发现了，我要去更新界面！')
15. person.name = value
16. }
17. })
18. Object.defineProperty(p,'age',{
19. get(){ //有人读取age时调用
20. return person.age
21. },
22. set(value){ //有人修改age时调用
23. console.log('有人修改了age属性，我发现了，我要去更新界面！')
24. person.age = value
25. }
26. })

Vue3.0的响应式

上面例子中看到数组可以通过下标进行修改，我们再测试下增加属性和删除属性在Vue3中好不好使

1. <template>
2. <h1>博主的信息</h1>
3. <h2>姓名：{{ lee.name }}</h2>
4. <h2 v-show="lee.age">年龄：{{ lee.age }}</h2>
5. <h2 v-show="lee.sex">性别：{{ lee.sex }}</h2>
6. <h2>职业： {{ lee.job.type }}</h2>
7. <h2>工资：{{ lee.job.salary }}</h2>
8. <h2>爱好：{{ lee.hobby }}</h2>
9. <h3>测试数据：{{ lee.job.a.b.c }}</h3>
10. <button @click="changeInfo">修改信息</button>
11. <button @click="addsex">增加性别</button>
12. <button @click="deleteAge">删除年龄</button>
13. </template>
14. 
15. <script>
16. import { reactive } from "vue";
17. export default {
18. name: "App",
19. setup() {
20. // 数据
21. let lee = reactive({
22. name: "青阳子",
23. age: 18,
24. hobby: ["写博客", "研究前端", "看电影"],
25. job: {
26. type: "前端工程师",
27. salary: "30K",
28. a: {
29. b: {
30. c: 111,
31. },
32. },
33. },
34. });
35. 
36. // 方法
37. function changeInfo() {
38. lee.name = "三十年后的青阳子";
39. lee.age = 48;
40. lee.job.type = "退休老干部";
41. lee.job.salary = "80K";
42. lee.a.b.c = 222;
43. lee.hobby[0] = "看小说";
44. }
45. 
46. function addsex() {
47. lee.sex = "男";
48. }
49. function deleteAge() {
50. delete lee.age;
51. }
52. 
53. return {
54. lee,
55. changeInfo,
56. addsex,
57. deleteAge,
58. };
59. },
60. };
61. </script>

实现原理

通过 Proxy（代理）: 拦截对象中任意属性的变化, 包括：属性值的读写、属性的添加、属性的删除等。
通过Reflect（反射）: 对源对象的属性进行操作。
MDN文档中描述的Proxy与Reflect：

Proxy：developer.mozilla.org/zh-CN/docs/…
Reflect：developer.mozilla.org/zh-CN/docs/…

关于代理与反射，可以看这篇博文

模拟Vue3中实现响应式

1. let person = {
2. name:'青阳子',
3. age:28
4. }
5. 
6. const p = new Proxy(person,{
7. //有人读取p的某个属性时调用
8. get(target,propName){
9. console.log(`有人读取了p身上的${propName}属性`)
10. // return target[propName]
11. return Reflect.get(target,propName)
12. },
13. //有人修改p的某个属性、或给p追加某个属性时调用
14. set(target,propName,value){
15. console.log(`有人修改了p身上的${propName}属性，我要去更新界面了！`)
16. // target[propName] = value
17. return Reflect.set(target,propName,value)
18. },
19. //有人删除p的某个属性时调用
20. deleteProperty(target,propName){
21. console.log(`有人删除了p身上的${propName}属性，我要去更新界面了！`)
22. // return delete target[propName]
23. return Reflect.deleteProperty(target,propName)
24. }
25. })

⑤ `reactive`对比`ref`

从定义数据角度对比

ref用来定义：基本类型数据。
reactive用来定义：对象（或数组）类型数据。
备注：ref也可以用来定义对象（或数组）类型数据, 它内部会自动通过reactive转为代理对象。

从原理角度对比

ref通过类中的的getter与setter来实现响应式（数据劫持）。
reactive通过使用Proxy来实现响应式（数据劫持）, 并通过Reflect操作源对象内部的数据。

从使用角度对比

ref定义的数据：操作数据需要.value，读取数据时模板中直接读取不需要.value。
reactive定义的数据：操作数据与读取数据：均不需要.value。

⑥ `setup`的两个注意点

setup执行的时机

在beforeCreate之前执行一次，this是undefined。

setup的参数

将setup接收的两个参数(props, context)打印在控制台，如下

vue3项目中px2rem_vue.js

props：值为对象，包含：组件外部传递过来，且组件内部声明接收了的属性。
context：上下文对象

attrs: 值为对象，包含：组件外部传递过来，但没有在props配置中声明的属性, 相当于 this.$attrs。
slots: 收到的插槽内容, 相当于 this.$slots。
emit: 分发自定义事件的函数, 相当于 this.$emit。

测试一下

App组件和HelloWorld组件

父组件向子组件传递属性参数

1. <template>
2. <h1>博主的信息</h1>
3. <HelloWorld msg="你好啊" school="ABC"></HelloWorld>
4. </template>
5. 
6. <script>
7. import HelloWorld from "./components/HelloWorld.vue";
8. export default {
9. name: "App",
10. components: { HelloWorld },
11. };
12. </script>
13. 
14. <style></style>

1. <template>
2. <h2>姓名：{{ lee.name }}</h2>
3. </template>
4. 
5. <script>
6. import { reactive } from "@vue/reactivity";
7. export default {
8. name: "HelloWorld",
9. props: ['msg'], // 不写全会报警告
10. setup(props, context) {
11. let yk = reactive({
12. name: "青阳子",
13. });
14. console.log('props-----',props);
15. console.log()
16. console.log('context.attrs-----', context.attrs)
17. return { lee };
18. },
19. };
20. </script>

vue3项目中px2rem_数据_02

自定义事件

1. <template>
2. <h1>博主的信息</h1>
3. <HelloWorld @hello="showHelloMsg"></HelloWorld>
4. </template>
5. 
6. <script>
7. import HelloWorld from "./components/HelloWorld.vue";
8. export default {
9. name: "App",
10. setup() {
11. function showHelloMsg(value) {
12. alert(`你好啊，你触发了hello事件，我收到的参数是:${value}！`);
13. }
14. return { showHelloMsg };
15. },
16. components: { HelloWorld },
17. };
18. </script>

1. <template>
2. <h2>姓名：{{ lee.name }}</h2>
3. <button @click="test">测试触发一下HelloWorld组件的Hello事件</button>
4. </template>
5. 
6. <script>
7. import { reactive } from "@vue/reactivity";
8. export default {
9. name: "HelloWorld",
10. emits:["hello"], // 不写能执行，但是会报警告
11. setup(props, context) {
12. let yk = reactive({
13. name: "青阳子",
14. });
15. function test() {
16. context.emit("hello", "子组件的信息");
17. }
18. return { lee,test };
19. },
20. };
21. </script>

如果不用emits选项接收，会报警告，后续版本会改进，可以不写

插槽

默认插槽

1. <template>
2. <h1>博主的信息</h1>
3. <HelloWorld>
4. <span>青阳子，你好</span>
5. </HelloWorld>
6. </template>

 
 
1. <template>
2. <h2>姓名：{{ lee.name }}</h2>
3. <slot></slot>
4. </template>

具名插槽

1. <template>
2. <h1>博主的信息</h1>
3. <HelloWorld>
4. <template v-slot:leeMsg>
5. <span>青阳子，你好</span>
6. </template>
7. </HelloWorld>
8. </template>

 
 
1. <template>
2. <h2>姓名：{{ lee.name }}</h2>
3. <slot name="leeMsg"></slot>
4. </template>

⑦计算属性与监视

computed函数

情况一：监视ref定义的响应式数据

与Vue2.x中computed配置功能一致
写法

1. import {computed} from 'vue'
2. 
3. setup(){
4. ...
5. //计算属性 —— 简写
6. let fullName = computed(()=>{
7. return person.firstName + '-' + person.lastName
8. })
9. //计算属性 —— 完整
10. let fullName = computed({get(){return person.firstName + '-' + person.lastName},
11. set(value){
12. const nameArr = value.split('-')
13. person.firstName = nameArr[0]
14. person.lastName = nameArr[1]
15. }
16. })
17. }

watch函数
与Vue2.x中watch配置功能一致
两个小“坑”：

监视reactive定义的响应式数据时：oldValue无法正确获取、强制开启了深度监视（deep配置失效）。
监视reactive定义的响应式数据中某个属性时：deep配置有效。
情况一：监视ref定义的响应式数据

1. //情况一：监视ref定义的响应式数据
2. watch(sum,(newValue,oldValue)=>{
3. console.log('sum变化了',newValue,oldValue)
4. },{immediate:true})

如果用ref定义了一个对象

1. watch(person.value,(newValue,oldValue)=>{
2. console.log('person变化了',newValue,oldValue)
3. }) 
• 或者这样
1. watch(person,(newValue,oldValue)=>{
2. console.log('person变化了',newValue,oldValue)
3. },{deep: true})

情况二：监视多个ref定义的响应式数据

1. //情况二：监视多个ref定义的响应式数据
2. watch([sum,msg],(newValue,oldValue)=>{
3. console.log('sum或msg变化了',newValue,oldValue)
4. })

情况三：监视reactive定义的响应式数据

若watch监视的是reactive定义的响应式数据，则无法正确获得oldValue！！
若watch监视的是reactive定义的响应式数据，则强制开启了深度监视

1. watch(person,(newValue,oldValue)=>{
2. console.log('person变化了',newValue,oldValue)
3. },{immediate:true,deep:false}) //此处的deep配置不再奏效

情况四：监视reactive定义的响应式数据中的某个属性

1. //情况四：监视reactive定义的响应式数据中的某个属性
2. watch(()=>person.job,(newValue,oldValue)=>{
3. console.log('person的job变化了',newValue,oldValue)
4. },{immediate:true,deep:true})

情况五：监视reactive定义的响应式数据中的某些属性

1. //情况五：监视reactive定义的响应式数据中的某些属性
2. watch([()=>person.job,()=>person.name],(newValue,oldValue)=>{
3. console.log('person的job变化了',newValue,oldValue)
4. },{immediate:true,deep:true})

特殊情况

1. //特殊情况
2. watch(()=>person.job,(newValue,oldValue)=>{
3. console.log('person的job变化了',newValue,oldValue)
4. },{deep:true}) //此处由于监视的是reactive素定义的对象中的某个属性，所以deep配置有效

watchEffect函数

watch的套路是：既要指明监视的属性，也要指明监视的回调。
watchEffect的套路是：不用指明监视哪个属性，监视的回调中用到哪个属性，那就监视哪个属性。
watchEffect有点像computed：

但computed注重的计算出来的值（回调函数的返回值），所以必须要写返回值。
而watchEffect更注重的是过程（回调函数的函数体），所以不用写返回值。

1. //watchEffect所指定的回调中用到的数据只要发生变化，则直接重新执行回调。
2. watchEffect(()=>{
3. const x1 = sum.value
4. const x2 = person.age
5. console.log('watchEffect配置的回调执行了')
6. })

⑧ toRef 和 toRefs

作用：然源数据也跟着动态变化。

应用：toRef 和 ref 都是创建一个响应式数据，但是ref 创建的数据改变时不会影响源数据，此时则需要toRef 来使源数据跟着改变。

应用方法：

<template>
  <div>
    <div>num 1 :{{ age1 }}</div>
    <div>num 2 :{{ age2 }}</div>
    <button @click="changeInfo">改变</button>
  </div>
</template>

<script>
import { ref, reactive, toRef } from "vue";
export default {
  name: "App",

  props: ["giveson"],

  setup() {
    // 数据
    let lee = reactive({
      num1: 1,
      num2: 2,
    });
ref(lee.num1);
toRef(lee, "num2");
    // 方法
    function changeInfo() {
      age1.value = 20;
      age2.value = 58;
      console.log(lee);
    }
    return {
      age2,
      changeInfo,
      age1,
    };
  },
};
</script>

可以看出来num1源数据没变，num2源数据变了

至于toRefs有什么用：

要用对象里面的数据一条条的写 toRef 太麻烦了，所以直接用 ...toRefs(对象) 则可以直接使用

<template>
  <div>
    <div>num 1 :{{ data.num1 }}</div>
    <button @click="changeInfo">改变</button>
  </div>
</template>
 
<script>
import { reactive, toRefs } from "vue";
export default {
  name: "App",

  props: ["giveson"],

  setup() {
    // 数据
    let lee = reactive({
      num1: 1,
      num2: 2,
    });
    let data = toRefs(lee);

    // 方法
    function changeInfo() {
      data.num1.value = 10;
      console.log(data);
    }
    return {
      data,
      changeInfo,
    };
  },
};
</script>

还有一种用法，则是为了界面好看使用 toRef 或 toRefs

<template>
  <div>
    <div>num 1 :{{ num1 }}</div>
    <button @click="changeInfo">改变</button>
  </div>
</template>
 
<script>
import { reactive, toRefs } from "vue";
export default {
  name: "App",

  props: ["giveson"],

  setup() {
    // 数据
    let lee = reactive({
      num1: 1,
    });
    // 方法
    function changeInfo() {
      lee.num1 = 10;
      console.log(lee);
    }
    return {
      ...toRefs(lee),
      changeInfo,
    };
  },
};
</script>

在页面可直接使用num1

vue3项目中px2rem_vue.js_03

五、其它 Composition API

1. `shallowReactive` 与 `shallowRef`

shallowReactive：只处理对象最外层属性的响应式（浅响应式）。
shallowRef：只处理基本数据类型的响应式, 不进行对象的响应式处理。
什么时候使用?

如果有一个对象数据，结构比较深, 但变化时只是外层属性变化 ===> shallowReactive。
如果有一个对象数据，后续功能不会修改该对象中的属性，而是生新的对象来替换 ===> shallowRef。

2. `readonly` 与 `shallowReadonly`

readonly: 让一个响应式数据变为只读的（深只读）。
shallowReadonly：让一个响应式数据变为只读的（浅只读）。
应用场景: 不希望数据被修改时。

3. `toRaw` 与 `markRaw`

toRaw

作用：将一个由reactive生成的响应式对象转为普通对象。
使用场景：用于读取响应式对象对应的普通对象，对这个普通对象的所有操作，不会引起页面更新。

markRaw

作用：标记一个对象，使其永远不会再成为响应式对象。
应用场景:

有些值不应被设置为响应式的，例如复杂的第三方类库等。
当渲染具有不可变数据源的大列表时，跳过响应式转换可以提高性能。

4. `customRef`

作用：创建一个自定义的 ref，并对其依赖项跟踪和更新触发进行显式控制。
实现防抖效果

<template>
  <div>
    <input type="text" v-model="changnum" />
    <div>{{ changnum }}</div>
  </div>
</template>
 
<script>
import { customRef } from "vue";
export default {
  name: "App",

  props: ["giveson"],

  setup() {
    // 方法
    function changfn(value, num) {
      let timer;
      return customRef((trak, trigger) => {
        return {
          get() {
            trak();
            return value;
          },

          set(newValue) {
            clearTimeout(timer);
            timer = setTimeout(() => {
              value = newValue;
              trigger();
            }, num);
          },
        };
      });
    }

    let changnum = changfn("", 5000);
    return {
      changnum,
    };
  },
};
</script>

5. `provide` 与 `inject`

这个和uniapp中的 $emit和$on,比较相似，

用 provide('传的值的名'，传的值) 传值，用inject('传的值的名')来接收

2、自己配置router，axios，vuex，element-plus和前端环境变量配置

npm i vue-router@next axios@next vuex@next element-plus -S

大S表示生产环境。

1.router

配置如下

import {
    createRouter,
    createWebHashHistory
} from "vue-router";
import Login from '../view/Login'
const routes = [{
    path: '/',
    redirect: '/login'
}, {
    path: '/login',
    name: 'Login',
    mete: {
        title: '登陆页面'
    },
    component: Login
}, ]

const router = createRouter({
    history: createWebHashHistory(),
    routes
})

export default router

main.js中的配置

import {
    createApp
} from 'vue'
import App from './App.vue'
import router from './router'

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

2.element-plus

在main.js中的配置

import {
    createApp
} from 'vue'
import App from './App.vue'
import router from './router'
//element组件
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'


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

但是想使用icon图标则需要引用

import {
    createApp
} from 'vue'
import App from './App.vue'
import router from './router'
//element组件
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
//引入所有element中icon图标名为 ELIcons
import * as ELIcons from '@element-plus/icons-vue'

const app = createApp(App)
//承接第10行，遍利ELIcons，然后把所有组件都导入app中
for (let iconName in ELIcons) {
    app.component(iconName, ELIcons[iconName])
}


app.use(router).use(ElementPlus).mount('#app')

3.vuex

1.在src下创建一个文件夹叫store，再在此文件夹下创建一个index.js文件。

代码：

import {
    createStore
} from 'vuex'

// Create a new store instance.
const store = createStore({
    state() {
        return {
            count: 0
        }
    },
    mutations: {
        increment(state) {
            state.count++
        }
    }
})

export default store

在main.js中的配置

import {
    createApp
} from 'vue'
import App from './App.vue'
import router from './router'
//element组件
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
//引入所有element中icon图标名为 ELIcons
import * as ELIcons from '@element-plus/icons-vue'

//引用vuex
import store from './store/index'

const app = createApp(App)
//承接第10行，遍利ELIcons，然后把所有组件都导入app中
for (let iconName in ELIcons) {
    app.component(iconName, ELIcons[iconName])
}


app.use(router).use(ElementPlus).use(store).mount('#app')

4.前端环境变量配置

1.为什么配置环境变量：

根据不同的开发环境，加载不同的文件。如果手动修改代码中加载配置文件的路径也可以，但是太麻烦，最重要的是很low。

5.封装Axios

1.在src下创建一个文件夹叫until，再在此文件夹下创建一个request.js文件。

代码：

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。

上一篇：现在流行哪个消息队列框架

下一篇：pve 配置openstack

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯