一:单个图标的引用方法，直接下载，选择样式，当做图片引入项目即可

二：多个图标的引入方法：

选择图标，点击的不是下载了，而是加入购物车，然后右上角的购物车里面数字一直增加，点开。如下图。添加到项目里面，然后可以打开自己的项目，没有就新建一个项目。完成后，进去项目管理界面，点击查看在线连接，会让你生成代码连接，复制生成的连接，打开新的界面，复制里面的css代码，保存到项目中,r然后引入CSS的方式引入，引用标签一般用i ，<i class='iconfont icon-sanjiaoright'></i>  第一个类是你拷贝的css里面的统一类名，第二个是图标的名称。



 

官方安装教程
安装
 npm i element-ui -S


完整引入

main.js引入
import Vue from 'vue'
import App from './App'
import router from './router'

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})


按需引入   //我打包上线后，电脑浏览器运行没问题，手机却打开空白

安装
npm install babel-plugin-component -D

修改 babel.config.js文件
module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

main.js里进行按需引入
// import ElementUI from 'element-ui'
// import 'element-ui/lib/theme-chalk/index.css'
// Vue.use(ElementUI)

import {
  Button,
  ButtonGroup,
} from 'element-ui';

Vue.use(Button).use(ButtonGroup)

一.首先，我们到公司工作一般都会先引入项目，那该如何引入呢。
1.点击File,看到有一个import

2.点击箭头所指的地方

3.进入到这个页面之后我们点击箭头所指的地方选择你需要导入的项目，在这里如果你有项目名重复的项目会出现一个错误，一般的解决方法是在你的项目那个地方直接delete掉，在删除时只要不选中删除弹框中的那个选择框，就不会把本地的删除，只是在eclipse中删除掉，解决完这个问题之后我们点击finish就可以了。

二：成功引入项目之后我们一般都需要配置tomcat
1.点击箭头所在的地方

2.在这里选择你的tomcat本地的版本，我使用的是tomcat8，点击next
3.我们会看到这里会让你选择项目，选择完成时候点击Add，就会把项目导入到tomcat中


4.当你看到红箭头所指的地方时，tomcat的配置基本就完成了90%了

三：最后我们来说一下，tomcat在运行时总是运行失败的问题
1.在刚才配置好的tomcat上双击就会出现如下页面在Timeouts那里Start一般都是45,我们可以调成90，然后ctrl+s保存一下关闭就可以了。

2.有时我们启动tomcat时可能会出现tomcat启动报错，一般我们多启动几遍就可以了，有时我们也可以在tomcat服务器那里右键选择clean,点击ok会清理tomcat的缓存之类的东西

四：最后我们来说一下，我们导入项目完成之后我们的HttpServlet会爆红，但是我们已经导入了这个包，原因可能是我们的tomcat版本和我们导入的项目版本不一致导致的。在项目右键按照如图方式进行操作，就可以了，记住最后一定要按Apply，不然tomcat的版本不会保存。最后tomcat的运行和版本问题就解决了。

XUI 熟练使用之（一） ----------- 将 XUI 引入项目
前言
一、添加 Gradle 依赖
1、在项目根目录的 build.gradle 的 repositories 中添加：
2、引入依赖
二、初始化设置
1、配置 application
2、设置默认主题
三、实例演示

前言
     在平时开发中我们会做很多很多的页面效果、自定义控件等，如果我们全部都从零开始编写的话，可能会浪费大量的时间，于是我们可以考虑在项目中使用一些前辈们已经开发好的开源项目。类似的开源项目有很多，比如 腾讯公司的 QMUI，或者 xuexiangjys 前辈的 简洁而优雅的XUI 等等。从今天开始我将和大家一起，抱着学习的心态来一睹 XUI 的风采。 

今天我们主要学习一下怎样将 XUI 引入到我们的项目中，对于其中的各种控件，将在后面的博文中一一为大家奉上。
一、添加 Gradle 依赖
1、在项目根目录的 build.gradle 的 repositories 中添加：

allprojects {
    repositories {
        google()
        jcenter()
        maven { url "https://jitpack.io" }//新添加的内容
    }
}

如果不添加的话，后面引入 XUI 的依赖后，系统会找不到 XUI 的源。


因为作者将 XUI 的源代码放在 github 中，我们要在 androidStudio 中通过 gradle 引入依赖的话就得添加该仓库配置。
2、引入依赖
打开 app moudle （或者你想添加 XUI 的 moudle），在 dependencies 下添加如下代码：

【重点】如果你的项目使用的是 androidx 则必须使用如下代码：
dependencies {
    ...
	implementation 'com.github.xuexiangjys:XUI:1.1.4'
    implementation 'androidx.recyclerview:recyclerview:1.1.0'
    implementation 'com.google.android.material:material:1.1.0'
    implementation 'com.github.bumptech.glide:glide:4.11.0'
}

【重点】如果你的项目使用的不是 androidx 而是 support-v7 等，则必须使用如下代码：
dependencies {
  ...
  //support项目
  implementation 'com.github.xuexiangjys:XUI:1.1.4-support'

  implementation 'com.android.support:appcompat-v7:28.0.0'
  implementation 'com.android.support:recyclerview-v7:28.0.0'
  implementation 'com.android.support:design:28.0.0'
  implementation 'com.github.bumptech.glide:glide:4.8.0'
}

二、初始化设置
1、配置 application
在 application 中的 onCreate() 方法中初始化 XUI 框架。

编写 DemoApplication 类并继承自 Application 类，代码如下：
import android.app.Application;
import com.xuexiang.xui.XUI;

public class DemoApplication extends Application {

    @Override
    public void onCreate() {
        super.onCreate();
        XUI.init(this); //初始化UI框架
    }
}

然后需要在清单文件中配置该 application ：


2、设置默认主题
点击清单文件中 Application 标签中 的 android:theme="@style/AppTheme"



将跳转到该应用的主题配置文件：



接下来我们将修改 parent 的值来修改应用的默认主题：
<resources>
    ....
    <style name="AppTheme" parent="XUITheme.Phone">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
    ....
</resources>

XUI 对不同的机型有不同的主题:

大平板(10英寸, 240dpi, 1920*1200）：XUITheme.Tablet.Big
小平板(7英寸, 320dpi, 1920*1200）：XUITheme.Tablet.Small
手机（4.5英寸, 320dpi, 720*1280）：XUITheme.Phone

到此为止，XUI 的引入就完成了。接下来我们做一个实例。
三、实例演示
实例功能：点击一个按钮弹出一个提示对话框。

创建 activity 并编写如下代码：
public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Button button = findViewById(R.id.showDialog);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                DialogLoader.getInstance().showTipDialog(
                        MainActivity.this,
                        "提示",
                        "弹出对话框实例演示",
                        "关闭");
            }
        });
    }
}

我们可以看到只需要一行代码就可以完成提示框的功能，简直不要太方便啊。

activity_main.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    tools:context=".MainActivity">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/showDialog"
        android:text="弹出提示框"/>

</LinearLayout>

实例截图：
这个弹出框只是一个很简单的显示，更多弹出的使用我将在后续博文中和大家一起讨论，欢迎关注。


最后再次感谢前辈们的辛勤付出，做出如此优秀的界面框架，减少了我们大量工作量。