# 快速开始

----

<!-- 
## 基于模板工程开发

> `Vue.js` 提供一个官方命令行工具 `vue-cli`，可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目。

```bash
> npm i -g vue-cli
> mkdir my-project && cd my-project
> vue init webpack
> npm i && npm i element-ui
```

## 标准开发

实际项目中，往往会使用 `webpack`，`rollup` 或者 `gulp` 的工作流，大多可以做到按需加载页面用到的组件，所以不推荐直接使用 `<script>` 标签全局引入的方式使用。 -->

### 全局组件使用

可以在项目的入口文件中引入所有组件或所需组件

在 main.js 中写入以下内容：
```js
import YlUI from 'yl-ui' // 引入组件库
import 'ylui/packages/theme-default/lib/index.css' // 引入样式库
 
Vue.use(YlUI);
```

### 单个组件按需使用

可以局部注册所需的组件，适用于与其他框架组合使用的场景

```js
import { YlButton } from 'yl-ui'

export default {
  components: {
    YlButton
  }
}
```

在模板中，用 `<yl-button></yl-button>` 自定义标签的方式使用组件

```html
<template>
  <div>
    <yl-button>这是一个按钮</yl-button>
  </div>
</template>
```

## 自定义主题

`Yl-UI` 各个组件的样式变量都存放在 `yl-ui/packages/theme-defualt/common/var.css` 文件中。用户可根据实际需要，自定义组件的样式