Vue3从入门到精通(一)

这篇具有很好参考价值的文章主要介绍了Vue3从入门到精通(一)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Vue3简介

Vue3是Vue.js的最新版本,于2020年9月18日正式发布。Vue3相比Vue2有很多改进和优化,包括但不限于:

  1. 更快的渲染速度:Vue3通过使用Proxy代理对象和优化虚拟DOM算法等方式,提高了渲染性能。

  2. 更小的体积:Vue3的体积比Vue2更小,打包后的文件更小,加载速度更快。

  3. 更好的类型支持:Vue3对TypeScript的支持更加友好,提供了更好的类型支持。

  4. 更好的组合式API:Vue3提供了更好的组合式API,使得组件的复用和维护更加方便。

  5. 更好的Tree-shaking支持:Vue3对Tree-shaking的支持更加完善,可以更好地优化打包后的代码。

总之,Vue3是一个更加优秀的版本,可以帮助开发者更好地构建高性能、易维护的Web应用程序。

Vue API风格

Vue API风格主要有两种:对象风格和函数风格。

  1. 对象风格

对象风格是Vue 2.x版本的API风格,它将Vue实例作为一个对象,通过对象的属性和方法来操作Vue实例。例如:

var vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  methods: {
    showMessage: function () {
      alert(this.message)
    }
  }
})
​
vm.message = 'Hello World!'
vm.showMessage()

在上面的代码中,我们使用对象风格的API来创建Vue实例,设置数据和方法,并通过vm对象来操作Vue实例。

  1. 函数风格

函数风格是Vue 3.x版本的API风格,它将Vue实例作为一个函数,通过函数的参数和返回值来操作Vue实例。例如:

import { createApp } from 'vue'
​
const app = createApp({
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  methods: {
    showMessage() {
      alert(this.message)
    }
  }
})
​
const vm = app.mount('#app')
​
vm.message = 'Hello World!'
vm.showMessage()

在上面的代码中,我们使用函数风格的API来创建Vue实例,设置数据和方法,并通过app.mount()方法来挂载Vue实例,然后通过vm对象来操作Vue实例。

总的来说,函数风格的API更加简洁和易于理解,而且更加符合现代JavaScript的编程风格。因此,Vue 3.x版本的API采用了函数风格。

Vue3开发前的准备

在开始使用Vue3进行开发之前,需要进行以下准备工作:

  1. 安装Node.js和npm

Vue3需要Node.js和npm的支持,因此需要先安装它们。可以在Node.js官网下载对应版本的安装包进行安装。

  1. 安装Vue CLI

Vue CLI是Vue.js官方提供的脚手架工具,可以帮助我们快速创建Vue项目。可以使用以下命令全局安装Vue CLI:

npm install -g @vue/cli
  1. 选择编辑器

选择一个适合自己的编辑器进行开发,推荐使用Visual Studio Code,它有很多Vue相关的插件和工具。

  1. 学习Vue基础知识

在使用Vue3进行开发之前,需要先掌握Vue的基础知识,包括Vue的核心概念、Vue组件、Vue指令、Vue生命周期等。

  1. 学习TypeScript

Vue3使用TypeScript进行开发,因此需要先学习TypeScript的基础知识,包括TypeScript的数据类型、接口、类、泛型等。

总的来说,学习Vue3需要一定的前置知识,需要掌握Node.js、npm、Vue CLI、编辑器、Vue基础知识和TypeScript等知识点。

vue3 项目目录结构

Vue3项目的目录结构与Vue2有些不同,主要是因为Vue3使用了新的模块化系统和TypeScript语言。

以下是一个Vue3项目的典型目录结构:

