Vue3+Vite+Ts 项目实战 02 配置 VueRouter、Pinia 配置和简单介绍、配置 SCSS

2024-08-23 01:08
文章标签 javascript 简单 配置 实战 项目 介绍 02 css vue vue3 frontend ts vite pinia vuerouter

本文主要是介绍Vue3+Vite+Ts 项目实战 02 配置 VueRouter、Pinia 配置和简单介绍、配置 SCSS，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

配置 Vue Router

Vite 创建的项目没有集成 Vue Router，需要手动安装集成。

Vue 3 使用最新版本的 Vue Router v4.x。

# 安装
npm install vue-router@4

创建路由配置文件：

<!-- src\views\home\index.vue -->
<template><div>首页</div>
</template><script setup lang="ts">
</script><style scoped>
</style>
<!-- src\views\login\index.vue -->
<template><div>登录</div>
</template><script setup lang="ts">
</script><style scoped>
</style>
<!-- src\App.vue -->
<template><router-view />
</template><script setup lang="ts">
</script>
// src\router\index.ts
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'const routes:RouteRecordRaw[] = [{path: '/',name: 'home',component: () => import('@/views/home/index.vue')},{path: '/login',name: 'login',component: () => import('@/views/login/index.vue')}
]const router = createRouter({// history: createWebHashHistory(), // hash 路由模式history: createWebHistory(), // history 路由模式routes // 路由规则
})export default router
// src\main.ts
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'createApp(App).use(router).mount('#app')

配置状态管理器 Pinia

Pinia 介绍

Vite 创建的项目默认也没有集成状态管理工具。

在 Vue 3 之前我们更多的是 Vuex，当前 Vuex 的最新版本是兼容 Vue2 和 Vue3 的 x4.x 版本，但是 Vue3 官方指定的状态管理库已经更改为 Pinia（Vue 核心团队维护），Vuex 官网也发出了声明。

  • Vue 官网 - Pinia 介绍
  • Vuex 官网 - Pinia 说明

其原因是 Pinia 的 API 和 Vuex 5 RFC 中描述的几乎完全相同且做的更好：

事实上，Pinia 这款产品最初是为了探索 Vuex 的下一个版本，整合了核心团队关于 Vuex 5 的许多想法。最终，我们意识到 Pinia 已经实现了我们想要在 Vuex 5 中提供的大部分内容，因此决定将其作为新的官方推荐。

相比于 Vuex，Pinia 提供了更简洁直接的 API，并提供了组合式风格的 API，最重要的是，在使用 TypeScript 时它提供了非常好的类型推导。

集成 Pinia

安装&注册 Pinia

Installation | Pinia (vuejs.org)

npm install pinia

创建 root store 并传递给 app（注意 Pinia 不是在创建 store 实例的时候定义初始化内容的）：

// src\main.ts
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { createPinia } from 'pinia'createApp(App).use(router).use(createPinia()).mount('#app')

定义 Store

Defining a Store | Pinia (vuejs.org)

Pinia 使用 defineStore() 定义 store，它返回一个用于创建 store 实例的函数：

  • defineStore() 需要一个唯一的 name（也称为 id） 作为第一个参数传递（必填）
  • defineStore() 约定使用 use... 作为函数名（如 useCartStore）
  • 通过 defineStore() 定义的 store 相当于 Vuex 中的 Module。
// src\store\index.ts
import { defineStore } from 'pinia'const useStore = defineStore('main', {state: () => ({count: 0}),getters: {doubleCount(state) {return state.count * 2}},actions: {increment() {this.count++}}
})export default useStore

使用

store 一旦被实例化，就可以直接访问 state、getters 和 actions。

Pinia 没有 Vuex 的 Mutations，可以在 Actions 中直接使用同步和异步方法。

<!-- src\views\home\index.vue -->
<template><div>首页<button @click="store.increment">{{ store.count }} => {{ store.doubleCount }}</button></div>
</template><script setup lang="ts">
import useStore from '@/store'const store = useStore()
</script>

使用解构语法

请注意，store 是一个用 reactive 包装的对象，这意味着访问 state 和 getters 时不需要写 .value，就像 setup 中的 props，我们也不能将其直接解构：

