12cm-ui-design-plugin - npm explorer

Quick Start

$3

- Node.js 버전 20 이상.
- Vue 버전 3.5 이상.

``sh [npm] $ npm i 12cm-ui-design-plugin`

`$3`

js [main.ts]
import { createApp } from 'vue'
import uiDesignPlugin from '12cm-ui-design-plugin'
import '12cm-ui-design-plugin/style.css'
const app = createApp(App)
app.use(uiDesignPlugin)

`Introduction`

`$3`


UI 컴포넌트는 UI를 구성하는 최소 단위로, 버튼, 필드, 체크박스 등과 같이 사용자가 직접적으로 상호작용하는 요소입니다.
이 컴포넌트들은 UI 디자인의 중요한 구성 요소로, 사용자에게 정보를 제공하거나, 행동을 유도하거나, 사용자 입력을 받는 등의 역할을 수행합니다.
$3
- 사용자 인터페이스의 기본 요소
버튼, 입력 필드, 슬라이더, 드롭다운 메뉴 등은 UI의 기본 구성 요소로서 사용자에게 정보를 보여주거나, 사용자의 입력을 받거나, 특정 동작을 수행하는 데 사용됩니다.
- 재사용 가능성
UI 컴포넌트는 재사용이 가능한 형태로 설계되어 여러 화면이나 웹페이지에서 동일한 컴포넌트를 반복적으로 사용할 수 있습니다.
- 시각적 구성
UI 컴포넌트는 디자인적으로 사용자가 쉽게 이해하고 사용할 수 있도록 시각적으로 구성됩니다. 색상, 글꼴, 아이콘 등의 시각적 요소들을 조합하여 컴포넌트의 기능과 목적을 명확히 전달합니다.
- 동작 및 상태
UI 컴포넌트는 사용자에게 특정 행동을 유도하거나, 사용자의 입력을 받거나, 현재 상태를 나타내기 위해 다양한 동작과 상태를 갖습니다. 예를 들어, 버튼을 클릭했을 때, 입력 필드의 상태가 변경될 때, 특정 아이콘이 표시될 때 등 다양한 방식으로 사용자와 상호작용합니다.
- 일관성
서비스 전체에서 UI 컴포넌트를 일관되게 사용함으로써 사용자가 컴포넌트가 어떻게 동작하는지 쉽게 예측할 수 있도록 돕습니다.
$3
UI 컴포넌트는 사용자가 제품이나 서비스를 사용할 때 가장 먼저 접하는 요소이며, 사용자의 경험에 직접적인 영향을 미칩니다. 따라서 UI 컴포넌트를 잘 디자인하고 개발하는 것은 사용자 경험을 향상시키고, 서비스의 성공을 위한 중요한 요소입니다.
$3

원투씨엠의 UI 컴포넌트는 버튼, 필드, 체크박스 등의 최소 단위 뿐만 아니라 커머스 영역에서 자주, 반복적으로 사용되는 영역을 하나의 컴포넌트로 구성되어 있습니다.
헤드리스를 기반으로 하여 배너, 카테고리, 상품목록, 검색, 기획전, 게시판 등 여러 화면에 반복적으로 사용되는 영역을 컴포넌트 형태로 구성하여 빠르고 효율적으로 화면 구성이 가능하며 백앤드와의 연결, 각종 옵션 등을 자유롭게 구성할 수 있습니다.
[//]: # ()
[//]: # (# 12cm-ui-plugin)
[//]: # ()
[//]: # (This template should help get you started developing with Vue 3 in Vite.)
[//]: # ()
[//]: # (## Recommended IDE Setup)
[//]: # ()
[//]: # ([VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).)

[//]: # () [//]: # (## Type Support for.vue Imports in TS)

[//]: # () [//]: # (TypeScript cannot handle type information for.vue imports by default, so we replace the tsc CLI with vue-tsc for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of .vue types.)

[//]: # () [//]: # (## Customize configuration)

[//]: # () [//]: # (See [Vite Configuration Reference](https://vite.dev/config/).)

[//]: # () [//]: # (## Project Setup)

[//]: # () [//]: # (`sh)

