element-ui-for-gov/README.md

element-ui for gov

## 安装
```shell
npm install element-ui-for-gov -S
```

## 快速开始
``` javascript
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 中写入以下内容：

```javascript
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](https://github.com/QingWei-Li/babel-plugin-component)，我们可以只引入需要的组件，以达到减小项目体积的目的。

首先，安装 babel-plugin-component：

```bash
npm install babel-plugin-component -D
```

然后，将 .babelrc 修改为：

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

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

```javascript
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` 安装依赖。

#### 安装依赖

```shell
npm run bootstrap
```

#### 启动

```shell
npm run dev

# open http://localhost:8085
```

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

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

#### 打包

```shell
npm run dist
```

更新至element 2021/09/16