vue3-starter
v1.0.7
Published
Start a Vue3 Pinia Typescript project in few second!
Downloads
6
Maintainers
Readme
Ryan's Vue3 Awesome Starter
Features
- [x] 📦 Typed Programming (Typescript)
- [x] 📚 Composition API & Setup (Vue3)
- [x] 🛹 Simple Store (Pinia)
- [x] 🧵 Built-in Component & Layout
- [x] 📙 Use Stric Codebase (ESLint)
- [x] 📘 Use Stric Style (StyleLint)
- [x] ✨ Setting Reset Style
- [x] ⚡️ Setting Mixin Style
- [x] 📍 Absolute path
- [ ] 📱 Check Device
- [ ] 🗂️ SSR & Page SEO
- [ ] 🪄 Theme Mode
Frameworks
- Core : Vue3
- Store : Pinia
Code Pattern
- Static(public)
- Root(src)
- ⎣ api - rest api
- ⎣ assets - static resource
- ⎣ components - atomic stateless components
- ⎣ containers - stateful components
- ⎣ interface - interfaces
- ⎣ layouts - layouts
- ⎣ router - routers
- ⎣ store - pinia store
- ⎣ styles - style set
- ⎣ utils - hooks, utils
- ⎣ views - pages
Getting Started
1) Installation
npx vue3-starter my-project
cd my-project
2) Run development server
npm run dev
Using with Vue3 Script Setup
<script setup lang="ts">
// use function
const function = () => {console.log('Hello World!')}
// use props
const props = defineProps({title})
</script>
Using with Store
<script setup lang="ts">
import { storeToRefs } from 'pinia';
import useDataStore from '@store/useDataStore';
// use store
const store = useDataStore();
// use store state
const { data } = storeToRefs(store);
// use store function
store.getData()
</script>
Using Mixin
.app {
// flex set(justify-content, align-items, flex-direction)
@include flexSet('center', 'center', 'row')
// box set(width, height, border-radius)
@include boxSet(00px, 00px, 00px)
// color set(color, background-color)
@include colorSet($white, $black)
// background set(url, object-fit)
@include backgroundSet('url', 00px)
// font set(font-size, font-weight, line-height)
@include fontSet(00px, 000, 00px);
// ellipsis set(line, line-height)
@include ellipsisSet(0, 00px)
// shadow set(length, length, blur, color, opacity)
@include shadowSet(0, 0, 0, $white, 0.1)
}