zanm
TypeScript icon, indicating that this package has built-in type declarations

0.1.4 • Public • Published

A Mobile UI Components built on Vue

npm version Build Status downloads JS Gzip Size CSS Gzip Size issue Coverage Status

🇨🇳 访问中文版


Features

Install

NPM

npm i zanm -S

YARN

yarn add zanm

CDN

<!-- import style -->
<link rel="stylesheet" href="https://unpkg.com/zanm/lib/zanm-css/index.css" />
 
<!-- import script -->
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script src="https://unpkg.com/zanm/lib/zanm.min.js"></script>

Quickstart

1. Use babel-plugin-import (Recommended)

# Install babel-plugin-import 
npm i babel-plugin-import -D
// set babel config in .babelrc or babel-loader
// Note: Don't set libraryDirectory if you are using webpack 1.
{
  "plugins": [
    ["import", {
      "libraryName": "zanm",
      "libraryDirectory": "es",
      "style": true
    }]
  ]
}

Then you can import components from zanm, equivalent to import manually below.

import { Button } from 'zanm';

If you are using TypeScript,please use ts-import-plugin instead, The following is a configuration using Vue's official scaffolding Vue Cli 3 to build:

# Install ts-import-plugin 
npm i ts-import-plugin -D
// vue.config.js
const tsImportPluginFactory = require('ts-import-plugin');
module.exports = {
  parallel: false,
  lintOnSave: false,
  configureWebpack: {
    module: {
      rules: [{
        test: /\.(jsx|tsx|js|ts)$/,
        loader: 'ts-loader',
        options: {
          happyPackMode: false,
          transpileOnly: true,
          getCustomTransformers: () => ({
            before: [tsImportPluginFactory({
              libraryName: 'zanm',
              libraryDirectory: 'es',
              style: true
            })]
          }),
          compilerOptions: {
            module: 'es2015'
          }
        },
      }]
    }
  },
  devServer: {
    disableHostCheck: true
  }
}

2. Manually import

import Button from 'zanm/lib/button';
import 'zanm/lib/zanm-css/base.css';
import 'zanm/lib/zanm-css/button.css';

3. Import all components

import Vue from 'vue';
import Zanm from 'zanm';
import 'zanm/lib/zanm-css/index.css';
 
Vue.use(Zanm);

If you configured babel-plugin-import, you won't be allowed to import all components.

Contribution

Please make sure to read the Contributing Guide before making a pull request.

Browser Support

Modern browsers and Android 4.0+, iOS 6+.

Links

Preview

You can scan the following QR code to access the demo:

LICENSE

MIT

Package Sidebar

Install

npm i zanm

Weekly Downloads

1

Version

0.1.4

License

MIT

Unpacked Size

1.26 MB

Total Files

298

Last publish

Collaborators

  • fullbook