• Stars
    star
    128
  • Rank 281,044 (Top 6 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 7 years ago
  • Updated almost 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

zarm in Vue.js

Zarm Vue

Build Status Coverage Status Netlify Status npm package NPM downloads JS gzip size CSS gzip size License

版本

Install 安装

npm install zarm-vue --save

Import 引入

  • 全组件引入
import Vue from 'vue';
import zarmVue from 'zarm-vue';
// 引入全局样式
import 'zarm-vue/zarm-vue.default.css';
Vue.use(zarmVue);
  • 按需引入

借助ElementUI提供的babel-plugin-component,我们可以只引入需要的组件,以达到减小项目体积的目的。

首先,安装 babel-plugin-component:

npm install babel-plugin-component -D

然后,将 .babelrc 添加:

{
  // ...
  "plugins": [["component", {
      "libraryName": "zarm-vue",
      "styleLibraryName": "theme"
    }
  ]]
}

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

import { Button, Alert } from 'zarm-vue'
Vue.use(Button)
Vue.use(Alert)
  • 也可以通过cdn引入umd模块
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/zarm-vue@latest/zarm-vue.default.css">
  <script src="https://unpkg.com/vue@latest/dist/vue.min.js"></script>
  <script src="https://unpkg.com/zarm-vue@latest/zarm-vue.umd.js"></script>
</head>
<body>
  <div id="app">
      <za-button theme="primary">普通按钮</za-button>
  </div>
</body>
<script>
  new Vue({
    el: '#app'
  })
</script>
</html>