SeanGG / zarm-vue

zarm in Vue.js

zarm-vue UI

使用说明文档

zarm-vue-doc

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 和 Select，那么需要在 main.js 中写入以下内容：

import { Button, Alert } from 'zarm-vue'
Vue.use(Button)
Vue.use(Alert)

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

<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>

Usage 使用：

new Vue({
  el: '#app',
  template: '<za-button theme="primary">普通按钮</za-button>',
  components: { zaButton },
});

Theme 自定义主题

clone本仓库后先安装依赖，然后通过修改 styles/variables.scss 文件重写sass变量。运行下面命令生成新样式

npm run build:theme

新生成的样式文件： lib/zarm-vue.default.css

License

MIT