Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tzuyi0817/coding-standards
Vue3 starter template w/ tests and CI.
https://github.com/tzuyi0817/coding-standards
msw playwright tailwindcss testing-library-vue vite vitest vue3-typescript
Last synced: about 1 month ago
JSON representation
Vue3 starter template w/ tests and CI.
- Host: GitHub
- URL: https://github.com/tzuyi0817/coding-standards
- Owner: tzuyi0817
- License: mit
- Created: 2023-07-13T03:36:56.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-11-18T17:07:50.000Z (about 2 months ago)
- Last Synced: 2024-11-18T18:28:25.806Z (about 2 months ago)
- Topics: msw, playwright, tailwindcss, testing-library-vue, vite, vitest, vue3-typescript
- Language: TypeScript
- Homepage:
- Size: 1.05 MB
- Stars: 0
- Watchers: 2
- Forks: 3
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# Vue3 Coding Standards
## Features
- Vue 3
- Pnpm 9
- Vite 5
- [Pinia](https://pinia.vuejs.org/) store
- [pinia-plugin-persistedstate](https://www.npmjs.com/package/pinia-plugin-persistedstate)
- Routing using [vue-router 4](https://router.vuejs.org/)
- TypeScript 5
- Axios
- Tailwind CSS 3
- Vue-i18n 9
- PostCSS 8 w/ `postcss-nesting` plugin
- [Cssnano](https://cssnano.github.io/cssnano/) for minimizing production CSS
- [Postcss-pxtorem](https://www.npmjs.com/package/postcss-pxtorem) generates rem units from pixel units
- [Vite-plugin-svg-icons](https://github.com/vbenjs/vite-plugin-svg-icons) generate svg sprite map
- [Unplugin-vue-components](https://www.npmjs.com/package/unplugin-vue-components) auto importing for common components
- Eslint
- [@component-hook/eslint-plugin](https://www.npmjs.com/package/@component-hook/eslint-plugin?activeTab=readme)
- Prettier
- [Husky](https://www.npmjs.com/package/husky) to improves commits
- if encounter npx: command not found, can execute `ln -s $(which npx) /usr/local/bin/npx` in zsh
- [commitlint](https://commitlint.js.org/#/) checks if your commit messages meet the conventional commit format
- [lint-staged](https://github.com/okonet/lint-staged) filter files checked by pre commit lint
- Alias `@` to `/src`
- Mock use [msw](https://mswjs.io/)
- `npx msw init ./public`
- Unit test use [Vitest](https://vitest.dev/) + [Testing Library](https://testing-library.com/)
- [jsdom](https://www.npmjs.com/package/jsdom)
- [@vitest/coverage-v8](https://vitest.dev/guide/coverage.html)
- [@testing-library/jest-dom](https://testing-library.com/docs/ecosystem-jest-dom/)
- [@testing-library/vue](https://testing-library.com/docs/vue-testing-library/intro/)
- [@testing-library/user-event](https://testing-library.com/docs/ecosystem-user-event/)
- E2E test use [playwright](https://playwright.dev/)
- [Rollup-plugin-visualizer](https://github.com/btd/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
```text
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
```