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。

相关文章

Vue ElementUI中Upload组件批量上传的实现代码

Vue ElementUI中Upload组件批量上传的实现代码

《VueElementUI中Upload组件批量上传的实现代码》ElementUI中Upload组件批量上传通过获取upload组件的DOM、文件、上传地址和数据,封装uploadFiles方法,使... ElementUI中Upload组件如何批量上传首先就是upload组件 <el-upl
阅读更多...
前端知识点之Javascript选择输入框confirm用法

前端知识点之Javascript选择输入框confirm用法

《前端知识点之Javascript选择输入框confirm用法》：本文主要介绍JavaScript中的confirm方法的基本用法、功能特点、注意事项及常见用途,文中通过代码介绍的非常详细,对大家... 目录1. 基本用法2. 功能特点①阻塞行为：confirm 对话框会阻塞脚本的执行，直到用户作出选择。②
阅读更多...
SpringBoot项目注入 traceId 追踪整个请求的日志链路(过程详解)

SpringBoot项目注入 traceId 追踪整个请求的日志链路(过程详解)

《SpringBoot项目注入traceId追踪整个请求的日志链路(过程详解)》本文介绍了如何在单体SpringBoot项目中通过手动实现过滤器或拦截器来注入traceId,以追踪整个请求的日志链... SpringBoot项目注入 traceId 来追踪整个请求的日志链路，有了 traceId， 我们在排
阅读更多...
Java实战之利用POI生成Excel图表

Java实战之利用POI生成Excel图表

《Java实战之利用POI生成Excel图表》ApachePOI是Java生态中处理Office文档的核心工具,这篇文章主要为大家详细介绍了如何在Excel中创建折线图,柱状图,饼图等常见图表,需要的... 目录一、环境配置与依赖管理二、数据源准备与工作表构建三、图表生成核心步骤1. 折线图（Line Ch
阅读更多...
如何使用CSS3实现波浪式图片墙

如何使用CSS3实现波浪式图片墙

《如何使用CSS3实现波浪式图片墙》：本文主要介绍了如何使用CSS3的transform属性和动画技巧实现波浪式图片墙，通过设置图片的垂直偏移量，并使用动画使其周期性地改变位置，可以创建出动态且具有波浪效果的图片墙，同时，还强调了响应式设计的重要性，以确保图片墙在不同设备上都能良好显示，详细内容请阅读本文，希望能对你有所帮助...
阅读更多...
CSS3 最强二维布局系统之Grid 网格布局

CSS3 最强二维布局系统之Grid 网格布局

《CSS3最强二维布局系统之Grid网格布局》CS3的Grid网格布局是目前最强的二维布局系统,可以同时对列和行进行处理,将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局，本文介... 深入学习 css3 目前最强大的布局系统 Grid 网格布局Grid 网格布局的基本认识Grid 网
阅读更多...
HTML5中下拉框＜select＞标签的属性和样式详解

HTML5中下拉框＜select＞标签的属性和样式详解

《HTML5中下拉框＜select＞标签的属性和样式详解》在HTML5中，下拉框（select标签）作为表单的重要组成部分，为用户提供了一个从预定义选项中选择值的方式,本文将深入探讨select标签的... 在html5中，下拉框（<select>标签）作为表单的重要组成部分，为用户提供了一个从预定义选项中
阅读更多...
MySQL zip安装包配置教程

MySQL zip安装包配置教程

《MySQLzip安装包配置教程》这篇文章详细介绍了如何使用zip安装包在Windows11上安装MySQL8.0,包括下载、解压、配置环境变量、初始化数据库、安装服务以及更改密码等步骤,感兴趣的朋... 目录mysql zip安装包配置教程1、下载zip安装包：2、安装2.1 解压zip包到安装目录2.2
阅读更多...
前端 CSS 动态设置样式：:class、:style 等技巧(推荐)

前端 CSS 动态设置样式：:class、:style 等技巧(推荐)

《前端CSS动态设置样式：:class、:style等技巧(推荐)》：本文主要介绍了Vue.js中动态绑定类名和内联样式的两种方法：对象语法和数组语法，通过对象语法，可以根据条件动态切换类名或样式；通过数组语法，可以同时绑定多个类名或样式，此外，还可以结合计算属性来生成复杂的类名或样式对象，详细内容请阅读本文，希望能对你有所帮助...
阅读更多...
禁止HTML页面滚动的操作方法

禁止HTML页面滚动的操作方法

《禁止HTML页面滚动的操作方法》：本文主要介绍了三种禁止HTML页面滚动的方法：通过CSS的overflow属性、使用JavaScript的滚动事件监听器以及使用CSS的position:fixed属性，每种方法都有其适用场景和优缺点，详细内容请阅读本文，希望能对你有所帮助... 在前端开发中，禁止htm
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2