Vue3管理系统（开发前调整）-Day1

最新推荐文章于 2024-05-18 11:09:56 发布

G24gg

最新推荐文章于 2024-05-18 11:09:56 发布

阅读量921

点赞数 31

分类专栏： Vue3 文章标签：前端 vue.js javascript 前端框架学习

本文链接：https://blog.csdn.net/G24gg/article/details/138322390

版权

Vue3 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一、配置路由

1.与vue2中路由对比

// createRouter 创建路由实例，===> new VueRouter()
// 1. history模式: createWebHistory() http://xxx/user
// 2. hash模式: createWebHashHistory() http://xxx/#/user

// vite 的配置 import.meta.env.BASE_URL 是路由的基准地址，默认是 ’/‘
// https://vitejs.dev/guide/build.html#public-base-path

// 如果将来你部署的域名路径是：http://xxx/my-path/user
// vite.config.ts 添加配置 base: my-path，路由这就会加上 my-path 前缀了

Vue 2 和 Vue 3 在很多方面都保持了相似性，但在路由管理方面，Vue 3 与 Vue 2 有一些关键的区别和改进。以下是 Vue 2 的 Vue Router 和 Vue 3 的 Vue Router 4 的一些主要区别：

Composition API 集成：
- Vue 3 引入了 Composition API，这为编写更灵活和可复用的代码提供了一种新的方式。Vue Router 4 与 Composition API 紧密集成，允许你以更细粒度的方式使用路由功能。
更小的打包体积：
- Vue Router 4 相比 Vue Router 3 在打包体积上做了优化，减少了应用程序的最终打包大小。
TypeScript 支持：
- Vue Router 4 改进了对 TypeScript 的支持，提供了更好的类型推断和类型安全。
路由守卫的变化：
- 在 Vue Router 4 中，路由守卫（导航守卫）进行了重构，提供了更清晰的 API 来管理路由守卫。
onBeforeRouteUpdate 和 onRouteChangeError：
- Vue 2 中组件内部的路由钩子 beforeRouteUpdate 和 beforeRouteEnter 被合并为 Vue 3 中的单个钩子 onBeforeRouteUpdate。同时，新增了 onRouteChangeError 钩子，用于捕获路由导航过程中的错误。
link 和 router-link：
- 在 Vue 2 中，我们通常使用 <router-link> 组件来创建链接。而在 Vue 3 中，推荐使用 link 标签与 useLink 组合式函数来创建链接。
useRouter 和 useRoute：
- Vue Router 4 提供了 useRouter 和 useRoute 组合式函数，允许你在组合式 API 中访问路由实例和当前路由。
模块化导入：
- Vue Router 4 鼓励更模块化的路由定义方式，你可以将路由定义分割成多个文件，然后组合它们。
嵌套路由命名视图：
- 在 Vue Router 4 中，对嵌套路由和命名视图的使用有所改进，提供了更清晰的 API。
滚动行为：
- Vue Router 4 改进了滚动行为的配置，允许更细粒度的控制。
自动代码拆分：
- Vue Router 4 支持自动代码拆分，允许你按需加载路由组件，这有助于进一步减少应用程序的初始加载时间。
兼容性：
- 重要的是要注意，Vue Router 4 仅兼容 Vue 3。如果你正在使用 Vue 2，你需要使用 Vue Router 3。

这些是 Vue 2 和 Vue 3 路由系统的主要区别。Vue Router 4 带来了一些改进，使得它更贴合 Vue 3 的设计理念，同时也提高了性能和类型安全性。如果你正在从 Vue 2 迁移到 Vue 3，理解这些变化对于顺利过渡是很重要的。

二、.引入Element-ui组件

官方文档：一个 Vue 3 UI 框架 | Element Plus

https://element-plus.org/zh-CN/

3步，推荐看官网

首先你需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件

彩蛋：默认 components 下的文件也会被自动注册~

npm install -D unplugin-vue-components unplugin-auto-import

然后把下列代码插入到你的 Vite 或 Webpack 的配置文件中

这里插件需要自己在

// vite.config.ts

配置一下

vite介绍：

Vite：
- Vite 是一个现代化的前端构建工具，它提供了丰富的功能来加速开发过程。Vite 在开发环境下使用原生的 ES 模块导入（ESM）来提供快速重载，这意味着它不需要打包操作，从而大幅度加快了开发服务器的启动时间和热模块替换的速度。在生产环境下，Vite 使用 Rollup 或其他打包器进行高效的应用打包。

当 Vue 3 与 Vite 结合使用时，可以带来以下优势：

快速开发：Vite 通过避免打包操作，使得开发服务器能够即时反馈更改，提供极快的响应速度。
简化配置：Vite 旨在提供开箱即用的体验，许多功能在默认情况下都是预配置的，这简化了项目配置的复杂性。
现代框架特性：Vue 3 的新特性与 Vite 的现代化构建方式相结合，使得开发者能够更加专注于业务逻辑而不是配置细节。
高性能生产构建：虽然 Vite 在开发环境中避免了打包，但它使用 Rollup 等打包器为生产环境生成最小化的资产，确保了应用的性能。

在 Vue 3 项目中使用 Vite 通常涉及以下步骤：

创建项目：使用 Vue CLI 或 Vite 自己的创建工具（如 create-vue）来初始化一个新的 Vue 3 项目。
开发：利用 Vite 提供的本地开发服务器进行开发，该服务器支持热模块替换和快速重载。
构建：使用 Vite 运行构建命令，它会调用底层的 Rollup 打包器来生成优化后的应

用程序，准备部署到生产环境。

三、pinia（仓库）

1.store 下 user.js定义

import { defineStore } from 'pinia'
import { ref } from 'vue'
//用户模块
export const useUserStore = defineStore('user', () => {
  const token = ref('')
  const setToken = (newtoken) => {
    token.value = newtoken
  }
  const removeToken = () => {
    token.value = ''
  }
  //别忘了抛出
  return { token, setToken, removeToken }
})

2.组件内部接收

<script setup>
import { useRouter } from 'vue-router'
import { useUserStore } from './stores/user'
const router = useRouter()
// const route = useRoute()
const golist = () => {
  // $router.push('/list')//一种
  router.push('/list') //第二种
}
const UserStore = useUserStore()
console.log(UserStore.userInfo)
</script>

<template>
  <div>
    <p>{{ UserStore.token }}</p>
    <el-button @click="$router.push('/home')">跳转1</el-button>
    <el-button @click="golist">跳转2</el-button>
    <el-button @click="UserStore.setToken('123')">登录</el-button>
  </div>
</template>

3.持久化存储

官方文档：https://prazdevs.github.io/pinia-plugin-persistedstate/zh/

推荐看官网

注意位置：

    return { token, setToken, removeToken }
  },

  // 持久化
  {
    persist: true
  }
)