element-ui 本地化使用教程详解


Posted in Javascript onOctober 28, 2019

起因:

用 element-ui 时,本人是没有安装其它环境,而是直接用链接引入,这个带来的问题是,每次打开网页都很慢,于是想本地化,但是发现只是下载两个引入的 js 和 css 是不够的,很多功能会无法使用,打开 DevTools 发现是还有别的资源本地没有。

element-ui 本地化使用教程详解

再次前往官网,找到下载页面,结果发现并没有给直接的下载链接。。没办法了,自己写个脚本来下载。最后成功离线化。

下载后在 html 中引入:

<!--<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
<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>

element-ui 本地化使用教程详解

下载脚本:

临时起意做的,代码里面可能会有些瑕疵,但是不影响使用,本人已经成功下载并使用。
路径可以自己更改,注意不要从 Windows 资源管理器复制,Linux 系统当我没说。

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\\"; // 不要从资源管理器复制,有的字符会有问题,导致无法创建文件
 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);
 }
 }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js判断是否为数组的函数: isArray()
Oct 30 Javascript
js添加select下默认的option的value和text的方法
Oct 19 Javascript
简述JavaScript提交表单的方式 (Using JavaScript Submit Form)
Mar 18 Javascript
JS公共小方法之判断对象是否为domElement的实例
Nov 25 Javascript
js数组去重的hash方法
Dec 22 Javascript
详解Vue中使用v-for语句抛出错误的解决方案
May 04 Javascript
微信小程序实现滑动删除效果
May 19 Javascript
详解vue axios中文文档
Sep 12 Javascript
微信小程序之swiper轮播图中的图片自适应高度的方法
Apr 23 Javascript
Vue2.0点击切换类名改变样式的方法
Aug 22 Javascript
JS实现的A*寻路算法详解
Dec 14 Javascript
JavaScript的Set数据结构详解
Feb 18 Javascript
vue 全局环境切换问题
Oct 27 #Javascript
vue 父组件通过v-model接收子组件的值的代码
Oct 27 #Javascript
解决包含在label标签下的checkbox在ie8及以下版本点击事件无效果兼容的问题
Oct 27 #Javascript
Vue-Cli项目优化操作的实现
Oct 27 #Javascript
layui table 复选框跳页后再回来保持原来选中的状态示例
Oct 26 #Javascript
Layui 解决表格异步调用后台分页的问题
Oct 26 #Javascript
Layui实现数据表格默认全部显示(不要分页)
Oct 26 #Javascript
You might like
php 购物车的例子
2009/05/04 PHP
PHP异常处理浅析
2015/05/12 PHP
PHP foreach遍历多维数组实现方式
2016/11/16 PHP
php获取数据库中数据的实现方法
2017/06/01 PHP
告诉大家什么是JSON
2008/06/10 Javascript
javascript高级学习笔记整理
2011/08/14 Javascript
JSON中双引号的轮回使用过程中一定要小心
2014/03/05 Javascript
jQuery中wrapAll()方法用法实例
2015/01/16 Javascript
基于JavaScript实现手机短信按钮倒计时(超简单)
2015/12/30 Javascript
基于javascript实现的快速排序
2016/12/02 Javascript
详解本地Node.js服务器作为api服务器的解决办法
2017/02/28 Javascript
vue中将网页打印成pdf实例代码
2017/06/15 Javascript
详解Node.js access_token的获取、存储及更新
2017/06/20 Javascript
jsonp跨域请求详解
2017/07/13 Javascript
js截取字符串功能的实现方法
2017/09/27 Javascript
vue-swiper的使用教程
2018/08/30 Javascript
详解vue开发中调用微信jssdk的问题
2019/04/16 Javascript
vue调用语音播放的方法
2019/09/27 Javascript
[02:53]DOTA2亚洲邀请赛 NewBee战队巡礼
2015/02/03 DOTA
[01:32]寻找你心中的那团火 DOTA2 TI9火焰传递活动今日开启
2019/05/16 DOTA
Python基本数据类型详细介绍
2014/03/11 Python
python通过wxPython打开一个音频文件并播放的方法
2015/03/25 Python
python数据结构链表之单向链表(实例讲解)
2017/07/25 Python
python jieba分词并统计词频后输出结果到Excel和txt文档方法
2018/02/11 Python
浅谈Python的list中的选取范围
2018/11/12 Python
python3的数据类型及数据类型转换实例详解
2019/08/20 Python
Python上下文管理器全实例详解
2019/11/12 Python
Python类super()及私有属性原理解析
2020/06/15 Python
Python正则表达式高级使用方法汇总
2020/06/18 Python
草莓网化妆品加拿大网站:Strawberrynet Canada
2016/09/20 全球购物
财务管理个人自荐书范文
2013/11/24 职场文书
户外宣传策划方案
2014/05/25 职场文书
敬业奉献模范事迹材料
2014/12/24 职场文书
2016党员读书思廉心得体会
2016/01/23 职场文书
《开国大典》教学反思
2016/02/16 职场文书
Mysql数据库索引面试题(程序员基础技能)
2021/05/31 MySQL