vite+ts+vuex+router+axios项目初始化及代码规范配置详解

安装eslint，选择对应的配置

npm install eslint -D
npx eslint --init

VSCODE配置ESlint

1、安装eslint插件
2、文件=》首选项=-》设置=》Eslint › Format: Enable 启用
3、选择对应的文件，右键，将默认格式化工具改成eslint

配置git commit钩子 lint-staged ，防止垃圾代码被提交

npx mrm@2 lint-staged

修改pakege.json 的校验规则

  "lint-staged": {
    "*.{js,jsx,vue,ts,tsx}": [
      "npm run lint",
      "git add"
    ]
  }

vite+eslint 错误提示插件配置

来源：https://github.com/gxmari007/vite-plugin-eslint
安装插件

npm install vite-plugin-eslint --save-dev

添加该插件配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import eslintPlugin from 'vite-plugin-eslint'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(),
    eslintPlugin({
      // 配置选项
      cache: false //禁用eslint缓存
    })
  ]
})

添加git commit message 提交规范

参考阮一峰老师的文章：http://ruanyifeng.com/blog/2016/01/commit_message_change_log.html

插件地址：https://github.com/conventional-changelog/commitlint

在windows下安装插件

npm install --save-dev @commitlint/config-conventional @commitlint/cli

# 以下这步windows可能会报编码错误，手动创建文件即可
echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js

创建 commit-msg 文件

npx husky add .husky/commit-msg 'npx --no -- commitlint --edit "$1"'

配置vite 的 ts 支持

参考vite官方文档：https://cn.vitejs.dev/guide/features.html#typescript-compiler-options
在tsconfig.json文件中加上以下配置（目前官方似乎已经默认加上此配置了）

"isolatedModules": true

配置 jsx/tsx 支持

官方文档：https://github.com/vitejs/vite/tree/main/packages/plugin-vue-jsx
安装插件

npm install -D @vitejs/plugin-vue-jsx

在vite中添加对应插件

// vite.config.js
import vueJsx from '@vitejs/plugin-vue-jsx'

export default {
  plugins: [
    vueJsx({
      // options are passed on to @vue/babel-plugin-jsx
    })
  ]
}

添加vue-router

安装插件

npm install vue-router@next

创建配置文件 router/index.ts

增加初始化配置

import { createRouter, createWebHashHistory } from 'vue-router'
import type { RouteRecordRaw } from 'vue-router'

const route: RouteRecordRaw[] = [

]

const router = createRouter({
  routes: route,
  history: createWebHashHistory()
})

export default router

main.ts中增加配置

app.use(router)

添加 vuex

安装插件

npm install vuex@next

创建 store/index.ts
添加初始化配置

import { createStore } from 'vuex'

// 创建一个新的 store 实例
const store = createStore({
  state () {
    return {

    }
  },
  mutations: {

  }
})

export default store

到main.js添加对应配置

app.use(store)

添加对 ts 的支持
官方文档：https://vuex.vuejs.org/zh/guide/typescript-support.html
创建对应的支持文件 src/vuex.d.ts

// vuex.d.ts
import { ComponentCustomProperties } from 'vue'
import { Store } from 'vuex'

declare module '@vue/runtime-core' {
  // 声明自己的 store state
  interface State {
    count: number
  }

  // 为 `this.$store` 提供类型声明
  interface ComponentCustomProperties {
    $store: Store<State>
  }
}

因为vuex4目前没有对ts很好的支持，所以我们需要重新配置index.ts

import { InjectionKey } from 'vue'
import { createStore, useStore as baseUseStore, Store } from 'vuex'

// 为 store state 声明类型
export interface State {
    count: number
  }

// 定义 injection key
export const key: InjectionKey<Store<State>> = Symbol('store')

// 创建一个新的 store 实例
export const store = createStore<State>({
  state () {
    return {
      count: 0
    }
  },
  mutations: {

  }
})

// 定义自己的 `useStore` 组合式函数
export function useStore () {
  return baseUseStore(key)
}

main.ts中改为

import { store, key } from './store'

app.use(store, key)