Element-UI 入门使用

Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库 [Element UI官网][1]

如何在Html文件中使用ElementUI

  1. 在网页中引入element ui css和js ，由于Element是具有Vue的，所以需引入Vue的js
> 
> - > 
> 
>     <script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
>     
> 
> <!-- 引入组件库 -->
> 
>
  1. 在Script中创建Vue对象管理界面元素
> ```

&lt;script&gt; new Vue({ el: &#39;#app&#39;, data: function () { return { visible: false } }, }); &lt;/script&gt;


  3. 接下来就可以使用Element中的元素了
    
    > ```
`&lt;div id="app"&gt;
        &lt;el-button @click="visible = true"&gt;Button&lt;/el-button&gt;
        &lt;el-dialog :visible.sync="visible" title="Hello World"&gt;
            &lt;p&gt;Try Element&lt;/p&gt;
        &lt;/el-dialog&gt;
&lt;/div&gt;
`
  1. 完整示例
> ```

`<!DOCTYPE html> <html lang=“en”>

<head> <meta charset=“UTF-8”> <meta name=“viewport” content=“width=device-width, initial-scale=1.0”> <meta http-equiv=“X-UA-Compatible” content=“ie=edge”> <title>Element第一个</title> <!– 引入样式 –> <link rel=“stylesheet” href=“https://unpkg.com/element-ui@2.12.0/lib/theme-chalk/index.css"> <script src=“https://unpkg.com/vue@2.6.10/dist/vue.js"&gt;&lt;/script> </head>

<body> <div id=“app”> <el-button @click=“visible = true”>Button</el-button> <el-dialog :visible.sync=“visible” title=“Hello World”> <p>Try Element</p> </el-dialog> </div> <!– 引入组件库 –> <script src=“https://unpkg.com/element-ui@2.12.0/lib/index.js"&gt;&lt;/script>

&lt;script&gt;
    new Vue({
        el: &#39;#app&#39;,
        data: function () {
            return {
                visible: false
            }
        },
    });
&lt;/script&gt;

</body>

</html> `


  5. 登录界面完成示例
    
    > ```
`&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;

&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
    &lt;title&gt;登录&lt;/title&gt;
    &lt;!-- 引入样式 --&gt;
    &lt;link rel="stylesheet" href="https://unpkg.com/element-ui@2.12.0/lib/theme-chalk/index.css"&gt;
    &lt;script src="https://unpkg.com/vue@2.6.10/dist/vue.js"&gt;&lt;/script&gt;
    &lt;!-- 引入组件库 --&gt;
    &lt;script src="https://unpkg.com/element-ui@2.12.0/lib/index.js"&gt;&lt;/script&gt;
    &lt;script src="https://unpkg.com/axios@0.19.0/dist/axios.min.js"&gt;&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;div id="app"&gt;
        &lt;el-row type="flex" class="row-bg" justify="center"&gt; 
            &lt;el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6"&gt;
                &lt;el-card class="box-card" style="margin-top: 50%;"&gt;
                    &lt;el-container&gt;
                        &lt;el-main&gt;
                            &lt;el-form ref="form" label-position="right" label-width="80px"&gt;
                                &lt;el-form-item label="用户名"&gt;
                                    &lt;el-input v-model="form.name" prefix-icon="el-icon-user" clearable&gt;&lt;/el-input&gt;
                                &lt;/el-form-item&gt;
                                &lt;el-form-item label="密码"&gt;
                                    &lt;el-input v-model="form.pwd" show-password prefix-icon="el-icon-lock" clearable&gt;&lt;/el-input&gt;
                                &lt;/el-form-item&gt;
                                &lt;div style="text-align: center;"&gt;&lt;el-button type="primary" round style="width: 50%;" @click="onSubmit"&gt; 登录 &lt;/el-button&gt;&lt;/div&gt;
                                &lt;el-form-item label="" style="text-align:right;"&gt; &lt;el-link type="primary" :underline="false"&gt; 找回密码 &lt;/el-link&gt;&lt;/el-form-item&gt;
                            &lt;/el-form&gt;
                        &lt;/el-main&gt;
                    &lt;/el-container&gt;
                &lt;/el-card&gt;
            &lt;/el-col&gt;
        &lt;/el-row&gt;
    &lt;/div&gt;
    &lt;script&gt;
        new Vue({
            el: &#39;#app&#39;,
            data: function () {
                return {
                    form: {
                        name: &#39;&#39;,
                        pwd: &#39;&#39;
                    }
                }
            },
            mounted() {
                // axios.get(&#39;https://api.apiopen.top/getJoke?page=1&count=2&type=video&#39;).then(function(response){
                //     console.log(response);
                // });
            },
            methods: {
                onSubmit(){//提交
                    console.log(this.$data);
                }
            },  
        });
    &lt;/script&gt;
&lt;/body&gt;

&lt;/html&gt;
`
  1. Socket.io 完整Demo
> ```

`<html> <head> <meta http-equiv=“Content-Type” content=“text/html; charset=utf-8”/> <title>NETTY SOCKET.IO DEMO</title> <base> <script src=“https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"&gt;&lt;/script> <script src=“https://cdn.bootcss.com/socket.io/2.2.0/socket.io.js"&gt;&lt;/script> <style> body { padding: 20px; } #console { height: 450px; overflow: auto; } .username-msg { color: orange; } .connect-msg { color: green; } .disconnect-msg { color: red; } </style> </head>

<body> <div id=“console” class=“well”></div> <button id=“btnSend” onclick=“send()">发送数据</button> </body> <script type=“text/javascript”> var socket; connect();

function connect() {
    var loginUserNum = &#39;79&#39;;
    var opts = {
        query: &#39;loginUserNum=&#39; + loginUserNum
    };
    socket = io.connect(&#39;http://192.168.1.30:9099&#39;, opts);
    socket.on(&#39;connect&#39;, function () {
        console.log("连接成功");
        serverOutput(&#39;&lt;span class="connect-msg"&gt;连接成功&lt;/span&gt;&#39;);
    });
    socket.on(&#39;push_event&#39;, function (data) {
        output(&#39;&lt;span class="username-msg"&gt;&#39; + data + &#39; &lt;/span&gt;&#39;);
        console.log(data);

    });

    socket.on(&#39;disconnect&#39;, function () {
        serverOutput(&#39;&lt;span class="disconnect-msg"&gt;&#39; + &#39;已下线! &lt;/span&gt;&#39;);
    });
}

function output(message) {
    var element = &lt;span class="katex math inline">("&lt;div&gt;" +"" + message + "&lt;/div&gt;");&lt;/span>(&#39;#console&#39;).prepend(element);
}

function serverOutput(message) {
    var element = &lt;span class="katex math inline">("&lt;div&gt;" + message + "&lt;/div&gt;");&lt;/span>(&#39;#console&#39;).prepend(element);
}

function send() {
    console.log(&#39;发送数据&#39;);
    socket.emit(&#39;text&#39;,&#39;你好&#39;);
}

</script> </html> `


 [1]: https://element.eleme.io/#/zh-CN