npm package: @oetsky/pm-ui
Description: [View the Storybook app](https://chec-ui.netlify.app/)
Author: Chec Platform Inc
Latest version: 0.0.3

# Vue.js component UI library using Tailwindcss by Chec

[View the Storybook app](https://chec-ui.netlify.app/)

## Installation & Usage

You can use either `yarn` or `npm` to install the `ui-library` and it's dependencies from this Github repo.

### with yarn
```sh
yarn add github:chec/ui-library
```

### with npm
```sh
npm install github:chec/ui-library
```

### Setting up Tailwindcss 

1. Create a [`tailwind.preview.js`](https://tailwindcss.com/docs/configuration/#app) file at the root of the app exporting the `ui-library`'s custom `tailwind.preview.js` from it.

```js
module.exports = require('@chec/ui-library/tailwind.config');
```

2. Inject the `ui-library`'s compiled css and Tailwind.css file which includes the @tailwind directives to include the `ui-library` configured Tailwindcss styles/utilities. 

```css
/*
ui-library.css compiled css
*/
@import '~@chec/ui-library/dist/ui-library.css';

/*
tailwind.css, uses the @tailwind directive to inject Tailwind's base, components, and utilities styles into your CSS: 
*/  
@import '~@chec/ui-library/src/assets/tailwind.css';
```

### Utilizing Sass mixins

You can import helpful sass mixins such as `aspect-ratio`.

```scss
/* mixins.scss */

@import '~@chec/ui-library/src/assets/mixins.scss';
```

Mixins
- aspect-ratio

    use-case:
    ```html
    <div class="image-container">

      <img src="chec.io/image.jpg" />

      <div v-else>
        <h6>
          No Image
        </h6>
      </div>

    </div>
    ```
    
    ```scss
    .image-container {

      /* tailwind @apply directive */
      @apply w-1/2 max-w-sm; 

      /* apply aspect-ratio mixin */
      @include aspect-ratio(16, 9); 

      /* style fall-back element */
      div {
        @apply bg-gray-300;
      }
    }
    ```

### Translating

We use the `vue-i18n` library for this. See `lang/*.js` for the dictionaries. See the dashboard repo's
`lang/README.md` for a detailed guide for using the library. TL;DRs:

* `<p>{{ $t('paginate.goToFirst') }}</p>` renders "Go to the first page"
* `this.$t(...)` from component instance methods

## Project setup

```
git clone https://github.com/chec/ui-library.git
```

```
cd ui-library
```

```
yarn install
```

### Start Storybook app on port 6006:
```
yarn storybook:serve
```

### Run the frontend app proper on port 8080:
```
yarn run serve
```

### Compiles and minifies for production (This is done continously)
```
yarn build-lib
```

### Lints and fixes files
```
yarn lint:Fix
```

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).

### 配置流水线
npm config set registry=https://packages.aliyun.com/61f3948c74c3f3b550740ebe/npm/npm-registry/

### 组件库使用
 由于pm-ui 发布在私有仓库中，需要配置nrm
nrm add yf http://10.33.22.19:8081/repository/npm-group/
nrm use yf
pnpm install pm-ui --save




// 可能无效
或者配置`.npmrc`文件，单独指定源地址

```
pm-ui:registry=http://10.33.22.19:8081/repository/npm-hosted/

```

### 发布

nrm add yf http://10.33.22.19:8081/repository/npm-hosted/
nrm use yf

npm login

输入账户/密码

npm publish


### 组件本地开发


1. 运行 `yarn storybook:serve` 启动 storybook
2. `yarn yalc-watch2` 监听组件的更新并进行构建打包
3. 

业务项目中
1. `pnpm install yalc -g`
2. `pnpm install pm-ui -S`
3. `yalc add pm-ui` 添加依赖
4. `yalc update pm-ui` 安装组件
5. `update` 后，`vue-cli-server` 无法自动重启，加载组件
6. 组件使用完后需要使用正式发布的组件 则`yalc remove –all`进行清除
7.