Vue.js component UI library using Tailwindcss by Chec

View the Storybook 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

yarn add github:chec/ui-library

with npm

npm install github:chec/ui-library

Setting up Tailwindcss

1. 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');

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.

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

组件本地开发

1. 运行 yarn storybook:serve 启动 storybook
2. 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进行清除