<!-- src\views\home\index.vue -->
<template><div>首页<button @click="store.increment">{{ store.count }} => {{ store.doubleCount }}</button><div>count 永远是 0：{{ count }}</div><div>doubleCount 永远是 0：{{ doubleCount }}</div></div>
</template><script setup lang="ts">
import useStore from '@/store'const store = useStore()const { count, doubleCount } = store
// 在 script-setup 中使用解构赋值要通过 defineExpose 暴漏出去
defineExpose({count
})
</script>

如果想要使用解构赋值并保留响应性（reactivity），你需要使用 sotreToRefs() 方法：

<!-- src\views\home\index.vue -->
<template><div>首页<button @click="store.increment">{{ store.count }} => {{ store.doubleCount }}</button><div>count 将会同步更新：{{ count }}</div><div>doubleCount 将会同步更新：{{ doubleCount }}</div></div>
</template><script setup lang="ts">
import useStore from '@/store'
import { storeToRefs } from 'pinia'const store = useStore()const { count, doubleCount } = storeToRefs(store)defineExpose({count,doubleCount
})
</script>

注意：可以直接从 store 中解构 actions，因为它们绑定到了 store 自身（内部 this 指向 store）。

Pinia 简单介绍

Pinia 中关于 TS 类型推断的注意

Pinia 默认提供良好的 TypeScript 支持，但是要想获得完整的类型推断，需要遵循一些使用建议：

1、声明 state 建议使用箭头函数，会自动推断属性的类型

如果使用非箭头函数，在 getters 中使用形参 state 访问属性 TypeScript 无法识别

const useStore = defineStore('main', {// 使用非箭头函数定义state() {return {count: 0}},getters: {// 使用 state 访问状态doubleCount(state) {// IDE 提示：类型“{} & {}”上不存在属性“count”。ts(2339)return state.count * 2}},actions: {increment() {// IDE 提示：类型“{} & {}”上不存在属性“count”。ts(2339)this.count++}}
})

2、声明 Getters 属性建议使用 state 参数访问状态（箭头函数或非箭头函数），非箭头函数虽然可以使用 this ，但不会自动推断类型（当没有声明 state 形参，或 state 使用非箭头函数定义时）

  • 为了避免使用 this，官方建议使用箭头函数
  • 建议仅当需要获取整个 store 时使用 this，但必须显式的定义函数返回类型，TypeScript 不会自动推断
  • 建议使用 this 的时候不要声明 state 形参
