第二章 element-ui 國際化與自定義主題

2020-08-09 00:42:31

一、國際化設定

Element 元件內部預設使用中文,若希望使用其他語言,則需要進行多語言設定。以英文爲例,在 main.js 中

按需引入

import { Button, Select } from 'element-ui'

import lang from 'element-ui/lib/locale/lang/en'

import locale from 'element-ui/lib/locale' // 設定語言 locale.use(lang)

// 引入元件

Vue.component(Button.name, Button)

Vue.component(Select.name, Select)

如果使用其它語言,預設情況下中文語言套件依舊是被引入的,可以使用 webpack 的 NormalModuleReplacementPlugin 替換預設語言套件。

webpack.config.js

{
  plugins: [
    new webpack.NormalModuleReplacementPlugin(/element-ui[\/\\]lib[\/\\]locale[\/\\]lang[\/\\]zh-CN/, 'element-ui/lib/locale/lang/en')
  ]
}

element-ui 

相容 [email protected]

相容其他 i18n 外掛

相容 [email protected]

通過 CDN 的方式載入語言檔案

<script src="//unpkg.com/vue"></script>
<script src="//unpkg.com/element-ui"></script>
<script src="//unpkg.com/element-ui/lib/umd/locale/en.js"></script>

<script>
  ELEMENT.locale(ELEMENT.lang.en)
</script>

element-ui 設定了世界主流語言;

二、主題設定

在專案中改變 SCSS 變數

Element 的 theme-chalk 使用 SCSS 編寫,如果你的專案也使用了 SCSS,那麼可以直接在專案中改變 Element 的樣式變數。新建一個樣式檔案,例如 element-variables.scss,寫入以下內容:

/* 改變主題色變數 */
$--color-primary: teal;

/* 改變 icon 字型路徑變數,必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';

@import "~element-ui/packages/theme-chalk/src/index";

之後,在專案的入口檔案中,直接引入以上樣式檔案即可(無需引入 Element 編譯好的 CSS 檔案):

import Vue from 'vue'
import Element from 'element-ui'
import './element-variables.scss'

Vue.use(Element)

需要注意的是,覆蓋字型路徑變數是必需的,將其賦值爲 Element 中 icon 圖示所在的相對路徑即可。

命令列主題工具

如果你的專案沒有使用 SCSS,那麼可以使用命令列主題工具進行深層次的主題定製:

安裝工具

首先安裝「主題生成工具」,可以全域性安裝或者安裝在當前專案下,推薦安裝在專案裡,方便別人 clone 專案時能直接安裝依賴並啓動,這裏以全域性安裝做演示。

npm i element-theme -g

安裝白堊主題,可以從 npm 安裝或者從 GitHub 拉取最新程式碼。

# 從 npm
npm i element-theme-chalk -D

# 從 GitHub
npm i https://github.com/ElementUI/theme-chalk -D

初始化變數檔案

主題生成工具安裝成功後,如果全域性安裝可以在命令列裡通過 et 呼叫工具,如果安裝在當前目錄下,需要通過 node_modules/.bin/et 存取到命令。執行 -i 初始化變數檔案。預設輸出到 element-variables.scss,當然你可以傳參數指定檔案輸出目錄。

et -i [可以自定義變數檔案]

> ✔ Generator variables file

如果使用預設設定,執行後當前目錄會有一個 element-variables.scss 檔案。內部包含了主題所用到的所有變數,它們使用 SCSS 的格式定義。大致結構如下:

$--color-primary: #409EFF !default;
$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */
$--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */
$--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */
$--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */
$--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */
$--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */
$--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */
$--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */
$--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */

$--color-success: #67c23a !default;
$--color-warning: #e6a23c !default;
$--color-danger: #f56c6c !default;
$--color-info: #909399 !default;

...

修改變數

直接編輯 element-variables.scss 檔案,例如修改主題色爲紅色。

$--color-primary: red;

編譯主題

儲存檔案後,到命令列裡執行 et 編譯主題,如果你想啓用 watch 模式,實時編譯主題,增加 -w 參數;如果你在初始化時指定了自定義變數檔案,則需要增加 -c 參數,並帶上你的變數檔名。預設情況下編譯的主題目錄是放在 ./theme 下,你可以通過 -o 參數指定打包目錄。

et

> ✔ build theme font
> ✔ build element theme

使用自定義主題

引入自定義主題

和引入預設主題一樣,在程式碼裡直接參照「線上主題編輯器」或「命令列工具」生成的主題的 theme/index.css 檔案即可。

import '../theme/index.css'
import ElementUI from 'element-ui'
import Vue from 'vue'

Vue.use(ElementUI)

搭配外掛按需引入元件主題

如果是搭配 babel-plugin-component 一起使用,只需要修改 .babelrc 的設定,指定 styleLibraryName 路徑爲自定義主題相對於 .babelrc 的路徑,注意要加 ~

{
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "~theme"
      }
    ]
  ]
}