@oetsky/pm-ui NPM

Vue.js component UI library using Tailwindcss by Chec

Installation & Usage

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

with yarn

yarn add github:chec/ui-library

with npm

npm install github:chec/ui-library

Setting up Tailwindcss

Create a tailwind.preview.js file at the root of the app exporting the ui-library's custom tailwind.preview.js from it.

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

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.

/*
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.

/* mixins.scss */

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

Mixins

aspect-ratio

use-case:

<div class="image-container">

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

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

</div>

.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.

配置流水线

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

组件本地开发

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

业务项目中 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.