vue3 + ElementUI plus 按需載入

目前為止常用的框架有出到vue3的好像只有Elementui-plus，竟然這麼快就出ㄌ～太驚艷了，所以新案子就直接用起來！

對程式碼有潔癖的人，一樣可以選擇按需載入。

---

 

安裝Elementui-plus

你也可以直接參考官網的安裝步驟。

$ yarn add element-plus
$ yarn add babel-plugin-import -D

 

設定babel.config.js

直接把plugins的東西貼上。

module.exports = {
//...
  plugins: [
    [
      "import",
      {
        libraryName: "element-plus",
        customStyleName: name => {
          return `element-plus/lib/theme-chalk/${name}.css`;
        },
      },
    ],
  ],
};

 

把所有要使用的elementui組件獨立成一支檔案

新增一隻檔案plugin/elementui.js

import {
  ElInput,
  ElForm,
  ElFormItem,
  ElButton,
  ElSelect,
  ElRow,
  ElCol,
  ElTable,
  ElTableColumn,
  //... 之後慢慢再加入有用到的components～
  ElMessage,
  ElMessageBox,
  //... 之後慢慢再加入有用到的api～
} from "element-plus";

export const elComponents = [
  ElInput,
  ElForm,
  ElFormItem,
  ElButton,
  ElSelect,
  ElRow,
  ElCol,
  ElTable,
  ElTableColumn,
  //... 之後慢慢再加入有用到的components～
];

export const elPlugins = [ElMessage, ElMessageBox]; //... 之後慢慢再加入有用到的api～

為什麼這邊要分兩個變數呢？因為 element ui 有一般在template可以用的 components，還有可以直接在script裡呼叫的 api，像是$message那些，他們屬於不同的分類，註冊方式也不同。

 

在main.js註冊引入

import { createApp } from "vue";
import App from "@G/App.vue";
import { elComponents, elPlugins } from "@G/plugin/elementui";


const app = createApp(App);
elComponents.forEach(component => {
  app.component(component.name, component);
});
elPlugins.forEach(plugin => {
  app.use(plugin);
});
app.mount("#app");

 

建立elementui的scss變數檔案

新增一隻檔案scss/element-variables.scss，貼上以下程式碼，修改主題色：

/* 改变主题色变量 */
$--color-primary: #006bb8;

/* 改变 icon 字体路径变量，必需 */
$--font-path: "~element-plus/lib/theme-chalk/fonts";
@import "~element-plus/packages/theme-chalk/src/index";

主題色的所有變數名稱可以參考這裡。

 

 全局引用elementui的scss變數檔案

新增一支檔案vue.config.js在根目錄：

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: `@import "~@/scss/element-variables.scss";
                     //...
        `,
      },
    },
  },
};

 

怎麼使用？

到目前為止，按需載入的設定就做完囉！

接下來就是在頁面中使用：

<template>
  <div>
    <el-button @click="handleClick">點我跳出通知</el-button>
  </div>
</template>
<script>
import { getCurrentInstance } from "vue";
export default {
  name: "ButtonDemo",
  setup() {
    const { ctx } = getCurrentInstance();
    const handleClick = () => {
      ctx.$message({
        message: "成功拉！！！",
        type: "success",
      })
    }
    return { handleClick };
  },
};

$message就是我在上面引用的ElMessage，註冊進去之後element ui 會自動幫我放入實例裡面的 $message，使用 vue3 的getCurrentInstance函式取出實例就可以使用。