自从用饿了么框架重构项目以来，遇到 很多问题，我都有一一记录下来，现在特喜欢这个框架，说实话，如果你是用了vue这个技术栈的话，一定要用饿了么的pc端框架哦，遇到问题的时候在网上百度一下，就能找到解决方案，还有很多社区可以讨论，社区文档都比较成熟，很容易上手~~
1：安装node
2：查看node的版本号
3：安装淘宝npm镜像
4：安装全局vue-cli脚手架
上面是准备工作，搭建开发环境，准备完后之后，就可以继续构建项目了.
5：开始进入主题，初始化一个vue项目
我这里是在d盘里面新建一个项目，先用d:的命令，回车键进入d盘；回车键默认创建项目信息。
vue init webpack itemname
出现这样的提示，初始化成功
根据提示输入运行项目(安装依赖很重要哦，千万不要忘记了，忘记安装后面出的问题就比较多哦~)
# 安装依赖，走你 $ cd itemname $ npm install $ npm run dev
在浏览器就可以看到效果了。
运行初始化demo，输入命令npm run dev；运行一下初始后的demo，弹出访问地址，如果没有问题则进行安装elementUI；准备好好之后，开始引入饿了么elementUI组件。
6：安装 elementUI
npm i element-ui -S
快捷键ctrl+c,终止批处理操 作吗(Y/N)，在输入命令npm i element-ui -S
注意：安装过程中出现这样的bug的时候，需要解决
解决办法：尝试 删除项目中的 package-lock.json 文件 和 node_modules 文件夹，然后再尝试 npm install.
成功安装组件显示如下
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
今天要用到的是使用是使用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>
完成~~~
