Vue3全部笔记

JavaLearnerZGQ2026-01-19 9:59

@TOC

📕 跟着尚硅谷的张天禹老师的笔记。
👉老师的笔记

1、基于 vite 创建Vue3工程

🖊 node.js下载地址👉https://nodejs.org/en/download

ts 复制代码

import './assets/main.css'
// 从 Vue 核心库中导入 createApp 方法，该方法用于创建一个新的 Vue 应用实例
import { createApp } from 'vue'

// 导入根组件 App.vue，这是整个 Vue 应用的根组件，所有页面和组件都挂载在它之下
import App from './App.vue'

// 1. 调用 createApp 方法并传入根组件 App，创建一个 Vue 应用实例
// 2. 调用实例的 mount 方法，将应用挂载到页面中 id 为 app 的 DOM 元素上
//    这一步完成后，Vue 应用就会在页面的 #app 元素内渲染出来
createApp(App).mount('#app')

🍀hello-vue3代码

2、Vue3工程中可以写Vue2的选项式代码

在env.d.ts中写入vue的声明文件就可以了

ts 复制代码

/// <reference types="vite/client" />

// src/shims-vue.d.ts
// 声明.vue文件的模块类型，让TypeScript能够识别.vue文件
declare module '*.vue' {
    // 导入Vue的组件类型定义
    import type { DefineComponent } from 'vue'
    // 定义.vue文件导出的组件类型，泛型参数依次为：Props类型、Emits类型、组件实例类型
    const component: DefineComponent<{}, {}, any>
    // 导出组件类型，供TypeScript识别
    export default component
}

代码示例

3、setup函数

setup是Vue3中一个新的配置项，值是一个函数，它是 Composition API "表演的舞台 " ，组件中所用到的：数据、方法、计算属性、监视...等等，均配置在setup中。

它的执行时机比vue2的beforeCreate还早
setup函数返回的对象中的内容，可直接在模板中使用
setup函数直接返回一个函数的话，该函数的返回值会直接显示的页面上

要想实现上图的效果是要安装一个插件的👇

shell 复制代码

npm i vite-plugin-vue-setup-extend -D

还要配置一下👉vite.config.ts