├── public
│   ├── index.html
│   └── favicon.ico
├── src
│   ├── assets
│   ├── components
│   ├── router
│   ├── store
│   ├── utils
│   ├── views
│   ├── App.vue
│   └── main.ts
├── tests
├── node_modules
├── package.json
├── tsconfig.json
└── README.md
  • public:存放静态资源文件,如HTML文件、图片、图标等。

  • src:存放源代码文件。

    • assets:存放静态资源文件,如CSS、图片、字体等。

    • components:存放Vue组件文件。

    • router:存放Vue Router路由文件。

    • store:存放Vuex状态管理文件。

    • utils:存放工具函数文件。

    • views:存放页面组件文件。

    • App.vue:根组件文件。

    • main.ts:入口文件,包括Vue实例的创建和挂载等。

  • tests:存放测试文件。

  • node_modules:存放项目依赖的第三方库。

  • package.json:存放项目的配置信息和依赖库信息。

  • tsconfig.json:存放TypeScript编译器的配置信息。

  • README.md:项目说明文件。

总的来说,Vue3项目的目录结构与Vue2有些不同,但是基本的结构还是相似的,包括静态资源文件、源代码文件、测试文件、依赖库信息等。

vue3 模板语法

Vue3的模板语法与Vue2的模板语法基本相同,但也有一些变化。以下是Vue3的模板语法:

  1. 插值表达式

Vue3的插值表达式使用{{}},例如:

<div>{{ message }}</div>
  1. 指令

Vue3的指令使用v-前缀,例如:

<input v-model="message">

常用的指令包括:

  • v-if:条件渲染。

  • v-for:循环渲染。

  • v-bind:绑定属性。

  • v-on:绑定事件。

  • v-model:双向绑定。

  1. 计算属性

Vue3的计算属性使用computed关键字,例如:

<template>
  <div>{{ reversedMessage }}</div>
</template>
​
<script>
export default {
  data() {
    return {
      message: 'Hello World'
    }
  },
  computed: {
    reversedMessage() {
      return this.message.split('').reverse().join('')
    }
  }
}
</script>
  1. 监听器

Vue3的监听器使用watch关键字,例如:

<template>
  <div>{{ message }}</div>
</template>
​
<script>
export default {
  data() {
    return {
      message: 'Hello World'
    }
  },
  watch: {
    message(newValue, oldValue) {
      console.log(newValue, oldValue)
    }
  }
}
</script>
  1. 生命周期

Vue3的生命周期与Vue2基本相同,但是使用了新的API。例如:

<template>
  <div>{{ message }}</div>
</template>
​
<script>
import { onMounted, onUpdated, onUnmounted } from 'vue'
​
export default {
  data() {
    return {
      message: 'Hello World'
    }
  },
  setup() {
    onMounted(() => {
      console.log('mounted')
    })
    onUpdated(() => {
      console.log('updated')
    })
    onUnmounted(() => {
      console.log('unmounted')
    })
  }
}
</script>

总的来说,Vue3的模板语法与Vue2基本相同,但是使用了新的API,包括computedwatch和生命周期等。

vue3 属性绑定

在Vue3中,属性绑定使用v-bind:或简写的:,例如:

<template>
  <div :class="className"></div>
</template>
​
<script>
export default {
  data() {
    return {
      className: 'red'
    }
  }
}
</script>

上面的代码中,:class绑定了一个名为className的data属性,这个属性的值为'red',所以<div>元素会被添加一个class属性,值为'red'

除了绑定data属性,还可以绑定表达式、计算属性、甚至是方法的返回值。例如:

<template>
  <div :class="isActive ? 'active' : 'inactive'"></div>
  <div :class="getClass()"></div>
</template>
​
<script>
export default {
  data() {
    return {
      isActive: true
    }
  },
  methods: {
    getClass() {
      return this.isActive ? 'active' : 'inactive'
    }
  }
}
</script>

上面的代码中,:class绑定了一个三元表达式和一个方法的返回值,这两个值都可以被作为class属性的值。

需要注意的是,在Vue3中,绑定属性时,可以使用v-bind:或简写的:,但是在绑定事件时,必须使用v-on:或简写的@。例如:

