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。

相关文章

Pandas使用SQLite3实战

Pandas使用SQLite3实战

《Pandas使用SQLite3实战》本文主要介绍了Pandas使用SQLite3实战,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学... 目录1 环境准备2 从 SQLite3VlfrWQzgt 读取数据到 DataFrame基础用法：读
阅读更多...
SpringBoot日志配置SLF4J和Logback的方法实现

SpringBoot日志配置SLF4J和Logback的方法实现

《SpringBoot日志配置SLF4J和Logback的方法实现》日志记录是不可或缺的一部分,本文主要介绍了SpringBoot日志配置SLF4J和Logback的方法实现,文中通过示例代码介绍的非... 目录一、前言二、案例一：初识日志三、案例二：使用Lombok输出日志四、案例三：配置Logback一
阅读更多...
springboot security之前后端分离配置方式

springboot security之前后端分离配置方式

《springbootsecurity之前后端分离配置方式》：本文主要介绍springbootsecurity之前后端分离配置方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的... 目录前言自定义配置认证失败自定义处理登录相关接口匿名访问前置文章总结前言spring boot secu
阅读更多...
一文详解SpringBoot响应压缩功能的配置与优化

一文详解SpringBoot响应压缩功能的配置与优化

《一文详解SpringBoot响应压缩功能的配置与优化》SpringBoot的响应压缩功能基于智能协商机制,需同时满足很多条件,本文主要为大家详细介绍了SpringBoot响应压缩功能的配置与优化,需... 目录一、核心工作机制1.1 自动协商触发条件1.2 压缩处理流程二、配置方案详解2.1 基础YAML
阅读更多...
springboot简单集成Security配置的教程

springboot简单集成Security配置的教程

《springboot简单集成Security配置的教程》：本文主要介绍springboot简单集成Security配置的教程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,... 目录集成Security安全框架引入依赖编写配置类WebSecurityConfig（自定义资源权限规则
阅读更多...
SpringBoot中封装Cors自动配置方式

SpringBoot中封装Cors自动配置方式

《SpringBoot中封装Cors自动配置方式》：本文主要介绍SpringBoot中封装Cors自动配置方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录SpringBoot封装Cors自动配置背景实现步骤1. 创建 GlobalCorsProperties
阅读更多...
一文教你如何将maven项目转成web项目

一文教你如何将maven项目转成web项目

《一文教你如何将maven项目转成web项目》在软件开发过程中,有时我们需要将一个普通的Maven项目转换为Web项目,以便能够部署到Web容器中运行,本文将详细介绍如何通过简单的步骤完成这一转换过程... 目录准备工作步骤一：修改​​pom.XML​​1.1 添加​​packaging​​标签1.2 添加
阅读更多...
Spring Boot结成MyBatis-Plus最全配置指南

Spring Boot结成MyBatis-Plus最全配置指南

《SpringBoot结成MyBatis-Plus最全配置指南》本文主要介绍了SpringBoot结成MyBatis-Plus最全配置指南,包括依赖引入、配置数据源、Mapper扫描、基本CRUD操... 目录前言详细操作一.创建项目并引入相关依赖二.配置数据源信息三.编写相关代码查zsRArly询数据库数
阅读更多...
tomcat多实例部署的项目实践

tomcat多实例部署的项目实践

《tomcat多实例部署的项目实践》Tomcat多实例是指在一台设备上运行多个Tomcat服务,这些Tomcat相互独立,本文主要介绍了tomcat多实例部署的项目实践,具有一定的参考价值,感兴趣的可... 目录1.创建项目目录，测试文China编程件2js.创建实例的安装目录3.准备实例的配置文件4.编辑实例的
阅读更多...
SpringBoot配置Ollama实现本地部署DeepSeek

SpringBoot配置Ollama实现本地部署DeepSeek

《SpringBoot配置Ollama实现本地部署DeepSeek》本文主要介绍了在本地环境中使用Ollama配置DeepSeek模型,并在IntelliJIDEA中创建一个Sprin... 目录前言详细步骤一、本地配置DeepSeek二、SpringBoot项目调用本地DeepSeek前言随着人工智能技
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2