Vue3 Coding Standards

Features

• Vue 3
• Pnpm 9
• Vite 5
• Pinia store
  • pinia-plugin-persistedstate
• Routing using vue-router 4
• TypeScript 5
• Axios
• Tailwind CSS 3
• Vue-i18n 9
• PostCSS 8 w/ postcss-nesting plugin
• Cssnano for minimizing production CSS
• Postcss-pxtorem generates rem units from pixel units
• Vite-plugin-svg-icons generate svg sprite map
• Unplugin-vue-components auto importing for common components
• Eslint
  • @component-hook/eslint-plugin
• Prettier
• Husky to improves commits
  • if encounter npx: command not found, can execute ln -s $(which npx) /usr/local/bin/npx in zsh
  • commitlint checks if your commit messages meet the conventional commit format
  • lint-staged filter files checked by pre commit lint
• Alias @ to <project_root>/src
• Mock use msw
  • npx msw init ./public
• Unit test use Vitest + Testing Library
  • jsdom
  • @vitest/coverage-v8
  • @testing-library/jest-dom
  • @testing-library/vue
  • @testing-library/user-event
• E2E test use playwright
• Rollup-plugin-visualizer visualize and analyze your Rollup bundle to see which modules are taking up space
• 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
• Github workflows
  • ci - on workflow call and dispatch
  • deploy - on push main branch
  • preview - on pull request
• Gitlab CI
  • run tests - on branches, merge request and manual

Project Files

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