<template>
  <button @click="handleClick">Click me</button>
</template>
​
<script>
export default {
  methods: {
    handleClick() {
      console.log('clicked')
    }
  }
}
</script>

上面的代码中,@click绑定了一个handleClick方法,这个方法会在按钮被点击时被调用。

vue3 条件渲染

Vue3中的条件渲染和Vue2类似,使用v-ifv-else指令来控制元素的显示和隐藏。

示例代码如下:

<template>
  <div>
    <div v-if="show">显示内容</div>
    <div v-else>隐藏内容</div>
  </div>
</template>
​
<script>
export default {
  data() {
    return {
      show: true
    }
  }
}
</script>

上面的代码中,根据show的值来决定显示哪个<div>元素。

除了v-ifv-else,还有v-else-if可以用来实现多个条件的判断。

示例代码如下:

<template>
  <div>
    <div v-if="type === 'A'">类型A</div>
    <div v-else-if="type === 'B'">类型B</div>
    <div v-else-if="type === 'C'">类型C</div>
    <div v-else>未知类型</div>
  </div>
</template>
​
<script>
export default {
  data() {
    return {
      type: 'B'
    }
  }
}
</script>

上面的代码中,根据type的值来决定显示哪个<div>元素。

需要注意的是,v-if是惰性的,只有当条件为真时才会渲染元素,否则不会渲染。而v-show则是直接控制元素的显示和隐藏,不管条件是否为真,元素都会被渲染,只是样式被设置为display: none

vue3 列表渲染

Vue3中的列表渲染和Vue2类似,使用v-for指令来遍历数组或对象,并生成对应的元素。

示例代码如下:

<template>
  <ul>
    <li v-for="(item, index) in list" :key="index">{{ item }}</li>
  </ul>
</template>
​
<script>
export default {
  data() {
    return {
      list: ['item1', 'item2', 'item3']
    }
  }
}
</script>

上面的代码中,使用v-for指令遍历list数组,并生成对应的<li>元素。

除了数组,也可以遍历对象,例如:

<template>
  <ul>
    <li v-for="(value, key) in obj" :key="key">{{ key }}: {{ value }}</li>
  </ul>
</template>
​
<script>
export default {
  data() {
    return {
      obj: {
        key1: 'value1',
        key2: 'value2',
        key3: 'value3'
      }
    }
  }
}
</script>

上面的代码中,使用v-for指令遍历obj对象,并生成对应的<li>元素。

需要注意的是,每个v-for都需要指定一个唯一的key属性,用来标识每个元素的唯一性,以便在更新时能够正确地识别每个元素。

vue3 通过key管理状态

在Vue3中,通过key属性可以管理组件或元素的状态。当一个组件或元素的key属性发生变化时,Vue会认为它是一个不同的组件或元素,从而重新渲染它。

示例代码如下:

<template>
  <div>
    <button @click="toggle">切换</button>
    <div v-if="show" :key="1">显示内容</div>
    <div v-else :key="2">隐藏内容</div>
  </div>
</template>
​
<script>
export default {
  data() {
    return {
      show: true
    }
  },
  methods: {
    toggle() {
      this.show = !this.show
    }
  }
}
</script>

上面的代码中,使用key属性来管理<div>元素的状态。当show变量的值发生变化时,<div>元素的key属性也会发生变化,从而重新渲染<div>元素。

需要注意的是,key属性的值必须是唯一的,不能重复。如果重复了,会导致Vue无法正确地识别每个组件或元素的状态,从而导致渲染错误。

vue3 事件处理

在Vue3中,事件处理的方式与Vue2相似,可以使用@v-on指令来绑定事件。不同之处在于,Vue3中取消了.sync修饰符,同时提供了新的修饰符和事件API。

  1. 绑定事件

可以使用@v-on指令来绑定事件,语法与Vue2相同。示例如下:

