官方文档已更新: 点击跳转
 
突然发现已经半年没更新的element-ui更新了
 
 更新了什么还不清楚，但是告知了基于vue3.x版本的 element-plus 已经出来了。
 
 先来上手体验一下
 首先安装一个最新的@vue-cli，搭建一个vue3.x的项目，脚手架创建流程已经很简洁了，这里就不多说了。建好之后，直接开始安装吧
 
npm i element-plus 
 
为了方便，直接采取全部引入的方式
 
src/plugins/element.ts
 
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'

export default (app: any) => {
  app.use(ElementPlus)
}
 
src/main.ts
 
import router from './router'
import store from './store'
import App from './App.vue'
import { createApp } from 'vue'
import installElementPlus from './plugins/element'
const app = createApp(App)
installElementPlus(app)
app.use(store).use(router).mount('#app')
 
在页面中加一个按钮
 
<el-button type="primary">el-button</el-button>
 

 在新版的vue3.x版本中还保留了原有的生命周期函数
 
created(){
  this.$message("message")
},
 

 打印了一下this
 
 
更新补充:
 
element-plus按需引入
 
src/plugins/element.ts
 
import { Button, Message } from 'element-plus'

export default (app) => {
  app.use(Button)
  app.use(Message)
}
 
babel.config.js
 
module.exports = {
  "presets": [
    "@vue/cli-plugin-babel/preset"
  ],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-plus",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}
 
在vue3.0 setup中使用
 
import { setup } from 'vue-class-component'
import { getCurrentInstance } from 'vue'
export default {
  name: 'App',
  components: {

  },
  setup(e){
    const {ctx} = getCurrentInstance()
    ctx.$message("mesage")
  }
}
 
更新:ctx 打包之后无法调用$message，可以使用proxy
 
import { getCurrentInstance } from 'vue'
export default {
  name: 'App',
  components: {

  },
  setup(){
    const {proxy} = getCurrentInstance()
    proxy.$message("mesage")
  }
}

element
 
elementui
 
element-ui 
 
Element 
 
Element-UI 官网
 
echarts
 
Echarts.js

1、安装
 
npm install element-ui -S
 
2、在main.js导入elment-ui及css并use
 
/** 引入element ,必须有*/
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI);


 

 3、使用element-ui
 
建立一个element.js文件，该文件主要引入element-ui组件
 
 
import Vue from 'vue'  //导入vue

//从element-ui导入想要使用的组件
import { Button, Form, FormItem, Input, Message, Container, Header,
  Aside, Main, Menu, Submenu, MenuItemGroup, MenuItem, Breadcrumb,
  BreadcrumbItem, Card, Row, Col, Table, TableColumn, Switch, Tooltip, Pagination,
  Dialog, MessageBox, Tag, Tree, Select, Option, Cascader, Alert, Tabs, TabPane,
  Step, Steps, Checkbox, CheckboxGroup, Upload,
  Timeline, TimelineItem } from 'element-ui'

  //用哪个就use哪个
Vue.use(Button)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)

// 将弹框组件全局挂在到VUe原形实例
Vue.prototype.$message = Message

Vue.use(Container)
Vue.use(Header)
Vue.use(Aside)
Vue.use(Main)
Vue.use(Menu)
Vue.use(Submenu)
Vue.use(MenuItemGroup)
Vue.use(MenuItem)
Vue.use(Breadcrumb)
Vue.use(BreadcrumbItem)
Vue.use(Card)
Vue.use(Row)
Vue.use(Col)
Vue.use(Table)
Vue.use(TableColumn)
Vue.use(Switch)
Vue.use(Tooltip)
Vue.use(Pagination)
Vue.use(Dialog)
Vue.prototype.$confirm = MessageBox.confirm
Vue.use(Tag)
Vue.use(Tree)
Vue.use(Select)
Vue.use(Option)
Vue.use(Cascader)
Vue.use(Alert)
Vue.use(Tabs)
Vue.use(TabPane)
Vue.use(Step)
Vue.use(Steps)
Vue.use(Checkbox)
Vue.use(CheckboxGroup)
Vue.use(Upload)
Vue.use(Timeline)
Vue.use(TimelineItem)
 
 
在main.js引入element.js
 
 
 
在vue页面中使用这些组件
 
 

起因：
 
用 element-ui 时，本人是没有安装其它环境，而是直接用链接引入，这个带来的问题是，每次打开网页都很慢，于是想本地化，但是发现只是下载两个引入的 js 和 css 是不够的，很多功能会无法使用，打开 DevTools 发现是还有别的资源本地没有。
 
 
再次前往官网，找到下载页面，结果发现并没有给直接的下载链接。。没办法了，自己写个脚本来下载。最后成功离线化。
 
下载后在 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">

<!--<script src="https://unpkg.com/element-ui/lib/index.js"></script>-->
<script src="element-ui/lib/index.js"></script>
 
 
下载脚本：
 
临时起意做的，代码里面可能会有些瑕疵，但是不影响使用，本人已经成功下载并使用。
 路径可以自己更改，注意不要从 Windows 资源管理器复制，Linux 系统当我没说。
 
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\\ChuanruiYan\\Desktop\\element-ui\\"; // 不要从资源管理器复制，有的字符会有问题，导致无法创建文件
    static String urlP = "https://unpkg.com/browse/element-ui@2.13.2/";
    static String urlF = "https://unpkg.com/element-ui@2.13.2/";
    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 {
                    if(!href.equals(".DS_Store"))
                        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);
        }
    }
}