网络日志

vue3 + tsx + pinia + jest开发模板整理

  公司项目使用react,但是作为vue2的一名coder,周末花了两天的时间,整理了一波vue3 + tsx + vite + axios 的开发模板,里面涵盖jest、tailwindcss、pinia、element-plus等一些日常工具包,以及加入了eslint、prettier保证日常开发代码质量工具,基本上能够保证大家能够开箱即用,下面附上模板代码地址,关于代码目录结构可以参考代码仓库的说明文档,喜欢的朋友可以转评赞给一个,点个收藏不丢失,下面呢我介绍一下基本构建思路;

1、关于项目中使用tsx

  要想项目中运行tsx,我们就得考虑到tsx语法糖编译的问题,这里就得用到@vitejs/plugin-vue-jsx插件,详细用法参考github文档,安装后,在vite的plugin中直接调用即可;

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), vueJsx()]
})

2、安装tailwindcss

  关于tailwindcss + vite方案,它的官网有了很友好的方案,这块大家按部就班的安装就够了,没有多少复杂度,参考地址,选择tailwindcss主要是它提供了一些快速样式,比如padding、margin、background等,如果我们项目是后台管理系统,tailwindcss会大大降低我们写css样式的工作,大家可以去学习一波在项目中用起来,熟悉了以后就觉得他是在是太方便了。

  这里不做用法的介绍,就推荐一个vscode插件Tailwind CSS IntelliSense,安装后,在项目中我们就可以只能提示,如下所示:

3、关于eslint + prettier 代码统一规范

  关于代码规范,一般小一点公司不太会做这方面的工程化配置,但是eslint等这些代码规范工具,会让我们团队的代码更规范,风格更统一,团队协作更加方便,我简单说一下配置eslint及prettier的办法

(1)首先安装eslint工具库

pnpm add eslint -D

pnpm eslint --init

(2)安装外部的语法eslint规范及import校验规范

  选择对应的项目内容,这里我的项目用到(vue, typescript,browser)这个,当然有这个还不够,我们需要安装如下两个工具包

pnpm add eslint-plugin-import // 主要对于es与typescript import 路径的一个eslint校验

pnpm add eslint-config-airbnb-base // 这个是airbnb出的一套eslint语法规范的工具库,如果自己公司没有对应的代码规范,这个是很实用的一套

(3)编写vue3相关的规范

  项目中我们用到的是eslint-plugin-vue这个vue代码校验规范工具,里面有很多内容及配置项功能,我们这里推荐大家在配置代码规范,可以参考官方的说明文档,链接放在这里

(4)安装和配置prettier

  这个相对来讲比较简单一些,我们直接安装pnpm add eslint-plugin-prettier eslint-config-prettier prettier -D,这里我们需要注意的是prettier与eslint冲突问题;

  上面是配置时候的基本流程,最终结果我将eslintrc文件及package.json文件放到这里,有需要的朋友,可以直接copy一份去配置,毕竟这个配置很臭很长,深入学习感觉又没有太大必要(23333~)

{
  "name": "vue-tsx-template",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "preview": "vite preview",
    "fix": "eslint --fix --ext .js,.jsx,.tsx,.vue src && prettier "
  },
  "dependencies": {
    "vue": "^3.2.25"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^5.23.0",
    "@typescript-eslint/parser": "^5.23.0",
    "@vitejs/plugin-vue": "^2.3.3",
    "@vitejs/plugin-vue-jsx": "^1.3.10",
    "autoprefixer": "^10.4.7",
    "eslint": "^8.15.0",
    "eslint-config-airbnb-base": "^15.0.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-vue": "^8.7.1",
    "postcss": "^8.4.13",
    "prettier": "^2.6.2",
    "sass": "^1.51.0",
    "tailwindcss": "^3.0.24",
    "typescript": "^4.5.4",
    "vite": "^2.9.9",
    "vue-eslint-parser": "^9.0.1",
    "vue-tsc": "^0.34.7"
  }
}

