Welchis NPM | npm.io

Welchis

강남언니 백오피스의 디자인 시스템입니다.
Welchis 문서

프로젝트에 Welchis 적용하기

1. 패키지 설치

$ npm install welchis

2. Welchis를 플러그인으로 적용

Vue 프로젝트의 entry 파일을 엽니다. (보통 src/main.js)

파일 상단에 아래 스크립트를 넣습니다.

// main.js
import Vue from "vue";

// ...
import Welchis, { ToastContainer, DialogContainer } from "welchis";

(선택사항) 타이포그라피 스타일을 불러옵니다. (타이포그라피 css 클래스를 사용하고자 할 경우)
```
import "welchis/src/style/typography.scss";
```
플러그인을 등록합니다.
```
Vue.use(Welchis);
```

다이얼로그, 모달, 토스트 컴포넌트 사용을 위해 루트에 다음 컴포넌트를 마운트 시킵니다.

```js
new Vue({
  router,
  store,
  components: {
    App,
    DialogContainer, // 추가
    ToastContainer // 추가
  },
  template: `
  <div>
    <ToastContainer /> // 추가
    <DialogContainer /> // 추가
    <App/>
  </div>`
}).$mount("#app");
```

Welchis 문서 작성 방법

storybook을 사용하여 문서를 작성합니다.
Welchis 문서

문서 작성 규칙

스토리 파일명은 0000_name.js로 짓습니다. (사이드바에 나오는 순서를 제어하기 위해서)
파일명의 앞부분인 네 자리 숫자는
- 앞 두 자리는 컴포넌트 종류
- 뒤 두 자리는 순서를 결정합니다.
name에는 컴포넌트 이름을 적습니다.

참고 사이트

Stack

Vue
Jest

프로젝트 실행 방법

$ npm install 
$ npm run dev

빌드/배포 방법

Welchis 프로젝트 빌드/배포 방법

npm에 배포합니다. 1. npm adduser 로 로그인 합니다. 2. npm publish 로 배포합니다.

Storybook 업데이트 방법

아래 명령어를 실행하면, .out 폴더에 빌드 된 파일이 들어갑니다.

$ npm run build

Icon 업데이트 방법

새로운 Icon을 추가하는 경우 아래 과정을 통해 Icon을 업데이트 할 수 있습니다. 1. 모든 아이콘을 압축한 ic.zip 파일을 루트 경로에 둡니다. 1. 주의: ic.zip에는 최상위 폴더가 없어야 합니다. 즉 ic.zip 파일을 열었을 때 ic폴더가 있으면 안됩니다. 2. npm run icon 스크립트를 실행합니다. 3. /src/components/Icon.vue 파일이 새로 생성됩니다. 4. /src/stories/0120_icon.js 파일이 새로 생성됩니다.