0.0.3 • Published 1 year ago

@oetsky/pm-ui v0.0.3

Weekly downloads
-
License
BSD-3-Clause
Repository
-
Last release
1 year ago

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');
  1. 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进行清除 7.