軟件開發過程中，可以使用以下代碼來獲取到 body 標簽中的內容：

document.body.innerHTML

但上述方式無法獲取到諸如 head、html 等 body 標簽之外的元素內容。如果需要獲取整個網頁上完整的 html 內容，可以使用以下 JavaScript 代碼：

document.documentElement.outerHTML

在 CefSharp 中獲取網頁的完整 HTML 輸出

在 CefSharp 中，可以通過 ChromiumWebBrowser 類型的 GetSourceAsync 方法獲取網頁的源代碼。該方法返回的字符串包含 html 標簽，但不包含通過 JavaScript 動態渲染出的內容。

如果想獲取包含動態渲染的內容（比如采集場景下），可以通過運行 JavaScript 代碼的方式實現：

言

前一段時間，小編也收集了推薦36種免費React模板和主題「干貨」，這次又收集了22種Vue的。希望小伙們喜歡。收集不易，希望點贊+關注。

在Internet上搜索模板和主題時，很難找到免費的Vue資源。

即使您不在乎質量，它們似乎也很難被發現，并出于好奇而感動，我花了數小時在Google和Github上四處挖掘，結果得到了收集22種開源Vue模板和主題框架集合。我不會對此打賭，但是它們也是高質量的資源。

Bootstrap Vue

現場演示：https://bootstrap-vue.org/

github：https://github.com/bootstrap-vue/bootstrap-vue

BootstrapVue 擁有85個以上的組件，45個以上的可用插件，多個指令和670+個圖標， 它提供了可用于Vue.js v2.6的Bootstrap v4.5組件和網格系統的最全面的實現之一 ，并具有廣泛的功能和自動 WAI-ARIA 可訪問性標記。

vue & nuxt 博客網站

現場演示：https://surmon.me/
Github: https://github.com/surmon-china/surmon.me

使用vue & nuxt 搭建建立的非常有風味獨特的博客網站。

Vue后臺UI框架 - Buefy

現場演示：https://buefy.org/

Github: https://github.com/buefy/buefy/

Buefy 是基于Bulma框架和設計的Vue.js響應式UI組件的輕量級庫

特征

• 輕松保留當前的布爾瑪主題/變量
• 支持Material Design圖標和FontAwesome
• 非常輕巧，除了Vue＆Bulma之外沒有任何內部依賴性
• 大約88KB min + gzip（包括布爾瑪）
• 語義代碼輸出
• 遵循布爾瑪設計和一些Material Design UX
• 專注于可用性和性能，而無需過度動畫的東西

vue后臺UI框架 - ant-design-vue

現場演示：https://vue.ant.design
Github: https://github.com/vueComponent/ant-design-vue

這里是 Ant Design 的 Vue 實現，開發和服務于企業級后臺產品。

特性

• 提煉自企業級中后臺產品的交互語言和視覺風格。
• 開箱即用的高質量 Vue 組件。
• 共享Ant Design of React設計工具體系。

Vue后臺UI框架 - vuetifyjs

現場演示：官網:vuetifyjs.com
Github：https://github.com/vuetifyjs/vuetify

Vuetify 是一個 Vue UI 庫，包含手工制作的精美材料組件。不需要設計技能 - 創建令人驚嘆的應用程序所需的一切都觸手可及。

vue后臺UI框架 - iview

iview官網：https://www.iviewui.com/
Github：https://github.com/iview/iview
官方后臺示例：iview-admin：https://github.com/iview/iview-admin

iView Admin是一個前端管理后臺集成解決方案。它基于Vue.js并使用UI Toolkit iView。

餓了么出品的UI框架 - element-ui

Vue：http://element-cn.eleme.io/2.0/#/zh-CN/component/quickstart
React：https://eleme.github.io/element-react/#/zh-CN/quick-start
Angular：https://element-angular.faas.ele.me/guide/start

基于Vue2.0和bulma0.2的后臺管理框架 - vue-admin

Github：https://github.com/vue-bulma/vue-admin

cd vue-admin
npm install
npm run dev

