zarm-vue

Zarm Vue

JS gzip size
CSS gzip size

版本

Beta版：

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>

Dependencies

autosize: ^4.0.0 better-scroll: 1.12.0 dayjs: ^1.7.7 popper.js: ^1.15.0

Dependencies

@babel/cli: ^7.4.4 @babel/core: ^7.4.5 @babel/node: ^7.4.5 @babel/plugin-syntax-dynamic-import: ^7.2.0 @babel/plugin-transform-modules-commonjs: ^7.0.0 @babel/plugin-transform-object-assign: ^7.2.0 @babel/plugin-transform-runtime: ^7.4.4 @babel/preset-env: ^7.4.5 @babel/runtime: ^7.4.5 @babel/runtime-corejs2: ^7.4.2 @commitlint/cli: ^6.2.0 @commitlint/config-conventional: ^6.1.3 @vue/babel-preset-jsx: ^1.0.0 @vue/server-test-utils: ^1.0.3 @vue/test-utils: ^1.0.3 autoprefixer: ^7.1.2 axios: ^0.18.0 babel-core: ^7.0.0-bridge.0 babel-eslint: ^10.0.1 babel-helper-vue-jsx-merge-props: ^2.0.3 babel-jest: ^23.4.2 babel-loader: ^8.0.5 babel-plugin-dynamic-import-node: ^2.3.0 babel-plugin-import: ^1.11.0 babel-plugin-syntax-jsx: ^6.18.0 babel-plugin-transform-vue-jsx: ^3.7.0 chalk: ^2.4.2 connect-history-api-fallback: ^1.3.0 conventional-changelog-cli: ^1.3.22 copy-webpack-plugin: ^4.0.1 core-js: ^3.0.1 coveralls: ^2.13.1 cross-env: ^5.0.1 cryptiles: ^4.1.2 css-loader: ^0.28.0 element-ui: ^2.4.9 eslint: ^4.19.1 eslint-config-za: ^1.0.0 eslint-friendly-formatter: ^3.0.0 eslint-import-resolver-webpack: ^0.8.1 eslint-loader: ^2.0.0 eslint-plugin-html: ^3.2.2 eslint-plugin-import: ^2.2.0 fetch: ^1.1.0 file-loader: ^1.1.11 friendly-errors-webpack-plugin: ^1.1.3 gh-pages: ^2.0.1 github-markdown-css: ^2.10.0 glob: ^7.1.2 handlebars: ^4.0.11 html-webpack-plugin: ^3.2.0 http-proxy-middleware: ^0.17.3 husky: ^0.14.3 jest: ^23.4.2 jest-serializer-vue: ^2.0.2 js-yaml: ^3.13.1 lodash: ^4.17.15 lodash-es: ^4.17.15 lodash.merge: ^4.6.2 lodash.mergewith: ^4.6.2 marked: ^0.7.0 merge: ^1.2.1 mini-css-extract-plugin: ^0.4.0 normalize.css: ^8.0.0 opn: ^5.1.0 optimize-css-assets-webpack-plugin: ^4.0.2 postcss-loader: ^2.0.6 rimraf: ^2.6.1 sass: ^1.22.9 sass-loader: ^7.0.1 shelljs: ^0.7.6 stylelint: ^7.12.0 stylelint-config-standard: ^16.0.0 tunnel-agent: ^0.6.0 url-loader: ^1.0.1 vue: ^2.6.10 vue-jest: ^3.0.0 vue-loader: ^15.0.7 vue-router: ^2.6.0 vue-style-loader: ^4.1.0 vue-template-compiler: ^2.6.10 vuex: ^3.0.1 webpack: ^4.10.1 webpack-bundle-analyzer: ^3.3.2 webpack-cli: ^3.3.5 webpack-dev-middleware: ^3.1.3 webpack-dev-server: ^3.2.1 webpack-hot-middleware: ^2.18.0 webpack-merge: ^4.2.1 zarm-vue-loader: ^3.0.0