Vue前端之路 二 元件庫element

2021-10-19 22:25:25 字數 3442 閱讀 3568

目錄序言

1.element整合

1.1.npm安裝element

1.2.完整引入element

2.element國際化實現

2.1.準備自定義內容檔案

2.2.相容 [email protected]配置

2.3.配置檔案繫結到vue例項中

2.4.測試切換中英文功能

2.5.國際化的使用

2.5.1.template中的常量格式

2.5.2.template中元件屬性的格式

2.5.3.js中的使用

開啟vscode和專案，在終端下執行安裝命令，命令如下：

npm i element-ui -s
在 main.js 中寫入以下內容

import vue from 'vue';


import elementui from 'element-ui';


import 'element-ui/lib/theme-chalk/index.css';


vue.use(elementui);
以上**便完成了 element 的引入。需要注意的是，樣式檔案需要單獨引入。

在步驟上分三步，這裡以中英文為例。

在asset資料夾下，新建乙個lang資料夾，在lang資料夾下新建兩個js檔案，en.js和zh.js，作為自定義國際化內容檔案

舉例說明：

en.js檔案內容：

const en =

}export default en;

zh.js檔案內容：

const zh=

}export default zh;

在src目錄下，新建i18n資料夾，在i18n資料夾下新建index.js檔案，作為element 相容 [email protected]，搭配使用能更方便地實現多語言切換的配置檔案

內容如下：

import vue from "vue";

import vuei18n from "vue-i18n";

import locale from "element-ui/lib/locale";

import elementenlocale from "element-ui/lib/locale/lang/en";

import elementzhlocale from "element-ui/lib/locale/lang/zh-cn";

import enlocale from "@/assets/lang/en";

import zhlocale from "@/assets/lang/zh";

// 引入工具函式

import from "@/utils/global";

//vue 使用vuei18n模組

vue.use(vuei18n);

//獲取當前語言（初始化時localstorage裡沒有存語言，預設為瀏覽器當前的語言） getbrowserlang();

const lang = getstorage("lang") || "en";

//引入本地

const messages = ,

zh:

};//建立國際化例項

const i18n = new vuei18n();

locale.i18n((key, value) => i18n.t(key, value));

export default i18n;

工具方法global.js如下：

// 獲取localstorage

export const getstorage = function(key) ;

// 設定localstorage

export const setstorage = function(key, obj) ;

// 移除localstorage

export const removestorage = function(key) ;

// 獲取瀏覽器預設語言

export const getbrowserlang = function()  else 

return defaultbrowserlang;

};

修改main,js，加黑部分是新新增的內容

import i18n from "@/i18n";//國際化

import locale from "element-ui/lib/locale/lang/en";

vue.use(elementui, );

新建乙個index.vue檔案

tempate內容如下：

}}

js內容如下：

methods: ,

),//切換語言

handlesetlang(lang) ,

}

css中內容如下：

.lang-container

.arrow-down }}

vuex中內容如下：

// 引入工具函式

import from "@/utils/global";

const state =

const mutations =

}const actions = {}

const getters =

export default ;

在store引入配置：

import vue from "vue";

import vuex from "vuex";

import dashboard from "./modules/dashboard";

vue.use(vuex);

const store = new vuex.store(

});export default store;

主要有三個點：

例如：

}

例如：

:content="$t('login.login')"

需要放在computed才能生效，例如：

computed:

];},

set: function(v) }},

未完待續！

上一章：vue前端之路(一)---入坑前的準備----

VUE 元件（二）元件通訊

元件關係可分為父子元件通訊 兄弟元件通訊 跨級元件通訊。一 自定義事件 當子元件向父元件傳遞資料時，就要用到自定義事件 子元件用 emit 來觸發事件，父元件用 on 來監聽子元件事件 通過兩個按鈕實現 1 1的效果，在改變元件data中的count後，通過 emit 將值傳給父元件，父元件用v o...

Vue 二 元件間通訊

父元件中定義元素 如job 初始化 data 資料 data function 父元件中子元件標籤中定義並繫結資料 如 job job 等號左邊屬性名需和子元件定義 呼叫的寫法一樣，右邊表示父元件中的資料元素 name name job job namewasreset name event res...

VUE（二 元件與路由）

先來理解main.js import vue from vue import router from router vue.config.productiontip false eslint disable no new new vue vue檔案，在vue中，官網叫它做元件，單頁面的意思是結構，樣...