Vite创建Vue3项目

一、简介

Vite：一款前端构建工具。

官网地址：https://cn.vitejs.dev

二、依赖

1、Node.js。下载和安装环境略过。

三、基于Vite创建Vue3项目

3.1、创建vite

npm create vite@latest

之后跟随引导，操作以下3个命令启动程序。

拿到启动url

浏览器启动，启动成功了。

本地文件夹目录如下：

之后，将文件夹目录拖到VSCode。

3.2、删除文件

src/style.css

src/components/HelloWord.vue

3.3、删除代码

刚刚删除代码的引用。

四、Vue3好用的VsCode插件

4.1、Vue-Official

原名Volar，使用后可以语法高亮，智能提示等功能。

4.2、Vue VSCode Snippets

主要用于一些自定义代码片段。

新的.vue 文件，输入V3，选择第三个回车。

就可以快速生成代码片段，也可以自定义修改vscode模板

【扩展】：自定义模板

路径入下：

4.3、别名路径跳转

和路由相关。

五、导入组件

5.1、转移html

5.2、运行终端

点击终端-》运行终端，然后在下面终端输入npm run dev。最后浏览器运行url即可。

5.3、导入组件

5.4、父传子

两种方式：数组传值，对象传值

结果：

5.5、子传父

5.6、跨组件通信

依赖注入。

跨组件通信-》父组件可以和孙组件通讯

1、父组件传值给孙组件

1、父组件传函数给孙组件

六、插槽

插槽：可以在父组件内自定义模板片段，在子组件中可以将定义的模板片段插入到子组件的特定为止。

作用域插槽：子组件向父组件传递数据，并在父组件中定义模板中渲染

七、生命周期函数

生命周期函数：从实例创建到销毁过程中的不同时间点自动调用的函数。

7.1、挂载阶段

onBeforeMount

在组件实例即将被挂载到Dom树之前调用

此时模板还未编译或渲染Dom，通常用于执行初始化操作。

如：获取异步数据，设置初始属性值等。

onMounted

在组件成功挂载到Dom并完成首次渲染后调用

此时可以访问和操作Dom元素

并执行与页面交互相关的逻辑

7.2、更新阶段

onBeforeUpdate（由于响应式数据变化）

在组件更新之前即将重新渲染时调用

可以根据新的参数判断是否需要进行特殊处理

甚至可以选择阻止此次更新

onUpdated

在组件完成更新并重新渲染之后调用

可以基于新的渲染结果处理更新后的数据

7.3、卸载阶段

onBeforeUnmount

在组件从Dom中销毁之前调用

用于释放资源，如：清理计时器，解绑事件监听器等

onUnmounted

在组件已经从Dom中移除并销毁调用

确保组件所占用的所有资源都被正确释放

7.4、错误处理

onErrorCaptured

在捕捉组件中的错误时调用

用于处理错误，如：记录错误日志等

7.5、组件挂载过程

1. 模板编译。将组件的模板转换为JS代码
2. 渲染。在模板编译后生成的JS代码渲染到页面，生成虚拟DOM
3. 在渲染完成后将虚拟Dom挂载在真实Dom树上，在页面显示出来。

八、转换

8.1、toRef

将一个响应式对象的某个属性转换为ref变量

8.2、toRefs

将一个响应式对象的所有属性转换为ref对象

九、Pinia

9.1、Pinia简介

Pinia：轻量级的状态管理库。

官网：https://pinia.vuejs.org/zh

9.2、Pinia 和组件通信的区别

大型项目中，组件数量的增加，胡调至以下问题：

1、组件之间传递大量props，会使项目变得非常繁琐和难以维护

2、非父子组件过度依赖provide/inject，使状态散落在各个组件之间

9.3、Pinia可以解决的问题

1. 全局状态管理。所有组件都可以访问和修改状态，而不是在每个组件内部进行状态管理。
2. 简化组件之间通信。避免组件之间传递大量的props。
3. 状态持久化。可以将应用程序的状态保存都本地存储中。在应用程序重启后保留状态，对于登录场景非常有用。

