zcg-vue-h5 v0.0.20

a JasonLiao project: zcg-vue-h5

自己纯手工打造的一些轮子:ferris_wheel:,一个vue的H5插件库, 按照375px宽度的UI图构建, 会转换为vw, 可按需引入,welcome npm install and happy hacking ~:relaxed:

install

$ npm install zcg-vue-h5 --save

import and use it

// main.js
import {
  JslAvatar,
  JslBtnScalableJump,
  JslButton,
  JslClose,
  JslGrid,
  JslGridItem,
  JslLoading,
  JslNavBar,
  JslNomoreTip,
  JslToast
} from 'jsl-vue-h5'
import 'jsl-vue-h5/dist/jsl-vue-h5.min.css'

Vue.use(JslAvatar)
Vue.use(JslBtnScalableJump)
Vue.use(JslButton)
Vue.use(JslClose)
Vue.use(JslGrid)
Vue.use(JslGridItem)
Vue.use(JslLoading)
Vue.use(JslNavBar)
Vue.use(JslNomoreTip)
Vue.use(JslToast)

// jsl-loading-demo.vue
<template>
 <div class="root">
   <jsl-loading />
 </div>
</template>

documentation

jsl-toast

this.$jsl.toast(text, position, duaration)

<template>
  <div class="toast-demo-root">
    <jsl-button
      class="toast-demo-btn"
      v-for="(item, index) in btnList"
      :text="item.position + ' ' + item.duartion + 'ms'"
      :key="index + 'toast-demo-item'"
      @click.native="$jsl.toast(item.position + ' ' + item.duartion + 'ms', item.position, item.duartion)"
    />
  </div>
</template>


<script type="text/ecmascript-6">

export default {
  data () {
    return {
      btnList: [
        {
          position: 'top',
          duartion: 3500
        },
        {
          position: 'middle',
          duartion: 2500
        },
        {
          position: 'bottom',
          duartion: 1500
        }
      ]
    }
  }
}
</script>

jsl-grid

API

demo code

<template>
 <div class="grid-demo-root">
    <jsl-grid
      class="grid"
      :row="3"
      :column="3"
    >
      <jsl-grid-item
        v-for="(item, index) in list9"
        :key="index + 'grid-demo-item-1'"
      >
        <div>{{ index }}</div>
      </jsl-grid-item>
    </jsl-grid>
    <jsl-grid
      class="grid"
    >
      <jsl-grid-item
        v-for="(item, index) in list20"
        :key="index + 'grid-demo-item-2'"
      >
        <div>{{ index }}</div>
      </jsl-grid-item>
    </jsl-grid>
 </div>
</template>


<script type="text/ecmascript-6">

export default {
  data () {
    return {
      list9: Array(9),
      list20: Array(20)
    }
  }
}
</script>

jsl-btn-scalable-jump

API

demo code

<template>
 <div class="btn-scalable-jump-demo-root">
   <jsl-btn-scalable-jump
    class="btn"
    v-for="(item, index) in btnList"
    :key="index + 'select'"
    :toPage="item.toPage"
    :query="item.query"
    :top="item.top"
    :text="'to'+ ' ' + item.toPage"
   />
 </div>
</template>

<script type="text/ecmascript-6">

export default {
  data () {
    return {
      btnList: [
        {
          top: 50,
          toPage: -1
        },
        {
          top: 250,
          toPage: 'grid-demo',
          query: {
            id: '123abc'
          }
        },
        {
          top: 450,
          toPage: 'button-demo'
        }
      ]
    }
  }
}
</script>

jsl-avatar

API

demo code

<template>
  <div class="avatar-demo-root">
    <jsl-avatar class="avatar" />
    <jsl-avatar class="avatar" size="55" />
  </div>
</template>

jsl-button

API

demo code

<template>
  <div class="button-demo-root">
    <jsl-button
      class="btn"
      text="button"
    />
    <jsl-button
      class="btn"
      color="red"
      bgColor="green"
    />
    <jsl-button
      class="btn"
      color="#000"
      bgColor="#f00"
      radius="10"
      height="37"
    />
  </div>
</template>

jsl-close

API

demo code

<template>
  <div class="close-demo-root">
    <jsl-close class="close" />
    <jsl-close
      class="close"
      circle
      size="55"
    />
  </div>
</template>

jsl-loading

API

demo code

demo code

<template>
 <div class="navbar-demo-root">
   <jsl-nav-bar/>
 </div>
</template>

jsl-nomore-tip

API

demo code

<template>
  <div class="nomore-tip-demo-root">
    <jsl-nomore-tip class="demo" />
    <jsl-nomore-tip
      class="demo"
      text="这是我的底线"
      lineWidth="100"
    />
  </div>
</template>

开发与发布的爬坑姿势

生产时入口文件 src/components/index.js

import 'styles/components/index'

import loadingComponent from './loading/loading'

export const JslLoading = {
  install: function (Vue) {
    if (typeof window !== 'undefined' && window.Vue) {
      Vue = window.Vue
    }
    Vue.component('JslLoading', loadingComponent)
  }
}

export default {
  JslLoading
}

webpack prod entry config

const entryConfig = {
  app: resolve('src/components/index.js')
}

webpack prod output config

const outputConfig = {
  path: resolve('dist'),
  publicPath: '',
  filename: 'jsl-vue-h5.min.js',
  library: 'JslVueH5',
  libraryTarget: 'umd',
  umdNamedDefine: true
}

webpack prod externals config

const externals = {
  vue: {
    root: 'Vue',
    commonjs: 'vue',
    commonjs2: 'vue',
    amd: 'vue'
  }
}

webpack prod plugin config

const prodPlugins = [
  new MiniCssExtractPlugin({
    filename: 'jsl-vue-h5.min.css'
  })
]

package.json配置如下

{
  "name": "jsl-vue-h5",
  "version": "0.0.8",
  "description": "some Vue.js components and plugins for mobile H5 development",
  "author": "8bulbs <atbulbs@gmail.com>",
  "private": false,
  "main": "dist/jsl-vue-h5.min.js",
    "repository": {
    "type": "git",
    "url": "git+https://github.com/8bulbs/jsl-vue-h5.git"
  },
  "files": [
    "dist",
    "src"
  ],
  "keywords": [
    "vue",
    "h5",
    "mobile",
    "wechat",
    "loading"
  ],
  "license": "MIT",
  "homepage": "https://github.com/8bulbs/jsl-vue-h5.git#readme",
  // "scripts": { ... },
  // "dependencies": { ... },
  // "devDependencies": { ... }
}

本地开发完成后

# 打包
$ npm run build
# 生成 .tgz 文件
$ npm pack

若npm源为淘宝镜像, 需要切换源为 https://registry.npmjs.org/

# 查看npm源
$ npm config list

# 若为淘宝镜像
$ npm config rm registry

需要先注册登录npm, 再发布

# 登录, 填写用户名, 密码, 邮箱
$ npm login

# 发布
$ npm publish

每次发布时, 需要使用新的版本号, 修改package.json里的version, 或者删除之前的版本号再发布

tip: webpack config

// dev config > module > rules
// rules: [
// ...
  {
    test: /\.css$/,
    use: [
      {
        loader: 'style-loader'
      },
      {
        loader: 'css-loader'
        // options: {
        //   modules: false
        // }
      }
    ]
  }
// ...
// ]