自從用餓了麼框架重構項目以來,遇到 很多問題,我都有一一記錄下來,現在特喜歡這個框架,說實話,如果你是用了vue這個技術棧的話,一定要用餓了麼的pc端框架哦,遇到問題的時候在網上百度一下,就能找到解決方案,還有很多社區可以討論,社區文檔都比較成熟,很容易上手~~
開發相關資料文檔:
Element UI手冊:https://cloud.tencent.com/developer/doc/1270
github地址:https://github.com/ElemeFE/element
vue2.0官方網站:http://caibaojian.com/vue/guide/installation.html
Element UI官方網站:https://element.eleme.cn/#/zh-CN
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>
完成~~~