[//]: # (npm install)

[//]: # (`)

[//]: # () [//]: # (### Compile and Hot-Reload for Development)

[//]: # () [//]: # (`sh)

[//]: # (npm run dev)

[//]: # (`)

[//]: # () [//]: # (### Type-Check, Compile and Minify for Production)

[//]: # () [//]: # (`sh)

[//]: # (npm run build)

[//]: # (`)

[//]: # () [//]: # (### Lint with [ESLint](https://eslint.org/))

[//]: # () [//]: # (`sh)

[//]: # (npm run lint)

[//]: # (``)

Quick Start

$3

- Node.js 버전 20 이상.
- Vue 버전 3.5 이상.

``sh [npm] $ npm i 12cm-ui-design-plugin`

`$3`

js [main.ts]
import { createApp } from 'vue'
import uiDesignPlugin from '12cm-ui-design-plugin'
import '12cm-ui-design-plugin/style.css'
const app = createApp(App)
app.use(uiDesignPlugin)

`Introduction`

`$3`


UI 컴포넌트는 UI를 구성하는 최소 단위로, 버튼, 필드, 체크박스 등과 같이 사용자가 직접적으로 상호작용하는 요소입니다.
이 컴포넌트들은 UI 디자인의 중요한 구성 요소로, 사용자에게 정보를 제공하거나, 행동을 유도하거나, 사용자 입력을 받는 등의 역할을 수행합니다.
$3
- 사용자 인터페이스의 기본 요소
버튼, 입력 필드, 슬라이더, 드롭다운 메뉴 등은 UI의 기본 구성 요소로서 사용자에게 정보를 보여주거나, 사용자의 입력을 받거나, 특정 동작을 수행하는 데 사용됩니다.
- 재사용 가능성
UI 컴포넌트는 재사용이 가능한 형태로 설계되어 여러 화면이나 웹페이지에서 동일한 컴포넌트를 반복적으로 사용할 수 있습니다.
- 시각적 구성
UI 컴포넌트는 디자인적으로 사용자가 쉽게 이해하고 사용할 수 있도록 시각적으로 구성됩니다. 색상, 글꼴, 아이콘 등의 시각적 요소들을 조합하여 컴포넌트의 기능과 목적을 명확히 전달합니다.
- 동작 및 상태
UI 컴포넌트는 사용자에게 특정 행동을 유도하거나, 사용자의 입력을 받거나, 현재 상태를 나타내기 위해 다양한 동작과 상태를 갖습니다. 예를 들어, 버튼을 클릭했을 때, 입력 필드의 상태가 변경될 때, 특정 아이콘이 표시될 때 등 다양한 방식으로 사용자와 상호작용합니다.
- 일관성
서비스 전체에서 UI 컴포넌트를 일관되게 사용함으로써 사용자가 컴포넌트가 어떻게 동작하는지 쉽게 예측할 수 있도록 돕습니다.
$3
UI 컴포넌트는 사용자가 제품이나 서비스를 사용할 때 가장 먼저 접하는 요소이며, 사용자의 경험에 직접적인 영향을 미칩니다. 따라서 UI 컴포넌트를 잘 디자인하고 개발하는 것은 사용자 경험을 향상시키고, 서비스의 성공을 위한 중요한 요소입니다.
$3

원투씨엠의 UI 컴포넌트는 버튼, 필드, 체크박스 등의 최소 단위 뿐만 아니라 커머스 영역에서 자주, 반복적으로 사용되는 영역을 하나의 컴포넌트로 구성되어 있습니다.
헤드리스를 기반으로 하여 배너, 카테고리, 상품목록, 검색, 기획전, 게시판 등 여러 화면에 반복적으로 사용되는 영역을 컴포넌트 형태로 구성하여 빠르고 효율적으로 화면 구성이 가능하며 백앤드와의 연결, 각종 옵션 등을 자유롭게 구성할 수 있습니다.
[//]: # ()
[//]: # (# 12cm-ui-plugin)
[//]: # ()
[//]: # (This template should help get you started developing with Vue 3 in Vite.)
[//]: # ()
[//]: # (## Recommended IDE Setup)
[//]: # ()
[//]: # ([VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).)

[//]: # () [//]: # (## Type Support for.vue Imports in TS)

[//]: # () [//]: # (## Customize configuration)

[//]: # () [//]: # (See [Vite Configuration Reference](https://vite.dev/config/).)

[//]: # () [//]: # (## Project Setup)

[//]: # () [//]: # (`sh)

[//]: # (npm install)

[//]: # (`)

[//]: # () [//]: # (### Compile and Hot-Reload for Development)

[//]: # () [//]: # (`sh)

[//]: # (npm run dev)

[//]: # (`)

[//]: # () [//]: # (### Type-Check, Compile and Minify for Production)

[//]: # () [//]: # (`sh)

[//]: # (npm run build)

[//]: # (`)

[//]: # () [//]: # (### Lint with [ESLint](https://eslint.org/))

[//]: # () [//]: # (`sh)

[//]: # (npm run lint)

[//]: # (``)