element-ui-for-gov

安装

npm install element-ui-for-gov -S

快速开始

import Vue from 'vue'
import ElementUIForGov from 'element-ui-for-gov'

Vue.use(ElementUIForGov)

// or
import {
  Select,
  Button
  // ...
} from 'element-ui-for-gov'

Vue.component(Select.name, Select)
Vue.component(Button.name, Button)

完整引入

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

import Vue from 'vue';
import ElementUIForGov from 'element-ui-for-gov';
import 'element-ui-for-gov/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUIForGov);

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

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

按需引入

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

首先，安装 babel-plugin-component：

npm install babel-plugin-component -D

然后，将 .babelrc 修改为：

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui-for-gov",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

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

import Vue from 'vue';
import { Button, Select } from 'element-ui-for-gov';
import 'element-ui-for-gov/lib/theme-chalk/button.css';
import 'element-ui-for-gov/lib/theme-chalk/select.css';
import App from './App.vue';

Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为
 * Vue.use(Button)
 * Vue.use(Select)
 */

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

开始使用

至此，一个基于 Vue 和 Element-ui-for-gov 的开发环境已经搭建完毕，现在就可以编写代码了。各个组件的使用方法请参阅它们各自的文档。

浏览器支持

现代浏览器和ie 10+.

组件开发

重要文件目录说明

project
│   ...   
│
└───packages
│   │   button // 组件
│   │   input
│   │   ...
│   │
│   └───theme-chalk // 组件样式
│       │   
│       └───src
│           │    button.scss
│           │    input.scss
│           │    ...
│         
└───examples
    │   ...
    │   
    └───docs
        │ 
        └───zh-CN
            │    button.md // 组件说明文档
            │    input.md
            │    ...

开发环境搭建

首先你需要 Node.js 4+，yarn 和 npm 3+。注意：我们使用 yarn 进行依赖版本的锁定，所以请不要使用 npm install 安装依赖。

安装依赖

npm run bootstrap

启动

npm run dev

# open http://localhost:8085

提示：可以运行 npm run dev:play，修改 examples/play/index.vue 文件，调用你修改后的组件，仍然访问 http://localhost:8085，查看修改效果，更快更方便。

新建组件

• 通过 npm run new newComponentName 自动创建组件目录结构，包含入口文件、样式文件、文档

打包

npm run dist

更新至element 2021/11/18 Form: validate method reject error info (#21374) Select: fix keydown event when composition (#21336) Table: fix resizeObserver loop limit exceeded (#21255) Descriptions: fix label slot bug (#21462) Table: fix toggleAllSelection bug when table is empty (#21456) Button: fix disabled priority (#21375) Table: optimize performance (#21330)