Wondering what’s next for npm?Check out our public roadmap! »

    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

    Install

    npm i zanm

    DownloadsWeekly Downloads

    7

    Version

    0.1.4

    License

    MIT

    Unpacked Size

    1.26 MB

    Total Files

    298

    Last publish

    Collaborators

    • avatar