const useStore = defineStore('main', {state: () => ({count: 0}),getters: {// 没有声明 `state` 形参// IDE 提示：由于“doubleCount'”不具有返回类型批注并且在它的一个返回表达式中得到直接或间接引用，因此它隐式具有返回类型 "any"。ts(7023)doubleCount() {// IDE 提示：类型“{ doubleCount(): any; }”上不存在属性“count”。ts(2339)return this.count * 2},// 解决办法1doubleCount2(state) {return this.count * 2},// 解决办法2doubleCount3():number {return this.count * 2}},actions: {increment() {this.count++}}
})

Pinia 基础特性

  • State
    • 默认情况下，通过 store 实例访问 state，可以直接读取和写入，如 @click="store.count++"
    • 通过 store.$reset() 方法可以将 state 重置为初始值。
    • 除了直接通过 store 修改 state，还可以通过 store.$patch() 方法提交多个更改，主要区别是可以将多个更改分组到 devtools 中的一个条目，并且支持时间旅行。
    • 可以通过 store.$subscribe() 订阅 State 的变化，在 patches 修改之后订阅只会触发一次。默认情况下，订阅绑定到添加它的组件，当组件卸载时，它们将自动删除，也可以配置将其保留。
  • Getters
    • Getters 属性的值是一个函数，接受 state 作为第一个参数，目的是鼓励使用箭头函数
    • 非箭头函数会绑定 this，建议仅在需要获取整个 store 实例的场景使用，且需要显式定义函数返回类型
  • Actions
    • 与 Gettes 一样可以通过 this 访问整个 store 实例
    • Actions 可以是异步的或同步的，不管怎样，都会返回一个 Promise
    • Actions 可以自由的设置参数和返回的内容，一切将自动推断，不需要定义 TS 类型（帅爆了！）
    • 与 State 一样，可以通过 store.$onAction() 订阅 Actions，回调将在执行前触发，并可以通过参数 after() 和 onError() 允许在 Action 决议后和拒绝后执行函数。同样的，订阅绑定的是当前组件。

CSS 样式管理

功能 - CSS | Vite 官方中文文档

  • Vite 提供了增强版的 @import，允许使用 Vite 别名
  • Vite 内置了 PostCSS，如要额外配置只需提供 postcss.config.js 文件即可
  • 任何以 .module.css 为后缀名的 CSS 文件都被认为是一个 CSS modules 文件。导入这样的文件会返回一个相应的模块对象。
  • Vite 提供了对 .scss, .sass, .less, .styl 和 .stylus 文件的内置支持。没有必要为它们安装特定的 Vite 插件，但必须安装相应的预处理器依赖。

安装 Sass 和初始化目录结构

本案例使用 Sass：

npm i -D sass

创建样式目录结构：

styles
├─ index.scss # 统一导出
├─ common.scss # 全局公共样式
├─ mixin.scss # 全局 mixin
├─ transition.scss # 全局过渡动画样式
└─ variables.scss # 全局 Sass 变量

// src\styles\variables.scss
$red: red;
$pink: pink;
// src\styles\common.scss
body {background-color: $pink;
}
// src\styles\index.scss
@import './variables.scss';
@import './mixin.scss';
@import './transition.scss';
@import './common.scss';

单文件组件中使用全局样式变量

在单文件组件中不能直接使用全局变量，需要手动导入一下文件：

<style lang="scss" scoped>
@import '@/styles/variables.scss';div {color: $red;
}
</style>

每个文件都要手动导入太繁琐，可以利用 Vite 构建工具，将全局变量自动的注入到单文件组件的样式模块中。

Vite 配置项 css.preprocessorOptions 用于指定传递给 CSS 预处理器的选项。

// vite.config.ts
...export default defineConfig({...css: {preprocessorOptions: {// 给 sass-loader 传递选项scss: {// additionalData 的值就是要注入的字符串additionalData: '@import "@/styles/variables.scss";'}}}
})

现在单文件组件中就可以改为：

<style lang="scss" scoped>
div {color: $red;
}
</style>

在 Vue3 中使用样式变量

Vue 3 支持在单文件组件的 <style> 中动态绑定样式变量。

可以通过 v-bind 绑定组件暴露的变量，其原理是 SFC 编译器在检测到此类 CSS 变量时，将 v-bind 重写为带有 Hash 变量名的原生 var()。

而原生 css 样式变量的定义将内联到组件每个 top-level DOM 元素的 style 属性中。

<template><h1 class="title">Hello World</h1><p class="content">The content color is red</p>
</template><script setup lang="ts">
const theme = {color: 'red',fontSize: '30px'
}
</script>
<style>
.title {color: v-bind('theme.color');
}
.content {font-size: v-bind('theme.fontSize');
}
</style>

上例最终渲染的 DOM 如下：

<h1 class="title" style="--5954443c-theme_color:red; --5954443c-theme_fontSize:30px;"> Hello World </h1>
<p class="content" style="--5954443c-theme_color:red; --5954443c-theme_fontSize:30px;"> The content color is red </p><style>
.title {color: var(--5954443c-theme_color);
}
.content {font-size: var(--5954443c-theme_fontSize);
}
</style>

官方暂时没有这个功能的介绍，详细可以参考 rfcs/0043-sfc-style-variables

这篇关于Vue3+Vite+Ts 项目实战 02 配置 VueRouter、Pinia 配置和简单介绍、配置 SCSS的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1097922。

相关文章

Python进阶之Excel基本操作介绍

Python进阶之Excel基本操作介绍

《Python进阶之Excel基本操作介绍》在现实中,很多工作都需要与数据打交道,Excel作为常用的数据处理工具,一直备受人们的青睐,本文主要为大家介绍了一些Python中Excel的基本操作,希望... 目录概述写入使用 xlwt使用 XlsxWriter读取修改概述在现实中，很多工作都需要与数据打交
阅读更多...
windos server2022的配置故障转移服务的图文教程

windos server2022的配置故障转移服务的图文教程

《windosserver2022的配置故障转移服务的图文教程》本文主要介绍了windosserver2022的配置故障转移服务的图文教程,以确保服务和应用程序的连续性和可用性,文中通过图文介绍的非... 目录准备环境：步骤故障转移群集是 Windows Server 2022 中提供的一种功能，用于在多个
阅读更多...
windos server2022里的DFS配置的实现

windos server2022里的DFS配置的实现

《windosserver2022里的DFS配置的实现》DFS是WindowsServer操作系统提供的一种功能,用于在多台服务器上集中管理共享文件夹和文件的分布式存储解决方案,本文就来介绍一下wi... 目录什么是DFS？优势：应用场景：DFS配置步骤什么是DFS？DFS指的是分布式文件系统（Distr
阅读更多...
Golang操作DuckDB实战案例分享

Golang操作DuckDB实战案例分享

《Golang操作DuckDB实战案例分享》DuckDB是一个嵌入式SQL数据库引擎,它与众所周知的SQLite非常相似,但它是为olap风格的工作负载设计的,DuckDB支持各种数据类型和SQL特性... 目录DuckDB的主要优点环境准备初始化表和数据查询单行或多行错误处理和事务完整代码最后总结Duck
阅读更多...
利用Python编写一个简单的聊天机器人

利用Python编写一个简单的聊天机器人

《利用Python编写一个简单的聊天机器人》这篇文章主要为大家详细介绍了如何利用Python编写一个简单的聊天机器人,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 使用 python 编写一个简单的聊天机器人可以从最基础的逻辑开始，然后逐步加入更复杂的功能。这里我们将先实现一个简单的
阅读更多...
java脚本使用不同版本jdk的说明介绍

java脚本使用不同版本jdk的说明介绍

《java脚本使用不同版本jdk的说明介绍》本文介绍了在Java中执行JavaScript脚本的几种方式,包括使用ScriptEngine、Nashorn和GraalVM,ScriptEngine适用... 目录Java脚本使用不同版本jdk的说明1.使用ScriptEngine执行javascript2.
阅读更多...
关于Maven中pom.xml文件配置详解

关于Maven中pom.xml文件配置详解

《关于Maven中pom.xml文件配置详解》pom.xml是Maven项目的核心配置文件,它描述了项目的结构、依赖关系、构建配置等信息,通过合理配置pom.xml,可以提高项目的可维护性和构建效率... 目录1. POM文件的基本结构1.1 项目基本信息2. 项目属性2.1 引用属性3. 项目依赖4. 构
阅读更多...
龙蜥操作系统Anolis OS-23.x安装配置图解教程(保姆级)

龙蜥操作系统Anolis OS-23.x安装配置图解教程(保姆级)

《龙蜥操作系统AnolisOS-23.x安装配置图解教程(保姆级)》：本文主要介绍了安装和配置AnolisOS23.2系统，包括分区、软件选择、设置root密码、网络配置、主机名设置和禁用SELinux的步骤，详细内容请阅读本文，希望能对你有所帮助... ‌AnolisOS‌是由阿里云推出的开源操作系统，旨
阅读更多...
Python中的随机森林算法与实战

Python中的随机森林算法与实战

《Python中的随机森林算法与实战》本文详细介绍了随机森林算法,包括其原理、实现步骤、分类和回归案例,并讨论了其优点和缺点,通过面向对象编程实现了一个简单的随机森林模型,并应用于鸢尾花分类和波士顿房... 目录1、随机森林算法概述2、随机森林的原理3、实现步骤4、分类案例：使用随机森林预测鸢尾花品种4.1
阅读更多...
Python 中 requests 与 aiohttp 在实际项目中的选择策略详解

Python 中 requests 与 aiohttp 在实际项目中的选择策略详解

《Python中requests与aiohttp在实际项目中的选择策略详解》本文主要介绍了Python爬虫开发中常用的两个库requests和aiohttp的使用方法及其区别,通过实际项目案... 目录一、requests 库二、aiohttp 库三、requests 和 aiohttp 的比较四、requ
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2