Skip to content

changqing91/zarm-vue

 
 

Repository files navigation

Zarm Vue

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

<script style="display:none;"></script>

版本

  • 稳定版:npm package

  • 开发版:npm package

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@1.1.2/zarm-vue.default.css">
  <script src="https://unpkg.com/vue@2.5.11/dist/vue.min.js"></script>
  <script src="https://unpkg.com/zarm-vue@1.1.2/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>

Theme 自定义主题

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

npm run build:theme

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

Packages

No packages published

Languages

  • JavaScript 64.1%
  • Vue 25.5%
  • CSS 9.9%
  • Other 0.5%