https://github.com/zhongantech/zarm-vue

zarm in Vue.js
https://github.com/zhongantech/zarm-vue

vue zarm zarm-vue

Last synced: 4 days ago
JSON representation

zarm in Vue.js

• Host: GitHub
• URL: https://github.com/zhongantech/zarm-vue
• Owner: ZhongAnTech
• License: mit
• Created: 2017-08-20T12:42:17.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2022-12-10T16:53:42.000Z (almost 2 years ago)
• Last Synced: 2024-11-09T06:19:15.210Z (6 days ago)
• Topics: vue, zarm, zarm-vue
• Language: JavaScript
• Homepage: https://vue.zarm.design/#/documents/quick-start
• Size: 26.9 MB
• Stars: 128
• Watchers: 13
• Forks: 47
• Open Issues: 23
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


  

    

  



Zarm Vue




[![Build Status](https://www.travis-ci.org/ZhongAnTech/zarm-vue.svg?branch=master)](https://www.travis-ci.org/ZhongAnTech/zarm-vue)

[![Coverage Status](https://img.shields.io/coveralls/ZhongAnTech/zarm-vue/master.svg)](https://coveralls.io/github/ZhongAnTech/zarm-vue?branch=master)

[![Netlify Status](https://api.netlify.com/api/v1/badges/db2483a3-5b1a-4e48-8e37-9cc56332be2d/deploy-status)](https://app.netlify.com/sites/zarm-vue/deploys)

[![npm package](https://img.shields.io/npm/v/zarm-vue)](https://www.npmjs.org/package/zarm-vue)

[![NPM downloads](https://img.shields.io/npm/dt/zarm-vue)](https://img.shields.io/npm/dt/zarm-vue)

![JS gzip size](http://img.badgesize.io/https://unpkg.com/zarm-vue@latest/zarm-vue.umd.js?compression=gzip&label=gzip%20size:%20JS)

![CSS gzip size](http://img.badgesize.io/https://unpkg.com/zarm-vue@latest/zarm-vue.default.css?compression=gzip&label=gzip%20size:%20CSS)





### 版本

- Beta版：[![npm package](https://img.shields.io/npm/v/zarm-vue)](https://www.npmjs.org/package/zarm-vue)

- Alpha版：[[ZarmVue-Next]](https://zarm-vue.gitee.io/zarm-vue-next/#/documents/quick-start)

### Install 安装

```bash

npm install zarm-vue --save

```

### Import 引入

- 全组件引入

```javascript

import Vue from 'vue';

import zarmVue from 'zarm-vue';

// 引入全局样式

import 'zarm-vue/zarm-vue.default.css';

Vue.use(zarmVue);

```

- 按需引入

借助`ElementUI`提供的[babel-plugin-component](https://github.com/ElementUI/babel-plugin-component)，我们可以只引入需要的组件，以达到减小项目体积的目的。

首先，安装 babel-plugin-component：

```bash

npm install babel-plugin-component -D

```

然后，将 .babelrc 添加：

```javascript

{

  // ...

  "plugins": [["component", {

      "libraryName": "zarm-vue",

      "styleLibraryName": "theme"

    }

  ]]

}

```

接下来，如果你只希望引入部分组件，比如 Button 和 Alert，那么需要在 main.js 中写入以下内容：

```javascript

import { Button, Alert } from 'zarm-vue'

Vue.use(Button)

Vue.use(Alert)

```

- 也可以通过cdn引入umd模块

```html

  

  

  

  

  

  


      普通按钮

  


  new Vue({

    el: '#app'

  })

```