vue2.0 + element-ui +iframe在页面中嵌入外部网站

╰+哭是因爲堅強的太久メ 2022-12-26 11:20 166阅读 0赞

![913e102c04da635c204a60485cc03cd8.png][]

自从用饿了么框架重构项目以来，遇到 很多问题，我都有一一记录下来，现在特喜欢这个框架，说实话，如果你是用了vue这个技术栈的话，一定要用饿了么的pc端框架哦，遇到问题的时候在网上百度一下，就能找到解决方案，还有很多社区可以讨论，社区文档都比较成熟，很容易上手~~

开发相关资料文档：

Element UI手册：[https://cloud.tencent.com/developer/doc/1270][https_cloud.tencent.com_developer_doc_1270]  
github地址：[https://github.com/ElemeFE/element][https_github.com_ElemeFE_element]

vue2.0官方网站：[http://caibaojian.com/vue/guide/installation.html][http_caibaojian.com_vue_guide_installation.html]  
Element UI官方网站：[https://element.eleme.cn/\#/zh-CN][https_element.eleme.cn_zh-CN]

--------------------

### 1：安装node ###

### 2：查看node的版本号 ###

### 3：安装淘宝npm镜像 ###

### 4：安装全局vue-cli脚手架 ###

上面是准备工作，搭建开发环境，准备完后之后，就可以继续构建项目了.

#### 5：开始进入主题，初始化一个vue项目 ####

我这里是在d盘里面新建一个项目，先用`d:`的命令，回车键进入d盘；回车键默认创建项目信息。

vue init webpack itemname

![1d6d931c50394fc9f6c2585a5d60b4b5.png][]

image

出现这样的提示，初始化成功

![0e853738adfee6839f77a82aff195f78.png][]

image

根据提示输入运行项目(安装依赖很重要哦，千万不要忘记了，忘记安装后面出的问题就比较多哦~)

# 安装依赖，走你
    $ cd itemname
    $ npm install
    $ npm run dev

在浏览器就可以看到效果了。

![208c1d5197f00e63fd92639a6e2103c9.png][]

image

运行初始化demo，输入命令npm run dev；运行一下初始后的demo，弹出访问地址，如果没有问题则进行安装elementUI；准备好好之后，开始引入饿了么elementUI组件。

#### 6：安装 elementUI ####

npm i element-ui -S

快捷键ctrl+c,终止批处理操 作吗(Y/N)，在输入命令npm i element-ui -S

![889ce782a152e5cec5638046d6fe416a.png][]

image

###### 注意：安装过程中出现这样的bug的时候，需要解决 ######

![29aaf9ddfcac200865744caef74e9583.png][]

image

解决办法：尝试 删除项目中的 package-lock.json 文件 和 node\_modules 文件夹，然后再尝试 npm install.

成功安装组件显示如下

![52ba7af2ca5663b5411a111a3ad3ef3d.png][]

image

#### 7：打开main.js,加入element-ui的js和css ####

import ElementUI from 'element-ui' //element-ui的全部组件
    import 'element-ui/lib/theme-chalk/index.css'//element-ui的css
    Vue.use(ElementUI) //使用elementUI

![aa3c0e3aeb161949a3955b74629ddddf.png][]

image

=====  
今天要用到的是使用是使用iframe  
在网页种嵌入一个外部网站并且显示出来  
是的宽度高度都自适应屏幕。

<template>
        <div >
            <iframe src="https://www.xxxxx.com/" id="map" scrolling="no" frameborder="0" style="position:absolute;top:4px;left: 210px;right:0px;bottom:10px;"></iframe>
        </div>
    </template>
     
     
    <script>
        export default {
            data () {
                return {
                }
            },
            mounted(){
                /**
                * iframe-宽高自适应显示   
                */
                function changeMapIframe(){
                    const map = document.getElementById('map');
                    const deviceWidth = document.body.clientWidth;
                    const deviceHeight = document.body.clientHeight;
                    map.style.width = (Number(deviceWidth)-240) + 'px'; //数字是页面布局宽度差值
                    map.style.height = (Number(deviceHeight)+764) + 'px'; //数字是页面布局高度差
                }
    
                changeMapIframe()
    
                window.onresize = function(){
                    changeMapIframe()
                }
            }
        }
    </script>

完成~~~

[913e102c04da635c204a60485cc03cd8.png]: /images/20221120/1d6ea2dac6894be2b5935262797f5742.png
[https_cloud.tencent.com_developer_doc_1270]: https://links.jianshu.com/go?to=https%3A%2F%2Fcloud.tencent.com%2Fdeveloper%2Fdoc%2F1270
[https_github.com_ElemeFE_element]: https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2FElemeFE%2Felement
[http_caibaojian.com_vue_guide_installation.html]: https://links.jianshu.com/go?to=http%3A%2F%2Fcaibaojian.com%2Fvue%2Fguide%2Finstallation.html
[https_element.eleme.cn_zh-CN]: https://links.jianshu.com/go?to=https%3A%2F%2Felement.eleme.cn%2F%23%2Fzh-CN
[1d6d931c50394fc9f6c2585a5d60b4b5.png]: https://img-blog.csdnimg.cn/img_convert/1d6d931c50394fc9f6c2585a5d60b4b5.png
[0e853738adfee6839f77a82aff195f78.png]: https://img-blog.csdnimg.cn/img_convert/0e853738adfee6839f77a82aff195f78.png
[208c1d5197f00e63fd92639a6e2103c9.png]: https://img-blog.csdnimg.cn/img_convert/208c1d5197f00e63fd92639a6e2103c9.png
[889ce782a152e5cec5638046d6fe416a.png]: https://img-blog.csdnimg.cn/img_convert/889ce782a152e5cec5638046d6fe416a.png
[29aaf9ddfcac200865744caef74e9583.png]: https://img-blog.csdnimg.cn/img_convert/29aaf9ddfcac200865744caef74e9583.png
[52ba7af2ca5663b5411a111a3ad3ef3d.png]: https://img-blog.csdnimg.cn/img_convert/52ba7af2ca5663b5411a111a3ad3ef3d.png
[aa3c0e3aeb161949a3955b74629ddddf.png]: https://img-blog.csdnimg.cn/img_convert/aa3c0e3aeb161949a3955b74629ddddf.png