本地引入式使用element-ui

发表于 2022-08-24 04:21:12 (UTC+0)

需求: 向一个纯html网页, 引入element-ui, 且可在局域网使用

所需物料: 已安装npm, 且另有一个npm项目

Step1 下载vue2

比如打开这个网页, 找到下载链接, 如

https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.min.js

下载之, 存至html网页同级下的vue.min.js

Step2 找一个npm项目, 运行如下指令, 安装element-ui

npm i element-ui -S

Step3 打开npm项目的

node_modules/element-ui/index.js

node_modules/element-ui/theme-chalk/index.css

node_modules/element-ui/theme-chalk/font (文件夹)

复制为html网页同级下的

element-ui/index.js

element-ui/index.css

element-ui/font (文件夹)

Step4 html网页这样引入

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="element-ui/index.css" />
    <script src="vue.min.js"></script>
    <script src="element-ui/index.js"></script>
</head>

<body>
    <div id="app">
        <el-button style="margin-right:8px;" size="small" type="primary">新增</el-button>
        <el-button type="primary" size="small">删除</el-button>

        <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data() {
                return {
                    data: [{
                        label: '一级 1',
                        children: [{
                            label: '二级 1-1',
                            children: [{
                                label: '三级 1-1-1'
                            }]
                        }]
                    }, {
                        label: '一级 2',
                        children: [{
                            label: '二级 2-1',
                            children: [{
                                label: '三级 2-1-1'
                            }]
                        }, {
                            label: '二级 2-2',
                            children: [{
                                label: '三级 2-2-1'
                            }]
                        }]
                    }, {
                        label: '一级 3',
                        children: [{
                            label: '二级 3-1',
                            children: [{
                                label: '三级 3-1-1'
                            }]
                        }, {
                            label: '二级 3-2',
                            children: [{
                                label: '三级 3-2-1'
                            }]
                        }]
                    }],
                    defaultProps: {
                        children: 'children',
                        label: 'label'
                    }
                };
            },
            methods: {
                handleNodeClick(data) {
                    console.log(data);
                }
            }
        })
    </script>

</body>


</html>

效果如下

参考文献:

https://blog.csdn.net/weixin_43999634/article/details/122235616

0.113393s