閱讀(12.4k) 書簽贊(1) 我要糾錯(cuò)

ElementPlus 快速上手

2021-09-06 17:29 更新

使用組件

完整引入所有組件

主文件

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

按需引入組件

ElementPlus的 JS 代碼默認(rèn)支持基于 ES modules 的搖樹 tree shaking。

應(yīng)用程序視圖

<template>
  <el-button> 我是 ElButton </el-button>
</template>
<script>
  import { defineComponent } from 'vue'
  import { ElButton } from 'element-plus'

  export default defineComponent({
    name: 'app'
    components: {
      ElButton,
    },
  })
</script>

樣式的引入

我們強(qiáng)烈建議直接引入全部的樣式文件，雖然這看起來會增大整個(gè)應(yīng)用的體積，但這樣做可以避免引入額外的打包工具插件（減少負(fù)擔(dān)），你還可以通過 CDN 的方式來加載樣式文件，從而使得你的應(yīng)用加載更快。

通過 JS 的方式引入

import 'element-plus/dist/index.css'

通過 HTML 的頭文件引入

<!-- index.html -->
<head>
  <link rel="stylesheet"  rel="external nofollow" target="_blank"  />
</head>

如果你想讓樣式也按需引入，你可以使用對應(yīng)工具提供的插件來引用。請看常見問題

快捷搭建項(xiàng)目模板

使用 vue-cli@4.5

我們?yōu)樾掳娴?vue-cli 準(zhǔn)備了相應(yīng)的 Element Plus 插件你可以用它們快速地搭建一個(gè)基于 Element Plus 的項(xiàng)目。

使用 Starter Kit

我們提供了通用的項(xiàng)目模板，你可以直接使用，另外我們還提供了 Vite 模板。對于 Laravel 用戶，我們也準(zhǔn)備了相應(yīng)的模板，同樣可以直接下載使用。

全局配置

在引入 Element Plus 時(shí)，可以傳入一個(gè)全局配置對象。該對象目前支持 size 與 zIndex 字段。size 用于改變組件的默認(rèn)尺寸，zIndex 設(shè)置彈框的初始 z-index（默認(rèn)值：2000）。按需引入 Element Plus 的方式，具體操作如下：

完整引入 ElementPlus：

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

按需引入 ElementPlus：

import { createApp } from 'vue'
import { ElButton } from 'element-plus'
import App from './App.vue'
const app = createApp(App)
app.config.globalProperties.$ELEMENT = option
app.use(ElButton)

按照以上設(shè)置，項(xiàng)目中所有擁有 size 屬性的組件的默認(rèn)尺寸均為 'small'，彈框的初始 z-index 為 3000。

使用 Nuxt.js

我們還可以使用 Nuxt.js

開始使用

至此，一個(gè)基于 Vue 和 Element Plus 的開發(fā)環(huán)境已經(jīng)搭建完畢，現(xiàn)在就可以編寫代碼了。各個(gè)組件的使用方法請參閱它們各自的文檔。

常見問題

我想同時(shí)按需引入組件和樣式，我應(yīng)該怎么做？

使用 vite 按需加載樣式

如果你使用 vite 作為構(gòu)建打包工具，那么你需要先安裝 vite-plugin-element-plus 來實(shí)現(xiàn)按需加載樣式

yarn add vite-plugin-element-plus -D
# 或
npm install vite-plugin-element-plus -D

然后將如下代碼添加至 vite.config.js 文件中:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import VitePluginElementPlus from 'vite-plugin-element-plus'

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
  plugins: [
    vue(),
    VitePluginElementPlus({
      // 如果你需要使用 [component name].scss 源文件，你需要把下面的注釋取消掉。
      // 對于所有的 API 你可以參考 https://github.com/element-plus/vite-plugin-element-plus
      // 的文檔注釋
      // useSource: true
      format: mode === 'development' ? 'esm' : 'cjs',
    }),
  ],
})
TS

使用 webpack 按需加載樣式

如果你使用 webpack 作為構(gòu)建打包工具，那么你需要先安裝 babel-plugin-import 來實(shí)現(xiàn)按需加載樣式

yarn add babel-plugin-import -D
# 或
npm install babel-plugin-import -D

然后你需要將以下代碼加入你的 babel.config.js 文件中。

babel.config.js

module.exports = {
  plugins: [
    [
      'import',
      {
        libraryName: 'element-plus',
        // 引入組件
        customName: (name) => {
          name = name.slice(3)
          return `element-plus/lib/components/${name}`
        },
        // 引入樣式
        customStyleName: (name) => {
          name = name.slice(3)
          // 如果你需要引入 [name].scss 文件，你需要用下面這行
          // return `element-plus/lib/components/${name}/style`
          // 引入 [name].css
          return `element-plus/lib/components/${name}/style/css`
        },
      },
    ],
  ],
}

以上內(nèi)容是否對您有幫助：

← ElementPlus 安裝

ElementPlus 國際化 →

寫筆記

我要補(bǔ)充