1. TS

(1) 在组件中使用Ref声明变量类型
组件中如果不变量声明类型，引用类型会提示错误

直接用类型声明也类型也不匹配

需要引入vue中的Ref类型

2. mock

当后端还未开发完成或者为了调试需要接口有不同的响应数据，前端需要mock请求，步骤如下

(1) 安装依赖 pnpm add mockjs vite-plugin-mock -D

(2) 在vite config中配置mock server

import  { viteMockServe } from 'vite-plugin-mock'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    viteMockServe({
      mockPath: './src/mocks',
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

(3) 创建mock文件，自定义需要mock的请求和响应

(4) 测试，mock已正常工作

3. pinia store

示例：获取用户信息，存入store，在多个组件中使用用户信息

/src/stores/user.ts

import { defineStore } from 'pinia'
import { getUser } from '@/services/common';

export const useUserStore = defineStore('user', {
  state: () => {
    return {
      name: '',
      nick: '',
      avatarUrl: '/user.png',
    }
  },
  actions: {
    async getUserInfo() {
      return getUser().then((user: User) => {
        this.name = user.name;
        this.nick = user.nick;
        this.avatarUrl = user.avatarUrl;
      }).catch(msg => {
        console.log('get user error: ', msg);
      });
    }
  }
});

在组件A中调用获取用户信息的方法

<script setup lang="ts">
import { useUserStore } from '@/stores/user';


const userStore = useUserStore();

userStore.getUserInfo().then(() => {
  // 获取用户信息成功
}).catch(() => {
  console.log('获取用户信息失败');
});

</script>

在组件B中监听user的变化

  import { useUserStore } from '@/stores/user';
  
  const userStore = useUserStore();

  watch(() => userStore.nick, (nick) => {
    if(!nick) {
        // 省略
      }
  });

4. vue-i18n

(1) 项目引入i18n

在src/locales中创建i18n实例

![Xnip2024-02-21_10-06-06.jpg](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/220f01f1bfe142c6821e08b7c99872b9~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1882&h=1278&s=315309&e=jpg&b=161616)

在app中注册实例，main.ts

 import i18n from './locales'
 app.use(i18n)

(2) 在组件setup中使用

<script setup lang="ts">
// 省略了一些无关的内容
import { useI18n } from 'vue-i18n'
const { t } = useI18n();

const accountRules = {
    account: [
        {
            validator: (_: any, value: string, callback: any) => {
                if(!value) {
                    return callback(new Error(t('common.rule.required')));
                }
               // 省略
            },
        }
    ],
}

(3) 在普通ts文件中使用

import i18n from '@/locales';

const t = i18n.global.t;

export function validateAccount(account: string, domainList: string[]): Error | undefined{
    // 省略了一些无关的
    if(!confirmDomain){
        return new Error(t('passwordReset.formError.accountSuffix'));;
    }

    return undefined;
}

5. vue-router

在setup、ts文件中使用router

import { useRouter } from 'vue-router';
const router = useRouter();
router.replace('/xxxx');

vue3项目创建

1. TS

2. mock

3. pinia store

4. vue-i18n

5. vue-router