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
    },
    // 解决办法1
    doubleCount2(state) {
    
    
      return this.count * 2
    },
    // 解决办法2
    doubleCount3():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