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

本文主要是介绍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 一旦被实例化,就可以直接访问 stategettersactions

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 包装的对象,这意味着访问 stategetters 时不需要写 .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

相关文章

网页解析 lxml 库--实战

lxml库使用流程 lxml 是 Python 的第三方解析库,完全使用 Python 语言编写,它对 XPath表达式提供了良好的支 持,因此能够了高效地解析 HTML/XML 文档。本节讲解如何通过 lxml 库解析 HTML 文档。 pip install lxml lxm| 库提供了一个 etree 模块,该模块专门用来解析 HTML/XML 文档,下面来介绍一下 lxml 库

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

Zookeeper安装和配置说明

一、Zookeeper的搭建方式 Zookeeper安装方式有三种,单机模式和集群模式以及伪集群模式。 ■ 单机模式:Zookeeper只运行在一台服务器上,适合测试环境; ■ 伪集群模式:就是在一台物理机上运行多个Zookeeper 实例; ■ 集群模式:Zookeeper运行于一个集群上,适合生产环境,这个计算机集群被称为一个“集合体”(ensemble) Zookeeper通过复制来实现

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

CentOS7安装配置mysql5.7 tar免安装版

一、CentOS7.4系统自带mariadb # 查看系统自带的Mariadb[root@localhost~]# rpm -qa|grep mariadbmariadb-libs-5.5.44-2.el7.centos.x86_64# 卸载系统自带的Mariadb[root@localhost ~]# rpm -e --nodeps mariadb-libs-5.5.44-2.el7

性能测试介绍

性能测试是一种测试方法,旨在评估系统、应用程序或组件在现实场景中的性能表现和可靠性。它通常用于衡量系统在不同负载条件下的响应时间、吞吐量、资源利用率、稳定性和可扩展性等关键指标。 为什么要进行性能测试 通过性能测试,可以确定系统是否能够满足预期的性能要求,找出性能瓶颈和潜在的问题,并进行优化和调整。 发现性能瓶颈:性能测试可以帮助发现系统的性能瓶颈,即系统在高负载或高并发情况下可能出现的问题

水位雨量在线监测系统概述及应用介绍

在当今社会,随着科技的飞速发展,各种智能监测系统已成为保障公共安全、促进资源管理和环境保护的重要工具。其中,水位雨量在线监测系统作为自然灾害预警、水资源管理及水利工程运行的关键技术,其重要性不言而喻。 一、水位雨量在线监测系统的基本原理 水位雨量在线监测系统主要由数据采集单元、数据传输网络、数据处理中心及用户终端四大部分构成,形成了一个完整的闭环系统。 数据采集单元:这是系统的“眼睛”,

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

hadoop开启回收站配置

开启回收站功能,可以将删除的文件在不超时的情况下,恢复原数据,起到防止误删除、备份等作用。 开启回收站功能参数说明 (1)默认值fs.trash.interval = 0,0表示禁用回收站;其他值表示设置文件的存活时间。 (2)默认值fs.trash.checkpoint.interval = 0,检查回收站的间隔时间。如果该值为0,则该值设置和fs.trash.interval的参数值相等。

NameNode内存生产配置

Hadoop2.x 系列,配置 NameNode 内存 NameNode 内存默认 2000m ,如果服务器内存 4G , NameNode 内存可以配置 3g 。在 hadoop-env.sh 文件中配置如下。 HADOOP_NAMENODE_OPTS=-Xmx3072m Hadoop3.x 系列,配置 Nam