快速开始

本节介绍如何在项目中使用 Vue EP Toolkit。

用法

完整引入

如果你对打包后的文件大小不是很在乎，那么使用完整导入会更方便。

import { createApp } from "vue"
import VueEpToolkit from "vue-ep-toolkit"
import "vue-ep-toolkit/dist/index.css"
import App from "./App.vue"

const app = createApp(App)
app.use(VueEpToolkit)
app.mount("#app")

Volar 支持

如果您使用 Volar，请在 tsconfig.json 中通过 compilerOptions.types 指定全局组件类型。

{
  "compilerOptions": {
    // ...
    "types": ["vue-ep-toolkit"]
  }
}

按需导入

您需要使用额外的插件来导入要使用的组件。

自动导入 推荐

首先你需要安装 unplugin-vue-components 和 unplugin-auto-import 这两款插件。

npm

$ npm install -D unplugin-vue-components unplugin-auto-import

yarn

$ yarn add -D unplugin-vue-components unplugin-auto-import

pnpm

$ pnpm install -D unplugin-vue-components unplugin-auto-import

然后把下列代码插入到你的 Vite 或 Webpack 的配置文件中。

Vite

import { defineConfig } from "vite"
import AutoImport from "unplugin-auto-import/vite"
import Components from "unplugin-vue-components/vite"
import { VueEpToolkitResolver } from "vue-ep-toolkit"

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [VueEpToolkitResolver()]
    }),
    Components({
      resolvers: [VueEpToolkitResolver()]
    })
  ]
})

Webpack

const AutoImport = require("unplugin-auto-import/webpack")
const Components = require("unplugin-vue-components/webpack")
const { VueEpToolkitResolver } = require("vue-ep-toolkit")

module.exports = {
  // ...
  plugins: [
    AutoImport({
      resolvers: [VueEpToolkitResolver()]
    }),
    Components({
      resolvers: [VueEpToolkitResolver()]
    })
  ]
}

想了解更多打包工具（Rollup、Vue CLI）的配置，请参考 unplugin-vue-components 和 unplugin-auto-import。

手动导入

Vue EP Toolkit 提供了基于 ES Module 开箱即用的 Tree Shaking 功能。

<template>
  <ep-button>我是 EpButton</e-button>
</template>

<script>
import { EpButton } from "vue-ep-toolkit"

export default {
  components: { EpButton }
}
</script>

全局配置

在引入 Vue EP Toolkit 时，可以传入一个包含 size 和 zIndex 属性的全局配置对象。 size 用于设置表单组件的默认尺寸，zIndex 用于设置弹出组件的层级，zIndex 的默认值为 2000。

完整引入：

import { createApp } from "vue"
import VueEpToolkit from "vue-ep-toolkit"
import App from "./App.vue"

const app = createApp(App)
app.use(VueEpToolkit, { size: "small", zIndex: 3000 })

按需引入：

<template>
  <el-config-provider :size="size" :z-index="zIndex">
    <app />
  </el-config-provider>
</template>

<script>
import { defineComponent } from "vue"
import { ElConfigProvider } from "element-plus"

export default defineComponent({
  components: {
    ElConfigProvider
  },
  setup() {
    return {
      zIndex: 3000,
      size: "small"
    }
  }
})
</script>

开始使用

您可以从现在起启动您的项目。对于各个组件的使用方法，请参阅各个组件的文档。