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函式取出實例就可以使用。

| 軟體開發 | 網站建置 | 網頁系統 | 資料庫網站 |

| 客製化網站 (報名系統、投票系統、掛號系統...) |

| 前後端技術合作 |

歡迎與我們聯繫:jessica@penueling.com

加入Line立即聊聊:@539mjyid

0
0 回復

發表評論

Want to join the discussion?
Feel free to contribute!

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。