element-theme-zero

element component chalk theme.

Installation

npm i element-theme-zero -S

Usage

Use Sass import

@import 'element-theme-zero';

Or Use webpack

import 'element-theme-zero';

Or

<link
  rel="stylesheet"
  href="path/to/node_modules/element-theme-zero/lib/index.css"
/>

Import on demand

import 'element-theme-zero/lib/input.css';
import 'element-theme-zero/lib/select.css';

// ...

引入 Element

你可以引入整个 Element，或是根据需要仅引入部分组件。我们先介绍如何引入完整的 Element。

完整引入

在 main.js 中写入以下内容：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-theme-zero/lib/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App),
});

以上代码便完成了 Element 的引入。需要注意的是，element-theme-zero 样式文件需要单独引入。

按需引入

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

首先，安装 babel-plugin-component：

npm install babel-plugin-component -D

然后，将 babel.config.js 中 plugins 里加入：

{
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "~node_modules/element-theme-zero/lib"
      }
    ]
  ]
}