总的来说，Pinia可以处理大型项目中复杂的状态管理需求，父传子，子传父可以跨组件通信，可以解决一些简单的状态传递问题。

9.4、案例

登录为例。使用pinia创建一个userStore来集中管理用户的登录状态和过期时间

当用户登录成功时：设置userStore中用户的登录状态为已登录，并设置过期时间。

当用户退出登录时：修改userStore中用户的登录状态为未登录，并删除过期时间。

9.5、Pinia和localStorage的区别

localStorage：

1、只能存储string类型数据。

2、存储空间大小有限制，通常为5MB左右

Pinia：

1、可以存储任何类型数据。

2、没有存储空间大小限制。

小结：小项目用localStorage，大项目用Pinia

9.6、安装Pinia以及定义和使用Store

1、安装Pinia

npm install pinia

项目终端运行

安装后可以看到版本。

2、使用

import { createApp } from 'vue'

import { createPinia } from 'pinia'

import App from './App.vue'

const pinia = createApp()

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

// stores 是用来存储和集中管理组件之间共享状态的仓库
// web.js 是用来创建一用于管理网站的仓库
import { defineStore } from "pinia";

import { reactive, ref } from "vue";

// 使用startup参数，不使用option参数
export const userWebStore =  defineStore('web', () => {
    const web = reactive({
        title: "ZDW",
        url: "www.baidu1.com"
    })

    const users = ref(1000)

    const userAdd = ()=>{
        users.value++
    }

    return {
        web,
        users,
        userAdd
    }
})

View Code

<script setup>
// 导入并调用仓库
import { userWebStore } from './stores/web.js'
const webStore = userWebStore()
console.log(webStore.web);
console.log(webStore.users);
</script>

<template>
{{ webStore.web.url }}
{{ webStore.users }}
<button @click="webStore.userAdd">添加</button>
</template>

<script scoped>

</script>

View Code

3、小结

pinia只是将一些状态进行处理。

4、持久化

官网：链接

安装：npm i pinia-plugin-persistedstate

注意：pinia吃画画插件也是存储到localStorage中，为何不直接使用localStorage？

1、自动状态同步

持久化插件自动将pinia的状态存储到localStorage中，无序手动处理状态的读取和写入。

2、易用性

无需手动处理localStorage的键值对存储、数据转换等繁琐过程。

3、与Vue组件状态紧密集成

持久化插件与Vue组件的响应式数据完美结合。

当状态改变时，依赖这些状态的组件会自动更新视图。

与仅仅从localStorage中读取静态数据相比更加灵活和强大。

使用

main.js

import { createApp } from 'vue'
// 导入pinia的create方法，用于创建pinia实例
import { createPinia } from 'pinia'

// 持久化pinia NO:1：从 pinia-plugin-persistedstate 模块中导入 piniaPluginPersistedstate
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

import App from './App.vue'

const pinia = createPinia()
// 持久化pinia NO:2：将插件添加到实例上
pinia.use(piniaPluginPersistedstate)

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

View Code

web.js

// stores 是用来存储和集中管理组件之间共享状态的仓库
// web.js 是用来创建一用于管理网站的仓库
import { defineStore } from "pinia";

import { reactive, ref } from "vue";

// 使用startup参数，不使用option参数
export const userWebStore =  defineStore('web', () => {
    const web = reactive({
        title: "ZDW",
        url: "www.baidu1.com"
    })

    const users = ref(1000)

    const userAdd = ()=>{
        users.value++
    }

    return {
        web,
        users,
        userAdd
    }
},
{
    // 持久化pinia NO:3：实现持久化存储
    persist:true
})

View Code

测试

十、参考资料

参考视频：链接

posted on 2024-04-03 11:24 木乃伊人阅读(9225) 评论(0) 编辑收藏举报

刷新页面返回顶部

Vite创建Vue3项目

导航

公告