vue element plus 快速开始

简介: vue element plus 快速开始

本节将介绍如何在项目中使用 Element Plus。

用法#

完整引入#

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

// 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 支持#

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

// tsconfig.json
{
  "compilerOptions": {
    // ...
    "types": ["element-plus/global"]
  }
}

按需导入#

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

自动导入推荐#

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

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

然后把下列代码插入到你的 ViteWebpack 的配置文件中

Vite#
// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({
  // ...
  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()],
    }),
  ],
}

想了解更多打包 (Rollup, Vue CLI) 和配置工具,请参考 unplugin-vue-componentsunplugin-auto-import

Nuxt#

对于 Nuxt 用户,只需要安装 @element-plus/nuxt 即可。

npm install -D @element-plus/nuxt

然后将下面的代码写入你的配置文件.

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@element-plus/nuxt'],
})

配置文档参考 docs.

手动导入#

Element Plus 提供了基于 ES Module 的开箱即用的 Tree Shaking 功能。

但你需要安装 unplugin-element-plus 来导入样式。 配置文档参考 docs.

App.vue

<template>
  <el-button>我是 ElButton</el-button>
</template>
<script>
  import { ElButton } from 'element-plus'
  export default {
    components: { ElButton },
  }
</script>
// vite.config.ts
import { defineConfig } from 'vite'
import ElementPlus from 'unplugin-element-plus/vite'
export default defineConfig({
  // ...
  plugins: [ElementPlus()],
})

WARNING

如果使用 unplugin-element-plus 并且只使用组件 API,你需要手动导入样式。

Example:

import 'element-plus/es/components/message/style/css'
import { ElMessage } from 'element-plus'

快捷搭建项目模板#

我们提供了 Vite 模板

对于Nuxt 用户,我们有一个 Nuxt 模板

对于 Laravel 用户,我们也准备了Laravel 模板

全局配置#

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

完整引入:

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 })

按需引入:

<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>

使用 Nuxt.js#

我们也可以使用 Nuxt.js

开始使用#

现在你可以启动项目了。 对于每个组件的用法,请查阅对应的独立文档

相关文章
|
1天前
|
JavaScript 前端开发
vue(1),小白看完都会了
vue(1),小白看完都会了
|
1天前
|
JavaScript
Vue中避免滥用this去读取data中数据
Vue中避免滥用this去读取data中数据
|
1天前
|
JavaScript
vue中使用pinia及持久化
vue中使用pinia及持久化
4 0
|
1天前
|
JavaScript 前端开发 UED
Vue class和style绑定:动态美化你的组件
Vue class和style绑定:动态美化你的组件
|
1天前
|
JavaScript 前端开发 API
Vue 监听器:让你的应用实时响应变化
Vue 监听器:让你的应用实时响应变化
|
1天前
|
JavaScript
vue封装svg
vue封装svg
6 0
|
1天前
|
JavaScript
vue封装面包屑组件
vue封装面包屑组件
7 0
|
1天前
|
JavaScript
Vue 编写(preventReClick)防暴点 +防抖(debounce)和节流(throttle)函数
Vue 编写(preventReClick)防暴点 +防抖(debounce)和节流(throttle)函数
|
1天前
|
JavaScript 数据库
ant design vue日期组件怎么清空 取消默认当天日期
ant design vue日期组件怎么清空 取消默认当天日期
|
1天前
|
JavaScript C++
vue高亮显示组件--转载
vue高亮显示组件--转载
8 0