首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue3+vite+pinia+ts+elementUI学习

vue3+vite+pinia+ts+elementUI学习详细图文记录

2026-11-01 14:38:17 作者：のsmile

这篇文章主要介绍了vue3+vite+pinia+ts+elementUI学习详细图文记录的相关资料,文中通过代码详细讲解了Vue2与Vue3区别、setup组合式API、Pinia状态管理及TypeScript实战应用,需要的朋友可以参考下

1. 创建项目

2.Vue3 使用

2-1.Vue2 和 Vue3 区别？

（1）v-if 和 v-for 优先级

vue2.x 版本中，v-for > v-if

vue3.x版本中，v-if > v-for

（2）v-for 中的 Ref 数组

（3）$children

2-2.setup使用

是什么？=> 组合式API

解决什么问题？=>

响应区别：

将m中的数据复制到o中，并生成响应式。

vue2.x：Object.defineProperty()

vue3.x： Proxy()

setup语法糖插件：

unplugin-auto-import

解决场景：在组件中开发无需每次都需要引入 import { ref, onMounted, xxx}..

1、下载安装

npm i unplugin-auto-import -D

2、配置

2-3.生命周期

选项式API：breforeCreate、created......

组合式API：没有breforeCreate、created，其他生命周期，要使用前面加 “on” => onXxx，并且使用时需要引入

2-4.toRefs

完成数据的解构。使用解构...时，数据不会变成响应式。如下，如果直接是let {name, age} = reactive({name: '张三', age: 18})，修改name或age并不会更新视图，打印可以看出，只是单纯的值，按照如下的toRefs()的写法，会将name和age变成Proxy，通过 .value 获取值，并且是响应式的。

2-5.watch

2-6.vue-router

3.x => 4.x 的变化

useRoute => this.$route
useRouter => this.$router

2-7. 组件传值

（1）父传子

a、子组件定义及引用

（1）引入子组件（2）模版中直接使用

不需要使用components进行导入

b、props传值

（1）父组件写法和vue2一致，

（2）第一种：子组件需要通过defineProps插件定义

第二种：setup函数，接收第一个函数为props

（2）子传父

ts写法

（3）v-model传值

父组件：

子组件：依旧通过props接收，并且可以通过emit的方式来变更值

（4）兄弟组件传值

a、借助同一个父组件，通过 A (emit) => 父组件 => B(props)

b、mitt插件类似于 bus，这个是封装过的（用销毁吗？？）

2-8.插槽

匿名插槽：

具名插槽：

作用域插槽：

父组件如果想使用子组件中定义的数据

父组件中 v-slot 可以简写成 #default

动态插槽：

2-9.Teleport（新增的内置组件-传送）

内置组件可以直接使用，通过 to 属性，可以讲该组件内的内容，直接显示到对应位置（元素、类、ID）的区域内。

注意：必须传送到有这个dom的地方（也就是顺序问题）

2-10.动态组件

markRaw()的使用：tabList是被定义的Proxy数据，但其中引用的A\B\C组件是固定的，不需要响应式，通过 markRaw 将组件绕过Proxy代理

2-11.异步组件

*** 提升性能：1、按需加载（首屏加载，看到的位置加载，看不到的位置不加载）

vueuse: https://vueuse.org/core/

useintersectionobserver/

（1）使用场景1

组件按需引入：当用户访问到了组件，再去加载该组件

（2）使用场景2

***也可以分包

（3）打包分包处理

npm run build 打包完成后，异步组件有单独的js文件，是从主体js分包出来的。

2-12.Mixin：混入

是什么：分发vue中可复用的功能

（1）组合式setup

（2）选项式

2-13.provide/Inject ==> 依赖注入

提供：

注入：

3.Vuex

***let num = store.state.num

*** 直接使用这种方式获取num值，并在页面使用，再次更改时，没有响应式。

*** 通过commit 或 dispathch 变更数据后，页面 num 展示会变。但是刷新浏览器后，数据会重置。
*** 通过插件 vuex-persistedstate 可以选择将某个模块的数据持久化。

4.Pinia

Vuex 和 Pinia 的区别：https://github.com/vuejs/rfcs/pull/271

7. pinia可以直接修改数据。

4-1.pinia基础使用

官网：State | Pinia值得你喜欢的 Vue Store：https://pinia.vuejs.org/zh/core-concepts/state.html

定义使用：

（1）state

***let { name, num } = store
***直接通过这种方式解构出来的数据，没有响应式。

***需要通过 storeToRefs ，可以将解构出来的数据，变成响应式

*** 批量更新可以在方法中直接修改，也可以通过 $patch 方法

（2）getters

getters具有缓存，写法和vuex一样了

控制台打印出来的 ‘getters’就只有一个。

（3）actions

就参数值和vuex不一样

4-2.pinia分模块

4-3.pinia持久化存储

（1）使用vue3.2以下版本，可以安装以下插件

npm i pinia-plugin-persist --save

（2）3.2以上版本，建议安装 pinia-plugin-persistedstate

1> 安装：npm install pinia-plugin-persistedstate -D

2> store文件中引用：

import { createPinia } from 'pinia';
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
const pinia = createPinia();
pinia.use(piniaPluginPersistedstate);

3> 若出现 TS 类型报错，需手动添加声明文件：

创建 src/types/pinia-plugin-persist.d.ts：

declare module 'pinia-plugin-persist';

在 tsconfig.json 中添加路径：

"typeRoots": ["./node_modules/@types", "./src/types"]

确保在路由守卫之前注册 Pinia 和插件，避免持久化失效：

// main.ts
const pinia = createPinia();
pinia.use(piniaPluginPersistedstate);
app.use(pinia);
app.use(router); // 路由需在 Pinia 之后注册

在需要开启持久化缓存的模块文件中，添加如下配置：默认会存储在sessionStorage里

如果需要在localstorage中里，需要额外添加配置

5.设置代理 --- 解决跨域问题

Api文件

6.TypeScript

TypeScript是JavaScript类型的超集，它可以编译成纯JavaScript。

用途：a、约束类型的； b、TS最后要编译成JS

6-1.搭建

（1）npm i -g typescript

（2）tsc -v

（3）创建 demo.ts文件

运行 tsc demo.ts ==> 生成一个demo.js文件

运行 tsc -watch demo.ts ==> 实时监听demo.ts文件，实时编译

（4）tsc -init ==> 生成tsconfig.json文件

6-2.数据类型

6-3.函数约束

（1）普通写法

function fun1(a:number, b: number):number {
    return a+b;
}
fun1(1, 2);

（2）可选参数：缺省？

function  fun2(a:number, b?:number):void {
    
}
fun2(1)

（3）函数参数默认值

function fun3(a:number, b:number=12) {

}
fun3(1, 2)

6-4. interface 接口

（1）基本写法

（2）缺省使用

（3）只读属性：只能获取a，不能修改a

（4）interface 使用 interface

6-5.类和抽象类

（1）基础写法

（2）修饰符

修饰符：
public: 公开，在任何地方都可以访问
protected: 受保护的，只能在本类及其子类中访问
private：私有的，只能在本类中访问

（3）abstract 抽象类

a、写法

abstract class Person {

}

b、抽象类实现

abstract class Person {
    abstract run():number;
}

class Child extends Person {
    run() {
        return 1;
    }
}

// 抽象类不能 New
// 抽象类中只有抽象方法
// 只能继承抽象类，且其中的抽象方法必须被实现