<template>
  <button @click="handleClick">Click me</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('Button clicked!')
    }
  }
}
</script>

上面的代码中,使用@click指令来绑定handleClick方法,当按钮被点击时,会触发handleClick方法。

  1. 事件修饰符

Vue3中提供了新的事件修饰符,包括.stop.prevent.capture.self.once.passive。示例如下:

<template>
  <div @click.stop="handleClick">Click me</div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('Div clicked!')
    }
  }
}
</script>

上面的代码中,使用.stop修饰符来阻止事件冒泡,当div元素被点击时,不会触发其父元素的点击事件。

  1. 动态事件名

在Vue3中,可以使用方括号来绑定动态事件名。示例如下:

<template>
  <button @[eventName]="handleClick">Click me</button>
</template>
​
<script>
export default {
  data() {
    return {
      eventName: 'click'
    }
  },
  methods: {
    handleClick() {
      console.log('Button clicked!')
    }
  }
}
</script>

上面的代码中,使用@[eventName]指令来绑定动态事件名,事件名为eventName的值。

  1. 自定义事件

在Vue3中,可以使用createApp方法的provideinject选项来实现自定义事件的传递。示例如下:

// App.vue
<template>
  <button @click="handleClick">Click me</button>
</template>
​
<script>
import { provide } from 'vue'
import EventBus from './EventBus'
​
export default {
  setup() {
    provide('eventBus', EventBus)
  },
  methods: {
    handleClick() {
      EventBus.emit('customEvent', 'Hello, Vue3!')
    }
  }
}
</script>
​
// EventBus.js
import mitt from 'mitt'
​
const EventBus = mitt()
​
export default EventBus
​
// ChildComponent.vue
<template>
  <div>{{ message }}</div>
</template>
​
<script>
import { inject } from 'vue'
​
export default {
  setup() {
    const eventBus = inject('eventBus')
    const message = ref('')
​
    eventBus.on('customEvent', (data) => {
      message.value = data
    })
​
    return {
      message
    }
  }
}
</script>

上面的代码中,使用provide方法将事件总线对象EventBus注入到根组件中,然后在子组件中使用inject方法获取事件总线对象,并通过on方法监听自定义事件customEvent,当事件触发时,更新message的值。

vue3 事件传参

在Vue3中,事件传参的方式和Vue2基本相同,可以使用$event来传递事件对象,也可以使用函数来传递自定义参数。

示例代码如下:

<template>
  <div>
    <button @click="handleClick($event, '参数')">点击</button>
  </div>
</template>
​
<script>
export default {
  methods: {
    handleClick(event, arg) {
      console.log(event) // 输出事件对象
      console.log(arg) // 输出自定义参数
    }
  }
}
</script>

上面的代码中,使用$event来传递事件对象,使用'参数'来传递自定义参数。

另外,如果需要在事件处理函数中访问组件实例,可以使用箭头函数来绑定作用域,例如:

<template>
  <div>
    <button @click="() => handleClick('参数')">点击</button>
  </div>
</template>
​
<script>
export default {
  methods: {
    handleClick(arg) {
      console.log(this) // 输出组件实例
      console.log(arg) // 输出自定义参数
    }
  }
}
</script>

上面的代码中,使用箭头函数来绑定作用域,从而在事件处理函数中访问组件实例。

vue3 事件修饰符

在Vue3中,事件修饰符的使用方式和Vue2基本相同,可以通过在事件名后面添加.修饰符的方式来使用事件修饰符。

常用的事件修饰符包括:

  • .stop:阻止事件冒泡

  • .prevent:阻止事件默认行为

  • .capture:使用事件捕获模式

  • .self:只在事件目标自身触发时触发事件

  • .once:只触发一次事件

  • .passive:告诉浏览器该事件不会调用preventDefault()方法,可以优化页面滚动性能

示例代码如下:

