本项目选型默认使用vue3 + typescript + vite

1. 使用vite初始化项目

vite创建地址，创建完成后有一个基本的项目结构了，如下图

2. 配置vite.config.ts，配置详解

import { defineConfig } from 'vite'import path from 'path';import vue from '@vitejs/plugin-vue'import vueJsx from '@vitejs/plugin-vue-jsx'// https://vitejs.dev/config/export default defineConfig({plugins: [vue(), vueJsx()],resolve: {//设置文件路径解析,需要配合tsconfig.json的paths结合解析alias: {'@': path.resolve(__dirname, 'src'),components: path.resolve(__dirname, 'src/components'),}},//相关打包配置build: {sourcemap: true,// Turning off gzip-compressed size display can slightly reduce packaging timereportCompressedSize: false,chunkSizeWarningLimit: 2000,},//服务器相关配置，vite３默认端口5173server: {host: true,}})

发现报错了　Cannot find module path or its corresponding type declarations

那么需要安装@types/node并且在tsconfig.json中的types中添加’node’，如下配置

3. 配置tsconfig.json

{"compilerOptions": {"rootDir": ".", //　根目录地址"target": "ESNext",　// 指定 ECMAScript 目标版本"useDefineForClassFields": true,　// 对类字段使用定义"noImplicitAny": false, // 在表达式和声明上有隐含的 any类型时不报错"module": "ESNext", // 指定使用模块"moduleResolution": "Node", // 选择模块解析策略： 'node' (Node.js)"strict": true, // 启用所有严格类型检查选项"jsx": "preserve", // 指定 jsx 代码的生成"sourceMap": true, // 生成相应的 '.map' 文件"resolveJsonModule": true, // 解析 JSON 模块"isolatedModules": true, // 将每个文件作为单独的模块"esModuleInterop": true, // ES 模块互操作"lib": ["ESNext", "DOM"], // 指定要包含在编译中的库文件"skipLibCheck": true, // 过默认库检查"types": ["node", "naive-ui/volar"],　// 需要包含的类型声明文件名列表"baseUrl": ".",　// 用于解析非相对模块名称的基目录"importHelpers": true,　// 导入帮助"strictNullChecks": true,　// 启用严格的 null 检查"allowSyntheticDefaultImports": true,　// 允许合成默认导入"allowJs": false, //允许js文件"noEmit": true, // 不要发出编译器输出文件"paths": { //路径映射"@/*": ["src/*"],"components/*": ["src/components/*"]}},//指定需要包含的文件"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],"references": [{ "path": "./tsconfig.node.json" }] // 引用其他tsconfig配置，参考}

4. 配置git提交检查

前端一般使用yorkie和husky来对git提交进行lint检查，差异可看yorkie的文档介绍

npm install yorkie lint-staged --save-dev//在package.json中配置"gitHooks": {"pre-commit": "lint-staged","commit-msg": "node scripts/verifyCommit.js"},"lint-staged": {"*.{js,jsx,ts,tsx}": ["eslint --fix","prettier --write"],"package.json": ["prettier --write"],"*.vue": ["eslint --fix","prettier --write","stylelint --fix"],"*.{scss,less,styl,html}": ["stylelint --fix","prettier --write"],"*.md": ["prettier --write"]}scripts里面的erifyCommit.js和.github/commit-convention.md文件参考vue3

5. 配置eslint进行代码规范化

pnpm add -D eslint @antfu/eslint-config　eslint-plugin-prettier　eslint-config-prettier //直接安装使用即可module.exports = {"extends": ["@antfu","prettier" //eslint走prettier,关闭所有不必要或可能与Prettier冲突的规则，eslint-config-prettier"plugin:prettier/recommended"　// 其实是一些已经配置好的规则插件等，使用recommended配置]}

6. 配置prettier进行代码格式化

prettier可配置规则

// prettier.config.jsmodule.exports = {printWidth: 120,　// 设置每行显示最长的长度tabWidth: 2, // eslint/rules/indent　指定每个缩进级别的空格数useTabs: false, // 用 tabs 之后很多问题，例如按 tab 后不能一次性定位到正确缩进位置，建议用 spacesemi: false, // 与 trailingComma 相对应，应该加上行尾分号trailingComma: 'all', // eslint/rules/comma-dangle，行尾加上逗号singleQuote: true, // eslint/rules/quotes　使用单引号jsxSingleQuote: true,　// jsx使用单引号arrowParens: 'avoid',　// 在唯一的箭头函数参数周围包含括号};

7. 配置style规则，实现快速格式化css

module.exports = {root: true,plugins: ['stylelint-order'],extends: ["stylelint-config-standard", "stylelint-config-prettier", "stylelint-config-recommended-vue"],customSyntax: 'postcss-html',rules: {'selector-pseudo-class-no-unknown': [true,{ignorePseudoClasses: ['deep', 'v-slotted'],},],'selector-pseudo-element-no-unknown': [true,{ignorePseudoElements: ['v-deep', ':deep'],},],'at-rule-no-unknown': [true,{ignoreAtRules: ['tailwind','apply','variants','responsive','screen','function','if','each','include','mixin','extend',':deep',],},],'value-keyword-case': null,'no-empty-source': null,'no-duplicate-selectors': null,'named-grid-areas-no-invalid': null,'unicode-bom': 'never','no-descending-specificity': null,'font-family-no-missing-generic-family-keyword': null,'declaration-colon-space-after': 'always-single-line','declaration-colon-space-before': 'never',// 'declaration-block-trailing-semicolon': 'always','custom-property-empty-line-before': 'never','rule-empty-line-before': null,'unit-no-unknown': [true, { ignoreUnits: ['rpx'] }],'order/order': [['dollar-variables','custom-properties','at-rules','declarations',{type: 'at-rule',name: 'supports',},{type: 'at-rule',name: 'media',},'rules',],{ severity: 'warning' },],'selector-class-pattern': null,'function-name-case': null,'declaration-empty-line-before': null,'color-function-notation': null,'alpha-value-notation': null,'order/properties-order': ['position','top','right','bottom','left','z-index','display','visibility','float','clear','overflow','-ms-overflow-x','-ms-overflow-y','overflow-x','overflow-y','-webkit-overflow-scrolling','clip','-webkit-align-content','-ms-flex-line-pack','align-content','-webkit-box-align','-moz-box-align','-webkit-align-items','align-items','-ms-flex-align','-webkit-align-self','-ms-flex-item-align','-ms-grid-row-align','align-self','-webkit-box-flex','-webkit-flex','-moz-box-flex','-ms-flex','flex','-webkit-flex-flow','-ms-flex-flow','flex-flow','-webkit-flex-basis','-ms-flex-preferred-size','flex-basis','-webkit-box-orient','-webkit-box-direction','-webkit-flex-direction','-moz-box-orient','-moz-box-direction','-ms-flex-direction','flex-direction','-webkit-flex-grow','-ms-flex-positive','flex-grow','-webkit-flex-shrink','-ms-flex-negative','flex-shrink','-webkit-flex-wrap','-ms-flex-wrap','flex-wrap','-webkit-box-pack','-moz-box-pack','-ms-flex-pack','-webkit-justify-content','justify-content','-webkit-box-ordinal-group','-webkit-order','-moz-box-ordinal-group','-ms-flex-order','order','-webkit-box-sizing','-moz-box-sizing','box-sizing','margin','margin-top','margin-right','margin-bottom','margin-left','padding','padding-top','padding-right','padding-bottom','padding-left','min-width','min-height','max-width','max-height','width','height','outline','outline-width','outline-style','outline-color','outline-offset','border','border-spacing','border-collapse','border-width','border-style','border-color','border-top','border-top-width','border-top-style','border-top-color','border-right','border-right-width','border-right-style','border-right-color','border-bottom','border-bottom-width','border-bottom-style','border-bottom-color','border-left','border-left-width','border-left-style','border-left-color','-webkit-border-radius','-moz-border-radius','border-radius','-webkit-border-top-left-radius','-moz-border-radius-topleft','border-top-left-radius','-webkit-border-top-right-radius','-moz-border-radius-topright','border-top-right-radius','-webkit-border-bottom-right-radius','-moz-border-radius-bottomright','border-bottom-right-radius','-webkit-border-bottom-left-radius','-moz-border-radius-bottomleft','border-bottom-left-radius','-webkit-border-image','-moz-border-image','-o-border-image','border-image','-webkit-border-image-source','-moz-border-image-source','-o-border-image-source','border-image-source','-webkit-border-image-slice','-moz-border-image-slice','-o-border-image-slice','border-image-slice','-webkit-border-image-width','-moz-border-image-width','-o-border-image-width','border-image-width','-webkit-border-image-outset','-moz-border-image-outset','-o-border-image-outset','border-image-outset','-webkit-border-image-repeat','-moz-border-image-repeat','-o-border-image-repeat','border-image-repeat','-webkit-border-top-image','-moz-border-top-image','-o-border-top-image','border-top-image','-webkit-border-right-image','-moz-border-right-image','-o-border-right-image','border-right-image','-webkit-border-bottom-image','-moz-border-bottom-image','-o-border-bottom-image','border-bottom-image','-webkit-border-left-image','-moz-border-left-image','-o-border-left-image','border-left-image','-webkit-border-corner-image','-moz-border-corner-image','-o-border-corner-image','border-corner-image','-webkit-border-top-left-image','-moz-border-top-left-image','-o-border-top-left-image','border-top-left-image','-webkit-border-top-right-image','-moz-border-top-right-image','-o-border-top-right-image','border-top-right-image','-webkit-border-bottom-right-image','-moz-border-bottom-right-image','-o-border-bottom-right-image','border-bottom-right-image','-webkit-border-bottom-left-image','-moz-border-bottom-left-image','-o-border-bottom-left-image','border-bottom-left-image','background',"-ms-filter:'progid:DXImageTransform.Microsoft.Alpha",'filter:progid:DXImageTransform.Microsoft.Alpha(Opacity','-ms-interpolation-mode','-webkit-filter','-ms-filter','filter','background-color','background-image','background-attachment','background-position','-ms-background-position-x','-ms-background-position-y','background-position-x','background-position-y','-webkit-background-clip','-moz-background-clip','background-clip','background-origin','-webkit-background-size','-moz-background-size','-o-background-size','background-size','background-repeat','object-fit','box-decoration-break','-webkit-box-shadow','-moz-box-shadow','box-shadow','color','table-layout','caption-side','empty-cells','list-style','list-style-position','list-style-type','list-style-image','quotes','content','counter-increment','counter-reset','-ms-writing-mode','vertical-align','text-align','-webkit-text-align-last','-moz-text-align-last','-ms-text-align-last','text-align-last','text-decoration','text-emphasis','text-emphasis-position','text-emphasis-style','text-emphasis-color','text-indent','-ms-text-justify','text-justify','text-outline','text-transform','text-wrap','-ms-text-overflow','text-overflow','text-overflow-ellipsis','text-overflow-mode','text-shadow','white-space','word-spacing','-ms-word-wrap','word-wrap','-ms-word-break','word-break','-moz-tab-size','-o-tab-size','tab-size','-webkit-hyphens','-moz-hyphens','hyphens','letter-spacing','font','font-weight','font-style','font-variant','font-size-adjust','font-stretch','font-size','font-family','src','line-height','opacity','-ms-interpolation-mode','resize','cursor','nav-index','nav-up','nav-right','nav-down','nav-left','-webkit-transition','-moz-transition','-ms-transition','-o-transition','transition','-webkit-transition-delay','-moz-transition-delay','-ms-transition-delay','-o-transition-delay','transition-delay','-webkit-transition-timing-function','-moz-transition-timing-function','-ms-transition-timing-function','-o-transition-timing-function','transition-timing-function','-webkit-transition-duration','-moz-transition-duration','-ms-transition-duration','-o-transition-duration','transition-duration','-webkit-transition-property','-moz-transition-property','-ms-transition-property','-o-transition-property','transition-property','-webkit-transform','-moz-transform','-ms-transform','-o-transform','transform','-webkit-transform-origin','-moz-transform-origin','-ms-transform-origin','-o-transform-origin','transform-origin','-webkit-animation','-moz-animation','-ms-animation','-o-animation','animation','-webkit-animation-name','-moz-animation-name','-ms-animation-name','-o-animation-name','animation-name','-webkit-animation-duration','-moz-animation-duration','-ms-animation-duration','-o-animation-duration','animation-duration','-webkit-animation-play-state','-moz-animation-play-state','-ms-animation-play-state','-o-animation-play-state','animation-play-state','-webkit-animation-timing-function','-moz-animation-timing-function','-ms-animation-timing-function','-o-animation-timing-function','animation-timing-function','-webkit-animation-delay','-moz-animation-delay','-ms-animation-delay','-o-animation-delay','animation-delay','-webkit-animation-iteration-count','-moz-animation-iteration-count','-ms-animation-iteration-count','-o-animation-iteration-count','animation-iteration-count','-webkit-animation-direction','-moz-animation-direction','-ms-animation-direction','-o-animation-direction','animation-direction','pointer-events','unicode-bidi','direction','-webkit-columns','-moz-columns','columns','-webkit-column-span','-moz-column-span','column-span','-webkit-column-width','-moz-column-width','column-width','-webkit-column-count','-moz-column-count','column-count','-webkit-column-fill','-moz-column-fill','column-fill','-webkit-column-gap','-moz-column-gap','column-gap','-webkit-column-rule','-moz-column-rule','column-rule','-webkit-column-rule-width','-moz-column-rule-width','column-rule-width','-webkit-column-rule-style','-moz-column-rule-style','column-rule-style','-webkit-column-rule-color','-moz-column-rule-color','column-rule-color','break-before','break-inside','break-after','page-break-before','page-break-inside','page-break-after','orphans','widows','-ms-zoom','zoom','max-zoom','min-zoom','user-zoom','orientation',],},ignoreFiles: ['dist/**/*','**/*.js', '**/*.jsx', '**/*.tsx', '**/*.ts', './*.js'],}

8. CICD

首先是处于.github/workflows文件夹下面，所以如果没有这个文件夹，那么你需要先建立对应的文件夹
然后在创建一个ci.yml文件，写的时候需要写yml语法，需要学习的话可以菜鸟教材

// ci.yml
name: CIon:push:branches:- mainpull_request:branches:- mainjobs:lint:runs-on: ubuntu-lateststeps:- uses: actions/checkout@v3- name: Install pnpmuses: pnpm/action-setup@v2- name: Set nodeuses: actions/setup-node@v3with:node-version: 18.xcache: pnpm- name: Setuprun: npm i -g pnpm- name: Lintrun: pnpm run linttest:runs-on: ubuntu-lateststrategy:matrix:node: [14.x, 16.x, 18.x]fail-fast: falsesteps:- uses: actions/checkout@v3- name: Install pnpmuses: pnpm/action-setup@v2- name: Set node version to ${{ matrix.node }}uses: actions/setup-node@v3with:node-version: ${{ matrix.node }}cache: pnpm- name: Setuprun: npm i -g pnpm- name: Buildrun: pnpm run build- name: Typecheckrun: nr typecheck- name: Testrun: pnpm run test

// cd.yml
name: Publish Packageon:push:tags:- v*jobs:publish-npm:runs-on: ubuntu-lateststeps:- name: Checkoutuses: actions/checkout@v3with:fetch-depth: 0- name: Install pnpmuses: pnpm/action-setup@v2- name: Use Node.js ${{ matrix.node-version }}uses: actions/setup-node@v3with:node-version: ${{ matrix.node-version }}registry-url: https://registry.npmjs.org/cache: pnpm- run: pnpm install- run: npx changelogithub --no-groupcontinue-on-error: trueenv:GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}- run: pnpm run publishenv:NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}NODE_OPTIONS: --max-old-space-size=6144