Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/yugasun/vue-ts-starter

Vue template for starter using Vue3 + TypeScript + Vite + Pinia 🚀
https://github.com/yugasun/vue-ts-starter

axios boilerplate element-plus msw pinia starter template typescript vite vue3 vueuse

Last synced: 9 days ago
JSON representation

Vue template for starter using Vue3 + TypeScript + Vite + Pinia 🚀

Awesome Lists containing this project

README

        

# Vue TypeScript Starter

[![Vue3](https://img.shields.io/badge/Framework-Vue3-42b883)](https://vuejs.org/)
[![TypeScript](https://img.shields.io/badge/Language-TypeScript-blue)](https://www.typescriptlang.org/)
[![Vite](https://img.shields.io/badge/Develop-Vite-747bff)](https://vitejs.dev)
[![Pinia](https://img.shields.io/badge/Store-Pinia-f7d336)](https://pinia.vuejs.org)
[![Unocss](https://img.shields.io/badge/CSS-Unocss-858585)](https://uno.antfu.me/)
[![Build](https://github.com/yugasun/vue-template/actions/workflows/deploy.yml/badge.svg?branch=main)](https://github.com/yugasun/vue-template/actions/workflows/deploy.yml)

Vue template for starter using Vue3 + TypeScript + Vite + Pinia + Unocss 🚀

## Feature

- [x] [Vue3.0](https://vuejs.org/)
- [x] [Vue Router](https://github.com/vuejs/router)
- [x] [TypeScript](https://www.typescriptlang.org/)
- [x] [Vite](https://vitejs.dev/) Next Generation Frontend Tooling
- [x] [Vue DevTools](https://devtools-next.vuejs.org) Vue DevTools - Unleash Vue Developer Experience
- [x] [vite-plugin-pwa](https://github.com/antfu/vite-plugin-pwa) Zero-config PWA for Vite
- [x] [Pinia](https://pinia.vuejs.org/) The Vue Store that you will enjoy using
- [x] ⚙️ [Vitest](https://github.com/vitest-dev/vitest) Unit Testing with Vitest
- [x] 🎉 [Element Plus](https://github.com/element-plus/element-plus) A Vue.js 3 UI Library made by Element team
- [x] 🌈 [Ant Design Vue](https://github.com/vueComponent/ant-design-vue) An enterprise-class UI components based on Ant Design and Vue. 🐜
- [x] [vueuse](https://github.com/vueuse/vueuse) Collection of essential Vue Composition Utilities for Vue 2 and 3
- [x] [axios](https://github.com/axios/axios) Promise based HTTP client for the browser and node.js
- [x] 🎨 [UnoCSS](https://github.com/antfu/unocss) - the instant on-demand atomic CSS engine
- [x] 😃 [Use icons from any icon sets with classes](https://github.com/antfu/unocss/tree/main/packages/preset-icons)
- [x] 🌍 [I18n ready](https://vue-i18n.intlify.dev/) Vue I18n Internationalization plugin for Vue.js
- [x] [msw](https://mswjs.io/docs/) Seamless REST/GraphQL API mocking library for browser and Node.js.
- [x] [ESLint](https://eslint.org/)
- [x] [Prettier](https://prettier.io/)
- [x] [Airbnb Style Guide](https://github.com/airbnb/javascript)
- [x] [Commitlint](https://github.com/conventional-changelog/commitlint) Lint commit messages
- [x] [Commitizen](https://github.com/commitizen/cz-cli) The commitizen command line utility.

## Start

```bash
# 0. Clone project
git clone https://github.com/yugasun/vue-ts-starter

# 1. Install dependencies
pnpm install

# 2. Start develop server
pnpm dev

# 3. Build
pnpm build
```

## Customize

If you want to use Ant Design Vue, just checkout the branch `antd`.

```bash
git clone --branch antd https://github.com/yugasun/vue-ts-starter
```

If you don't need any UI components, just clone or checkout the branch `simple`.

```bash
git clone --branch simple https://github.com/yugasun/vue-ts-starter
```

## Recommended IDE Setup

- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar)

## License

[MIT @yugasun](./LICENSE)