<template>
  <div>
    <button @click.stop="handleClick">点击</button>
    <a href="#" @click.prevent="handleClick">链接</a>
    <div @click.capture="handleClick">容器</div>
    <button @click.self="handleClick">点击</button>
    <button @click.once="handleClick">点击</button>
    <div @scroll.passive="handleScroll">滚动</div>
  </div>
</template>
​
<script>
export default {
  methods: {
    handleClick() {
      console.log('点击事件')
    },
    handleScroll() {
      console.log('滚动事件')
    }
  }
}
</script>

上面的代码中,使用不同的事件修饰符来控制事件的行为。例如,使用.stop修饰符来阻止事件冒泡,使用.prevent修饰符来阻止事件默认行为,使用.capture修饰符来使用事件捕获模式,使用.self修饰符来只在事件目标自身触发时触发事件,使用.once修饰符来只触发一次事件,使用.passive修饰符来告诉浏览器该事件不会调用preventDefault()方法,可以优化页面滚动性能。

vue3 计算属性

在Vue3中,计算属性的使用方式和Vue2基本相同,可以通过在组件的computed选项中定义计算属性来计算和缓存值。

示例代码如下:

<template>
  <div>
    <p>商品数量:{{ quantity }}</p>
    <p>商品总价:{{ totalPrice }}</p>
  </div>
</template>
​
<script>
export default {
  data() {
    return {
      price: 10,
      count: 2
    }
  },
  computed: {
    quantity() {
      return this.count
    },
    totalPrice() {
      return this.price * this.count
    }
  }
}
</script>

上面的代码中,使用computed选项来定义计算属性quantitytotalPrice,分别计算商品数量和商品总价。

在模板中,可以像访问普通属性一样访问计算属性,例如{{ quantity }}{{ totalPrice }}

需要注意的是,在Vue3中,计算属性的返回值可以是一个函数,这样可以实现动态计算属性。示例代码如下:

<template>
  <div>
    <p>商品数量:{{ quantity }}</p>
    <p>商品总价:{{ totalPrice }}</p>
  </div>
</template>
​
<script>
export default {
  data() {
    return {
      price: 10,
      count: 2,
      discount: 0.8
    }
  },
  computed: {
    quantity() {
      return this.count
    },
    totalPrice() {
      return () => this.price * this.count * this.discount
    }
  }
}
</script>

上面的代码中,计算属性totalPrice返回一个函数,这个函数会动态计算商品总价,考虑到折扣可能会变化,因此需要动态计算商品总价。

vue3 class绑定

在Vue3中,可以使用v-bind:class指令来绑定一个对象或数组来动态地设置一个元素的class属性。

下面是使用对象语法绑定class的示例代码:

<template>
  <div :class="{ active: isActive, 'text-danger': hasError }">Hello, Vue3!</div>
</template>
​
<script>
export default {
  data() {
    return {
      isActive: true,
      hasError: false
    }
  }
}
</script>

上面的代码中,使用:class指令来绑定一个对象,这个对象的属性名是class名称,属性值是一个布尔值,表示是否应用这个class。在这个示例中,如果isActivetrue,则会应用active这个class,如果hasErrortrue,则会应用text-danger这个class。

下面是使用数组语法绑定class的示例代码:

<template>
  <div :class="[isActive ? 'active' : '', errorClass]">Hello, Vue3!</div>
</template>
​
<script>
export default {
  data() {
    return {
      isActive: true,
      errorClass: 'text-danger'
    }
  }
}
</script>

上面的代码中,使用:class指令来绑定一个数组,这个数组的元素可以是字符串或对象。如果数组元素是字符串,则表示应用这个class;如果数组元素是对象,则表示应用这个对象中的class。

在这个示例中,如果isActivetrue,则会应用active这个class,如果errorClasstext-danger,则会应用text-danger这个class。

