element-ui 本地化使用教程詳解
起因:
用 element-ui 時(shí),本人是沒(méi)有安裝其它環(huán)境,而是直接用鏈接引入,這個(gè)帶來(lái)的問(wèn)題是,每次打開(kāi)網(wǎng)頁(yè)都很慢,于是想本地化,但是發(fā)現(xiàn)只是下載兩個(gè)引入的 js 和 css 是不夠的,很多功能會(huì)無(wú)法使用,打開(kāi) DevTools 發(fā)現(xiàn)是還有別的資源本地沒(méi)有。

再次前往官網(wǎng),找到下載頁(yè)面,結(jié)果發(fā)現(xiàn)并沒(méi)有給直接的下載鏈接。。沒(méi)辦法了,自己寫個(gè)腳本來(lái)下載。最后成功離線化。
下載后在 html 中引入:
<!--<link rel="stylesheet" >--> <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css" rel="external nofollow" > <!--<script src="https://unpkg.com/element-ui/lib/index.js"></script>--> <script src="element-ui/lib/index.js"></script>

下載腳本:
臨時(shí)起意做的,代碼里面可能會(huì)有些瑕疵,但是不影響使用,本人已經(jīng)成功下載并使用。
路徑可以自己更改,注意不要從 Windows 資源管理器復(fù)制,Linux 系統(tǒng)當(dāng)我沒(méi)說(shuō)。
package com.ycr;
import java.io.File;
import java.io.FileOutputStream;
import java.io.InputStream;
import java.net.HttpURLConnection;
import java.net.URL;
import java.nio.charset.StandardCharsets;
import java.util.ArrayList;
public class Main {
static String fileP = "C:\\Users\\YCR\\Desktop\\element-ui\\"; // 不要從資源管理器復(fù)制,有的字符會(huì)有問(wèn)題,導(dǎo)致無(wú)法創(chuàng)建文件
static String urlP = "https://unpkg.com/browse/element-ui@2.12.0/";
static String urlF = "https://unpkg.com/element-ui@2.12.0/";
public static void main(String[] args){
try {
GetPage("");
} catch (Exception e) {
e.printStackTrace();
}
}
static void GetPage(String after) throws Exception {
System.out.println(urlP + after);
new File(fileP + after).mkdir();
HttpURLConnection http = (HttpURLConnection) (new URL(urlP + after)).openConnection();
http.setRequestMethod("GET");
http.setRequestProperty("User-Agent", "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3562.0 Safari/537.36");
http.connect();
if(http.getResponseCode() == 200) {
InputStream inputStream = http.getInputStream();
byte [] buffer = new byte[1024];
ArrayList<byte []> byteList = new ArrayList<>();
ArrayList<Integer> byteLength = new ArrayList<>();
int length;
int totalLength = 0;
while( (length = inputStream.read(buffer)) != -1 ) {
byteList.add(buffer);
byteLength.add(length);
totalLength += length;
buffer = new byte[1024];
}
http.disconnect();
byte [] all;
all = new byte[totalLength];
totalLength = 0;
while(byteList.size() != 0) {
System.arraycopy(byteList.get(0), 0, all, totalLength, byteLength.get(0));
totalLength += byteLength.get(0);
byteList.remove(0);
byteLength.remove(0);
}
String content = new String(all, StandardCharsets.UTF_8);
all = null;
content = content.split("tbody")[1];
String [] us = content.split("href=\"");
for(int i = 1; i < us.length; i ++) {
String href = us[i].split("\"", 2)[0];
if(href.equals("../")) {
continue;
}
if(href.charAt(href.length() - 1) == '/') {
GetPage(after + href);
} else {
GetFile(after + href);
}
}
} else {
GetPage(after);
}
}
static void GetFile(String url) throws Exception{
System.out.println(url);
HttpURLConnection http;
http = (HttpURLConnection) (new URL(urlF + url)).openConnection();
http.setRequestMethod("GET");
http.setRequestProperty("User-Agent", "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3562.0 Safari/537.36");
http.connect();
if(http.getResponseCode() == 200) {
InputStream inputStream = http.getInputStream();
byte [] buffer = new byte[1024];
ArrayList<byte []> byteList = new ArrayList<>();
ArrayList<Integer> byteLength = new ArrayList<>();
int length;
int totalLength = 0;
while( (length = inputStream.read(buffer)) != -1 ) {
byteList.add(buffer);
byteLength.add(length);
totalLength += length;
buffer = new byte[1024];
}
http.disconnect();
byte [] all;
all = new byte[totalLength];
totalLength = 0;
while(byteList.size() != 0) {
System.arraycopy(byteList.get(0), 0, all, totalLength, byteLength.get(0));
totalLength += byteLength.get(0);
byteList.remove(0);
byteLength.remove(0);
}
File f = new File(fileP + url.replaceAll("/", "\\\\"));
f.createNewFile();
FileOutputStream fos = new FileOutputStream(f, false);
fos.write(all);
fos.flush();
fos.close();
} else {
GetFile(url);
}
}
}
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue項(xiàng)目netWork地址無(wú)法訪問(wèn)的問(wèn)題及解決
這篇文章主要介紹了vue項(xiàng)目netWork地址無(wú)法訪問(wèn)的問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-09-09
vue cli3 實(shí)現(xiàn)分環(huán)境打包的步驟
這篇文章主要介紹了vue cli3 實(shí)現(xiàn)分環(huán)境打包的步驟,本文通過(guò)圖文并茂的形式給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-03-03
vue使用Google地圖的實(shí)現(xiàn)示例代碼
這篇文章主要介紹了vue使用Google地圖的實(shí)現(xiàn)示例代碼,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-12-12
el-form表單實(shí)現(xiàn)校驗(yàn)的示例代碼
本文主要介紹了el-form表單實(shí)現(xiàn)校驗(yàn)的示例代碼,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2024-07-07
如何使用Vue mapState快捷獲取Vuex state多個(gè)值
這篇文章主要為大家介紹了如何使用Vue mapState快捷獲取Vuex state多個(gè)值實(shí)現(xiàn)詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-06-06
vue+ElementPlus框架Container 布局容器不能鋪滿整個(gè)屏幕的解決方案
這篇文章主要介紹了vue+ElementPlus框架Container 布局容器不能鋪滿整個(gè)屏幕的解決方案,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-01-01
VUE2.0+ElementUI2.0表格el-table循環(huán)動(dòng)態(tài)列渲染的寫法詳解
這篇文章主要介紹了VUE2.0+ElementUI2.0表格el-table循環(huán)動(dòng)態(tài)列渲染的寫法詳解,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11