人人開源 / renren-fast-vue

現場演示：http://demo.open.renren.io/renren-fast (賬號密碼：admin/admin)

Gitee：https://gitee.com/renrenio/renren-fast-vue

renren-fast-vue基于vue、element-ui構建開發，實現renren-fast后臺管理前端功能，提供一套更優的前端解決方案

若依 / RuoYi-Vue

演示地址：http://vue.ruoyi.vip
文檔地址：http://doc.ruoyi.vip

RuoYi-Vue 基于SpringBoot，Spring Security，JWT，Vue & Element 的前后端分離權限管理系統

Vue White Dashboard

現場演示：https://demos.creative-tim.com/vue-white-dashboard/?ref=devto

地址：https://www.creative-tim.com/product/vue-white-dashboard?ref=devto

Vue White Dashboard 是一個免費的開源Bootstrap 4和Vue.js Admin儀表板，其中包含大量的組件，這些組件可以組合在一起并看起來非常漂亮。Vue White儀表板具有16個以上的獨立組件，可讓您自由選擇和組合。這意味著有成千上萬種可能的組合。所有組件的顏色都可能不同，您可以使用SASS文件輕松進行修改。

Vue QRcode Reader

現場演示：https://gruhn.github.io/vue-qrcode-reader/?rel=nofollow

github：https://github.com/gruhn/vue-qrcode-reader?rel=nofollow

Vue QRcode Reader是一組用于檢測和解碼QR碼的VueJS組件。它使您無需離開瀏覽器即可檢測和解碼QR碼。所有組件都具有響應能力。除此之外，它接近零樣式，因此您可以使它們適合您的布局。使用方法簡單明了。

VueJS Expo

現場演示：https://vuejsexpo.com/?ref=devto

VueJS Expo 使用Vue.js框架收集了許多精美的網站，應用程序和實驗。如果您是VueJS框架的粉絲，那么這里可能是受到啟發的地方。展示包括基于VueJS的主題，元素，儀表板等。

Vue Paper Dashboard PRO

現場演示：https://demos.creative-tim.com/bs3/vue-paper-dashboard-pro/#/admin/overview?ref=devto

地址：https://www.creative-tim.com/product/vue-material-dashboard-pro?ref=devto

Vue Paper Dashboard PRO 是建立在Bootstrap和Vue之上的漂亮資源。它將幫助您立即開始開發儀表板。Vue Paper Dashboard Pro是 Original Paper Dashboard Pro的VueJS移植版本。使用儀表板非常簡單，但是需要具備Javascript，Vue和Vue-Router的基礎知識。

Vue-Color

現場演示：http://vue-color.surge.sh/?rel=nofollow

Github：https://github.com/xiaokaike/vue-color?rel=nofollow

Vue-Color 是來自Sketch，Photoshop，Chrome，Github，Twitter，Material Design等眾多酷炫色彩選擇器的集合。

Vue-Koel

現場演示：https://koel.dev/?rel=nofollow

Github：https://github.com/koel/koel?rel=nofollow

Koel 是一種簡單的基于Web的個人音頻流服務，在客戶端用Vue編寫，在服務器端用Laravel編寫。針對Web開發人員，Koel采用了一些更現代的Web技術-CSS網格，音頻和拖放API等來完成其工作。

Vue Argon Dashboard

現場演示：https://demos.creative-tim.com/vue-argon-dashboard/?ref=devto

地址：https://www.creative-tim.com/product/vue-argon-dashboard?ref=devto

Vue Argon Dashboard 是Bootstrap 4和Vue.js的儀表板。它是開源的，免費的，并且具有許多組件，可以幫助您創建出色的網站。Vue Argon儀表板內置了100多個單獨的組件，因此您可以選擇和組合。由于實現了所有元素，因此從原型制作到功能齊全的代碼，您將節省大量時間。該儀表板附帶了預先構建的示例，因此開發過程是無縫的，從我們的頁面切換到真實的網站非常容易。

Pagekit