下面是.eslintrc.js文件

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
    // 处理 defineProps 报错
    'vue/setup-compiler-macros': true,
  },
  extends: [
    'eslint:recommended',
    'airbnb-base',
    'prettier',
    'plugin:prettier/recommended',
    'plugin:vue/vue3-recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:import/recommended',
    'plugin:import/typescript',
  ],
  parser: 'vue-eslint-parser',
  parserOptions: {
    ecmaVersion: 'latest',
    parser: '@typescript-eslint/parser',
    sourceType: 'module',
  },
  plugins: ['vue', '@typescript-eslint'],
  rules: {
    // 防止prettier与eslint冲突
    'prettier/prettier': 'error',
    // eslint-plugin-import es module导入eslint规则配置,旨在规避拼写错误问题
    'import/no-unresolved': 0,
    'import/extensions': [
      'error',
      {
        js: 'never',
        jsx: 'never',
        ts: 'never',
        tsx: 'never',
        json: 'always',
      },
    ],
    // 使用导出的名称作为默认属性(主要用作导出模块内部有 default, 和直接导出两种并存情况下,会出现default.proptry 这种问题从在的情况)
    'import/no-named-as-default-member': 0,
    'import/order': ['error', { 'newlines-between': 'always' }],
    // 导入确保是否在首位
    'import/first': 0,
    // 如果文件只有一个导出,是否开启强制默认导出
    'import/prefer-default-export': 0,
    'import/no-extraneous-dependencies': [
      'error',
      {
        devDependencies: [],
        optionalDependencies: false,
      },
    ],
    /**
     * 关于typescript语法校验
     * 参考文档: https://www.npmjs.com/package/@typescript-eslint/eslint-plugin
     */
    '@typescript-eslint/no-extra-semi': 0,
    // 是否禁止使用any类型
    '@typescript-eslint/no-explicit-any': 0,
    // 是否对于null情况做非空断言
    '@typescript-eslint/no-non-null-assertion': 0,
    // 是否对返回值类型进行定义校验
    '@typescript-eslint/explicit-function-return-type': 0,
    '@typescript-eslint/member-delimiter-style': ['error', { multiline: { delimiter: 'none' } }],
    // 结合eslint 'no-use-before-define': 'off',不然会有报错,需要关闭eslint这个校验,主要是增加了对于type\interface\enum
    'no-use-before-define': 'off',
    '@typescript-eslint/no-use-before-define': ['error'],
    '@typescript-eslint/explicit-module-boundary-types': 'off',
    '@typescript-eslint/no-unused-vars': [
      'error',
      {
        ignoreRestSiblings: true,
        varsIgnorePattern: '^_',
        argsIgnorePattern: '^_',
      },
    ],
    '@typescript-eslint/explicit-member-accessibility': ['error', { overrides: { constructors: 'no-public' } }],
    '@typescript-eslint/consistent-type-imports': 'error',
    '@typescript-eslint/indent': 0,
    '@typescript-eslint/naming-convention': [
      'error',
      {
        selector: 'interface',
        format: ['PascalCase'],
      },
    ],
    // 不允许使用 var
    'no-var': 'error',
    // 如果没有修改值,有些用const定义
    'prefer-const': [
      'error',
      {
        destructuring: 'any',
        ignoreReadBeforeAssign: false,
      },
    ],
    // 关于vue3 的一些语法糖校验
    // 超过 4 个属性换行展示
    'vue/max-attributes-per-line': [
      'error',
      {
        singleline: 4,
      },
    ],
    // setup 语法糖校验
    'vue/script-setup-uses-vars': 'error',
    // 关于箭头函数
    'vue/arrow-spacing': 'error',
    'vue/html-indent': 'off',
  },
}

4、加入单元测试

  单元测试,根据自己项目体量及重要性而去考虑是否要增加,当然单测可以反推一些组件 or 方法的设计是否合理,同样如果是一个稳定的功能在加上单元测试,这就是一个很nice的体验;我们单元测试是基于jest来去做的,具体安装单测的办法如下,跟着我的步骤一步步来;

  • 安装jest单测相关的依赖组件库

