Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ryan-ahn/npm-vue3-starter
Vue3 프로젝트 시작을 위한 NPM 패키지
https://github.com/ryan-ahn/npm-vue3-starter
pinia vue3
Last synced: 3 days ago
JSON representation
Vue3 프로젝트 시작을 위한 NPM 패키지
- Host: GitHub
- URL: https://github.com/ryan-ahn/npm-vue3-starter
- Owner: ryan-ahn
- License: mit
- Created: 2023-06-14T01:19:46.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-03-06T01:04:51.000Z (11 months ago)
- Last Synced: 2024-11-21T11:12:40.918Z (2 months ago)
- Topics: pinia, vue3
- Language: JavaScript
- Homepage:
- Size: 722 KB
- Stars: 1
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
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
```shell
npx vue3-starter my-project
cd my-project
```
### 2) Run development server
```shell
npm run dev
```
## Using with Vue3 Script Setup
```vue
// use function
const function = () => {console.log('Hello World!')}
// use props
const props = defineProps({title})
```
## Using with Store
```vue
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()
```
## Using Mixin
```scss
.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)
}
```