Vue3 Coding Standards

This project is built with vue3 + vite, using pnpm for package management and pinia for state management.

Features

• Development Experience: Written in typeScript, styled with tailwindcss, and structured with vue-router, and vue-i18n. Supports SVGs (vite-plugin-svg-icons).
• API & Mocking: Handles requests with axios and mocks APIs using msw.
• Code Quality: Enforces standards with eslint and prettier, with husky, commitlint, and lint-staged for commit validation.
• Testing: Uses vitest + testing-library for unit testing and playwright for E2E testing.
• Optimization: Compresses CSS with cssnano , converts units with postcss-pxtorem, and analyzes assets with rollup-plugin-visualizer.
• CI/CD: Integrates GitHub Actions and GitLab CI for automated testing and deployment.

Code Features / Opinions

• Project root aliased as @ to <project_root>/src
• Store persistedstate use pinia-plugin-persistedstate
• ESlint plugin use @component-hook/eslint-plugin
• if encounter npx: command not found, can execute ln -s $(which npx) /usr/local/bin/npx in zsh
• Predefined and fully typed global variables:
  • VITE_APP_VERSION is read from package.json version at build time
  • VITE_APP_BUILD_EPOCH is populated as new Date().getTime() at build time
  • VITE_APP_MOCK is use mock environment

Project Files

src/
├── __tests__/
│   ├── __mocks__/
│   ├── setup/
│   │   └── unitTest.ts
│   ├── e2e/*
│   └── unit/*
├── assets/*
│   └── images/
│       └── svg-icons
│          └── vue.svg
├── components/
│   └── svg-icon/
│       ├── src
│       │   └── index.vue
│       └── index.ts
├── constants/*
├── hooks/*
├── locales/
│   ├── en-US.json
│   └── zh-CN.json
├── mocks/
│   ├── handlers/*
│   │   ├── modules/*
│   │   └── index.ts
│   │── browser.ts
│   └── server.ts
├── pages/
│   └── home/
│       ├── components
│       │   └── HelloWorld.vue
│       └── index.vue
├── plugins/
│   └── i18n.ts
├── router/
│   └── index.ts
├── stores/
│   ├── modules
│   │   └── config.ts
│   └── index.ts
├── styles/
│   ├── common/
|   │   ├── all.css
|   │   └── button.css
│   ├── base.css
│   ├── index.css
│   └── tailwind.css
├── types/*
├── utils/*
├── App.vue
├── vite-env.d.ts
└── main.ts