pnpm add @testing-library/vue @testing-library/user-event @testing-library/jest-dom @types/jest jest @vue/test-utils -D

  • 安装完成后,发现还需要安装前置依赖 @testing-library/dom @vue/compiler-sfc我们继续补充
  • 安装babel相关工具,用ts写的单元测试需要转义,具体安装工具如下pnpm add @babel/core babel-jest @vue/babel-preset-app -D,最后我们配置babel.config.js

    module.exports = {
    presets: ['@vue/app'],
    }
  • 配置jest.config.js

    module.exports = {
    roots: ['<rootDir>/test'],
    testMatch: [
      // 这里我们支持src目录里面增加一些单层,事实上我并不喜欢这样做
      '<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}',
      '<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}',
      // 这里我习惯将单层文件统一放在test单独目录下,不在项目中使用,降低单测文件与业务组件模块混合在一起
      '<rootDir>/test/**/*.{spec,test}.{js,jsx,ts,tsx}',
    ],
    testEnvironment: 'jsdom',
    transform: {
      // 此处我们单测没有适用vue-jest方式,项目中我们江永tsx方式来开发,所以我们如果需要加入其它的内容
      // '^.+\\.(vue)$': '<rootDir>/node_modules/vue-jest',
      '^.+\\.(js|jsx|mjs|cjs|ts|tsx)$': '<rootDir>/node_modules/babel-jest',
    },
    transformIgnorePatterns: [
      '<rootDir>/node_modules/',
      '[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs|cjs|ts|tsx)$',
      '^.+\\.module\\.(css|sass|scss|less)$',
    ],
    moduleFileExtensions: ['ts', 'tsx', 'vue', 'js', 'jsx', 'json', 'node'],
    resetMocks: true,
    }

      具体写单元测试的方法,可以参考项目模板中的组件单元测试写法,这里不做过多的说明;

    5、封装axios请求库

      这里呢其实思路有很多种,如果有自己的习惯的封装方式,就按照自己的思路,下面附上我的封装代码,简短的说一下我的封装思路:

  • 1、基础的请求拦截、相应拦截封装,这个是对于一些请求参数格式化处理等,或者返回值情况处理
  • 2、请求异常、错误、接口调用成功返回结果错误这些错误的集中处理,代码中请求就不再做trycatch这些操作
  • 3、请求函数统一封装(代码中的 get、post、axiosHttp
  • 4、泛型方式定义请求返回参数,定义好类型,让我们可以在不同地方使用有良好的提示

    import type { AxiosRequestConfig, AxiosResponse } from 'axios'
    import axios from 'axios'
    import { ElNotification } from 'element-plus'
    
    import errorHandle from './errorHandle'
    
    // 定义数据返回结构体(此处我简单定义一个比较常见的后端数据返回结构体,实际使用我们需要按照自己所在的项目开发)
    interface ResponseData<T = null> {
    code: string | number
    data: T
    success: boolean
    message?: string
    [key: string]: any
    }
    
    const axiosInstance = axios.create()
    // 设定响应超时时间
    axiosInstance.defaults.timeout = 30000
    // 可以后续根据自己http请求头特殊邀请设定请求头
    
    axiosInstance.interceptors.request.use(
    (req: AxiosRequestConfig<any>) => {
      // 特殊处理,后续如果项目中有全局通传参数,可以在这儿做一些处理
      return req
    },
    error => Promise.reject(error),
    )
    // 响应拦截
    axiosInstance.interceptors.response.use(
    (res: AxiosResponse<any, any>) => {
      // 数组处理
      return res
    },
    error => Promise.reject(error),
    )
    
    // 通用的请求方法体
    const axiosHttp = async <T extends Record<string, any> | null>(
    config: AxiosRequestConfig,
    desc: string,
    ): Promise<T> => {
    try {
      const { data } = await axiosInstance.request<ResponseData<T>>(config)
      if (data.success) {
        return data.data
      }
      // 如果请求失败统一做提示(此处我没有安装组件库,我简单写个mock例子)
      ElNotification({
        title: desc,
        message: `${data.message || '请求失败,请检查'}`,
      })
    } catch (e: any) {
      // 统一的错误处理
      if (e.response && e.response.status) {
        errorHandle(e.response.status, desc)
      } else {
        ElNotification({
          title: desc,
          message: '接口异常,请检查',
        })
      }
    }
    return null as T
    }
    // get请求方法封装
    export const get = async <T = Record<string, any> | null>(url: string, params: Record<string, any>, desc: string) => {
    const config: AxiosRequestConfig = {
      method: 'get',
      url,
      params,
    }
    const data = await axiosHttp<T>(config, desc)
    return data
    }
    // Post请求方法
    export const post = async <T = Record<string, any> | null>(url: string, data: Record<string, any>, desc: string) => {
    const config: AxiosRequestConfig = {
      method: 'post',
      url,
      data,
    }
    const info = await axiosHttp<T>(config, desc)
    return info
    }

    请求错误(状态码错误相关提示)

    import { ElNotification } from 'element-plus'
    
    function notificat(message: string, title: string) {
    ElNotification({
      title,
      message,
    })
    }
    /**
     * @description 获取接口定义
     * @param status {number} 错误状态码
     * @param desc {string} 接口描述信息
     */
    export default function errorHandle(status: number, desc: string) {
    switch (status) {
      case 401:
        notificat('用户登录失败', desc)
        break
      case 404:
        notificat('请求不存在', desc)
        break
      case 500:
        notificat('服务器错误,请检查服务器', desc)
        break
      default:
        notificat(`其他错误${status}`, desc)
        break
    }
    }

    6、关于vue-router 及 pinia

      这两个相对来讲简单一些,会使用vuex状态管理,上手pinia也是很轻松的事儿,只是更简单化了、更方便了,可以参考模板项目里面的用法example,这里附上routerpinia配置方法,路由守卫,大家可以根据项目的要求再添加

    import type { RouteRecordRaw } from 'vue-router'
    import { createRouter, createWebHistory } from 'vue-router'
    
    // 配置路由
    const routes: Array<RouteRecordRaw> = [
    {
      path: '/',
      redirect: '/home',
    },
    {
      name: 'home',
      path: '/home',
      component: () => import('page/Home'),
    },
    ]
    
    const router = createRouter({
    routes,
    history: createWebHistory(),
    })
    
    export default router

    针对与pinia,参考如下:

    import { createPinia } from 'pinia'
    
    export default createPinia()

    在入口文件将router和store注入进去

    import { createApp } from 'vue'
    
    import App from './App'
    import store from './store/index'
    import './style/index.css'
    import './style/index.scss'
    import 'element-plus/dist/index.css'
    import router from './router'
    // 注入全局的store
    const app = createApp(App).use(store).use(router)
    
    app.mount('#app')

  说这些比较枯燥,建议大家去github参考项目说明文档,下载项目,自己过一遍,喜欢的朋友收藏点赞一下,如果喜欢我构建好的项目给个star不丢失,谢谢各位看官的支持。