Co-authored-by: 三咲智子 <sxzz@sxzz.moe>
4.8 KiB
title | lang |
---|---|
Quick Start | en-US |
Quick Start
This section describes how to use Element Plus in your project.
Usage
Full Import
If you don’t care about the bundle size so much, it’s more convenient to use full import.
// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')
Volar support
If you use volar, please add the global component type definition to compilerOptions.types
in tsconfig.json
.
// tsconfig.json
{
"compilerOptions": {
// ...
"types": ["element-plus/global"]
}
}
On-demand Import
You need to use an additional plugin to import components you used.
Auto import Recommend
First you need to install unplugin-vue-components
and unplugin-auto-import
.
npm install -D unplugin-vue-components unplugin-auto-import
Then add the code below into your Vite
or Webpack
config file.
Vite
// vite.config.ts
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
export default {
plugins: [
// ...
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
}
Webpack
// webpack.config.js
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
module.exports = {
// ...
plugins: [
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
}
For more bundlers (Rollup, Vue CLI) and configs please reference unplugin-vue-components and unplugin-auto-import.
Manually import
Element Plus provides out of box Tree Shaking functionalities based on ES Module.
But you need install unplugin-element-plus for style import. And refer to the docs for how to configure it.
App.vue
<template>
<el-button>I am ElButton</el-button>
</template>
<script>
import { ElButton } from 'element-plus'
export default {
components: { ElButton },
}
</script>
// vite.config.ts
import ElementPlus from 'unplugin-element-plus/vite'
export default {
plugins: [ElementPlus()],
}
:::warning
You need to manually import the styles if you're using unplugin-element-plus
and only used the component API.
Example:
import 'element-plus/es/components/message/style/css'
import { ElMessage } from 'element-plus'
:::
Starter Template
Vue CLI
We prepared a plugin Element Plus VueCLI plugin. For vue-cli, you can setup a project based on Element Plus easily.
Using Starter Kit
We provide a general Project Template, also a Vite Template. For Laravel users we have a Laravel Template.
Global Configuration
When registering Element Plus, you can pass a global config object with size
and
zIndex
to set the default size
for form components, and zIndex
for
popup components, the default value for zIndex
is 2000
.
Full import:
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import App from './App.vue'
const app = createApp(App)
app.use(ElementPlus, { size: 'small', zIndex: 3000 })
On-demand:
import { createApp } from 'vue'
import { ElButton } from 'element-plus'
import App from './App.vue'
const app = createApp(App)
app.config.globalProperties.$ELEMENT = {
// options
}
app.use(ElButton)
Using Nuxt.js
We can also use Nuxt.js:
Let's Get Started
You can bootstrap your project from now on. For each components usage, please refer to the individual component documentation.