現場演示：https://pagekit.com/?rel=nofollow

github：https://github.com/pagekit/pagekit?rel=nofollow

Pagekit 是使用Symfony組件和VueJS構建的模塊化，輕量級CMS。不管是個人博客還是公司網站，使用Pagekit都可以為Web創建功能強大的內容，使其在每種設備上都能完美運行。它具有干凈直觀的界面。它也有一個很棒的內置市場。

Vue Material Dashboard PRO

現場演示：https://demos.creative-tim.com/vue-material-dashboard-pro/?ref=devto#/dashboard

地址：https://www.creative-tim.com/product/vue-material-dashboard-pro?ref=devto

Vue Material Dashboard PRO 是基于Vue Material和VueJS構建的超棒高級管理模板。它是通過考慮您在儀表板中實際需要的東西而創建的。Vue Material Dashboard PRO包含精選和優化的VueJS插件。一切都旨在相互配合。使用儀表板非常簡單，但是需要具備Javascript，VueJS和Vue Router的基礎知識。

Vue Material Kit

現場演示：https://demos.creative-tim.com/vue-material-kit/?ref=devto#/

地址：https://www.creative-tim.com/product/vue-material-kit?ref=devto

Vue Material Kit 是基于Vue Material和VueJS構建的驚人的免費開源資源。這將幫助您立即開始開發UI Kit。Vue材料工具包是原始材料工具包的官方VueJS版本。使用UI Kit非常簡單，但是需要Javascript，VueJS和Vue Router的基礎知識。

Retrospectify

現場演示：http://pepf.nl/retrospective/?rel=nofollow

github ：https://www.creative-tim.com/product/vue-material-kit?ref=devto

Retrospectify 是用Vue編寫的出色工具，用于數字化敏捷團隊回顧。當與遠程團隊進行回顧時，或者當您希望隨時間跟蹤回顧結果時，這將很有用。它具有三種注釋類型，您可以在注釋周圍移動或將點添加到各個注釋中。

Code Notes

現場演示：https://lauthieb.github.io/code-notes/?rel=nofollow

github ：https://github.com/lauthieb/code-notes?rel=nofollow

最后

如果您尚未使用VueJS，則應該知道它在Github上擁有超過164k的星星和88.7k的星星。很多！同樣，Vue是一種開源產品，這意味著任何人都可以為它做貢獻或從貢獻者那里學到新東西。

我希望這個清單可以在您的下一個開發項目中為您提供幫助

推薦Vue學習資料文章：

《如何寫出優秀后臺管理系統？11個經典模版拿去不謝「干貨」》

獲取 HTML 元素的位置坐標，可以使用 JavaScript 中的 DOM 操作來實現。下面是一個示例代碼，展示如何使用 JavaScript 獲取指定類名的元素的位置坐標：

htmlCopy code
<!DOCTYPE html>
<html>
<body>
  <div class="my-element">This is a div element.</div>

  <script>
    // 獲取具有指定類名的元素
    var element = document.querySelector('.my-element');

    // 獲取元素的位置信息
    var rect = element.getBoundingClientRect();

    // 輸出元素的位置坐標
    console.log('元素的左上角坐標：', rect.left, rect.top);
    console.log('元素的右下角坐標：', rect.right, rect.bottom);
    console.log('元素的寬度和高度：', rect.width, rect.height);
  </script>
</body>
</html>

在上述代碼中，我們首先使用 querySelector() 方法獲取具有指定類名 .my-element 的元素。然后，使用 getBoundingClientRect() 方法獲取該元素的位置信息，返回一個包含左上角坐標、右下角坐標、寬度和高度等屬性的 DOMRect 對象。

最后，我們使用 console.log() 方法將元素的位置坐標輸出到控制臺。您可以根據實際需要使用這些坐標信息。

請注意，獲取的位置坐標是相對于視口（viewport）的坐標，而不是相對于整個頁面的坐標。如果需要獲取相對于頁面的坐標，可以結合 window.scrollX 和 window.scrollY 屬性進行計算。