需要注意的是,在Vue3中,可以使用动态组件来动态渲染不同的组件,这个功能可以使用<component>元素和is特性来实现。示例代码如下:

<template>
  <div>
    <button @click="currentComponent = 'ComponentA'">ComponentA</button>
    <button @click="currentComponent = 'ComponentB'">ComponentB</button>
    <component :is="currentComponent"></component>
  </div>
</template>
​
<script>
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'
​
export default {
  components: {
    ComponentA,
    ComponentB
  },
  data() {
    return {
      currentComponent: 'ComponentA'
    }
  }
}
</script>

上面的代码中,使用<component>元素和is特性来动态渲染不同的组件。在这个示例中,点击ComponentA按钮会渲染ComponentA组件,点击ComponentB按钮会渲染ComponentB组件。

vue3 style 绑定

在Vue3中,可以使用v-bind指令或简写的:来动态绑定样式。

  1. 绑定单个样式

可以使用对象语法来绑定单个样式,对象的属性名为样式名,属性值为样式值。示例如下:

<template>
  <div :style="{ color: textColor }">Hello, Vue3!</div>
</template>
​
<script>
export default {
  data() {
    return {
      textColor: 'red'
    }
  }
}
</script>

上面的代码中,使用:style指令来绑定color样式,样式的值为textColor的值。

  1. 绑定多个样式

可以使用对象语法来绑定多个样式,对象的属性名为样式名,属性值为样式值。示例如下:

<template>
  <div :style="{ color: textColor, fontSize: fontSize + 'px' }">Hello, Vue3!</div>
</template>
​
<script>
export default {
  data() {
    return {
      textColor: 'red',
      fontSize: 16
    }
  }
}
</script>

上面的代码中,使用:style指令来绑定colorfontSize两个样式,样式的值分别为textColorfontSize的值。

  1. 绑定样式数组

可以使用数组语法来绑定多个样式,数组中的元素为样式对象。示例如下:

<template>
  <div :style="[baseStyles, customStyles]">Hello, Vue3!</div>
</template>
​
<script>
export default {
  data() {
    return {
      baseStyles: {
        color: 'red',
        fontSize: '16px'
      },
      customStyles: {
        fontWeight: 'bold'
      }
    }
  }
}
</script>

上面的代码中,使用:style指令来绑定baseStylescustomStyles两个样式对象,样式的值为两个对象的合并结果。

  1. 绑定样式对象

可以使用计算属性来动态绑定样式对象。示例如下:

<template>
  <div :style="computedStyles">Hello, Vue3!</div>
</template>
​
<script>
export default {
  data() {
    return {
      textColor: 'red',
      fontSize: 16
    }
  },
  computed: {
    computedStyles() {
      return {
        color: this.textColor,
        fontSize: this.fontSize + 'px'
      }
    }
  }
}
</script>

上面的代码中,使用计算属性computedStyles来动态绑定样式对象,样式的值为计算属性的返回值。文章来源地址https://www.toymoban.com/news/detail-474274.html

到了这里,关于Vue3从入门到精通(一)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 下一代 Vue3 Devtools 正式开源

    Vue DevTools 是一个旨在增强 Vue 开发人员体验的工具,它提供了一些功能来帮助开发者更好地了解 Vue 应用程序。 Vue DevTools:Unleash Vue Developer Experience. Enhance your Vue development journey with an amazing experience! 典型的功能特征包括: Pages:显示当前的路由以及一些有用的信息,并提供在

    2024年01月18日
    浏览(45)
  • Vue3正式发布那么久了,你认识Pinia了吗?

    个人简介 👀 个人主页: 前端杂货铺 🙋‍♂️ 学习方向: 主攻前端方向,正逐渐往全干发展 📃 个人状态: 研发工程师,现效力于中国工业软件事业 🚀 人生格言: 积跬步至千里,积小流成江海 🥇 推荐学习:🍍前端面试宝典 🍉Vue2 🍋Vue3 🍓Vue2/3项目实战 🥝Node.js🍒

    2024年02月16日
    浏览(27)
  • Java大师之路:从入门到精通的完整学习指南【文末送书-18】

    Java是一门广泛应用于企业级应用和移动应用开发的高级编程语言。无论是初学者还是有经验的开发者,深入了解Java的方方面面都是一项重要的任务。本文将带领读者从Java的基础入门开始,逐步深入,直至精通这门强大的编程语言。 在开始学习Java之前,理解一些基础概念是

    2024年01月24日
    浏览(75)
  • 2023最新版Android studio安装入门教程(非常详细)从零基础入门到精通,看完这一篇就够了

    目录 JDK安装与配置 一、下载JDK 二、JDK安装 三、JDK的环境配置 四、JDK的配置验证 Android studio安装 Android studio连接手机真机调试(以华为鸿蒙为例) 一、新建一个android项目 二、进入项目面板 三、配置Android Studio 四、安装手机驱动程序 五、连接手机 六、运行程序 七、查看手

    2024年02月10日
    浏览(46)
  • 在vue3项目中使用新版高德地图

    高德开发平台 : 高德开放平台 | 高德地图API (amap.com) 1. 首先你要注册好账号登录 2. 获取key和密钥    自2021年12月02日升级,升级之后所申请的 key 必须配备安全密钥  jscode  一起使用         按 NPM 方式安装使用 Loader :         在页面中通过NPM 方式安装的使用 :    

    2023年04月19日
    浏览(67)
  • 【Git 从入门到精通】2023最新版的Git安装与卸载每一步附详细讲解

    首先去官网下载Git安装包,可以直接在百度搜索Git,以下几个网站都可以。也可以点击直达,官网上下载如果不科学上网的话还是很慢的,所以我准备了一份放在了百度网盘内,需要的可以去评论区拿。 当从上面网站或者百度网盘中下载完exe文件之后,咱们就可以开始安装了

    2024年02月16日
    浏览(55)
  • 新版 Next.js 从入门到入土

    本教程用的Next.js 是 13 版本 完善的React项目,搭建轻松 自带数据同步,解决服务端渲染最大难点 丰富的插件 灵活配置 手动创建 初始化 安装所需要的依赖包 增加快捷命令 创建测试文件 在根目录下创建pages文件夹,并在该文件下创建 index.js pages 文件夹是Next 规定的,在这个

    2024年02月10日
    浏览(50)
  • vue3中使用vue-i18n

    1.先在项目中下载vue-i18n 2.1 .为了结构清晰,在src目录下创建一个lang文件夹 2.2 . 在lang文件夹分别下创建两个文件:en.js    /    zh.js代表两种语言 en.js: zh.js: 2.3 . 接着在lang文件夹下创建一个index.js文件: 现在目录结构是这样: 3. 在main.js中引入并use刚才创建的index.js文件:

    2024年02月06日
    浏览(50)
  • Vue3语法插件Volar在vsCode中搜不到,Volar正式更名为Vue-Official

    今天拿Vue3的cli练手,之前用的语法插件是Vue2的Vetur,对于Vue3来说该插件不能完美匹配了,所以就想切换回Volar,结果万万没想到,找不着了???!!! 这是因为Volar正式更名为Vue-Official了 如果之前装过Volar插件的,其实不用担心,因为更名后的Vue-Official,它会自动给你将之

    2024年04月08日
    浏览(50)
  • qiankun:react18主应用 + 微应用 react18 + vue3

    一:主应用 搭建react项目 安装Antd 在 index.js中引入 安装react-router : 在 index.js中引入 安装 qiankun : 在主应用中注册微应用,在 index.js中引入 注:子应用嵌入到主应用的地方,id要跟index.js下registerMicroApps里面的container设置一致 修改App.js文件,将如下代码放入App.js 修改App.css样

    2024年02月16日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包