整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
了讓初學者更容易理解，本文寫的比較詳細，所以如果你已是技術大拿，請直接繞過，以免浪費你的寶貴時間，謝謝。
相信現在很多網站都有文章功能，有文章就基本上少不了要有個列表頁，網頁設計師們對文章列表頁的設計也是五花八門，各有各的創意，那我們就拿ThinkPHP旗下的極思維平臺的列表頁來說，極思維的目前的列表頁是這樣的：
大家可以看到，它的布局是塊形式展現，每篇文章都是固定的布局，圖片，標題，簡介，如果說每篇文章在發布的時候都要單獨的寫個簡介，單獨上傳個封面圖，對編輯者來說就有些麻煩了，那我們就可以通過程序讓它自動去抓取封面和簡介，自動抓取縮略圖我在之前的文章有講過，大家可以去找下我之前的《ThinkPHP之自動獲取文章內容中的第一張圖片做為縮略圖》這篇文章，今天我們主要講如何自動抓取文章的部分內容作為文章的簡介。
我們先來分析一下功能的實現原理，所謂簡介，就是簡單的說明一下這篇文章的主要內容，不涉及到排版，所以我們只需要純文字，那么問題來了，之前我們在抓取縮略圖的文章中我們也有說到，文章內容是由編輯器進行排版的，既然有排版樣式，就必定要有HTML樣式，只要保留文字就得把所有的HTML標簽都去掉，那怎么去掉呢？
不用急，PHP有個專門去掉HTML的函數，這個函數就是 strip_tags ，我們先來看一下這個函數是什么樣的：
在以上代碼中可以看到，內容中有個 <b> 標簽，<b> 標簽的作用就是字體加粗，我們運行一下實例看下：
可以很明顯的看到使用了 strip_tags 函數和沒使用 strip_tags 函數的區別，那是不是直接在ThinkPHP中用這個函數就夠了呢，寫過文章的人都知道，文章會涉及到換行、空格等格式，strip_tags 函數只能去掉HTML標簽，并不能去掉換行、空格等格式，那么怎么樣才能去掉換行和空格呢，別擔心，強大的PHP也有函數來處理這些東西的，PHP中有個正則替換函數叫做 ereg_replace ，這個函數可以把指定的字符換成我們想要的字符，那么我們的邏輯代碼就可以這樣寫：
從上面的邏輯代碼中，我們可以看到替換換行符中處理了三次替換，這是為什么呢，因為現在服務器系統有很多種，最常用的就有windows、linux兩種系統，這兩種系統的換行符是不同的，所以為了兼容不同的服務器，我們就多替換幾次，其中 \r\n 是替換 linux 和 unix 系統的換行符，\n 是替換 windows 系統的換行符，\r 是替換蘋果系統的換行符的。
處理好了HTML之后，接下來我們就要截取內容了，因為文章字數有多有少，既然是簡介，那我們肯定就只要截取一小段文字了，比如只要50個字或者100個字這樣，因為編程基本都是用英文編寫的，對中文的識別較差，所以在編程計算長度時，一個中文漢字是算兩個字符的，所以如果我們要截取50個中文的話，截取長度就是乘以二，那就是100了，其實這都不算什么問題，但是在實際過程中，按這樣的方式去截取的話，遇到文章包含中英文的時候就可能會出現亂碼的情況，為了避免出現亂碼，我們可以用一個非PHP核心函數 mb_strlen 來解決，為什么說 mb_strlen 是非PHP核心函數呢，因為在使用 mb_strlen 函數前需要確保在 php.ini 中有加載 php_mbstring.dll，要不然就會出現 未定義函數 的問題，那我們就來把上面的代碼改進一下，加上截取字數的功能，得到代碼如下：
然后，我們以ThinkPHP3.2為例，把上面的自定義函數方法添加到ThinkPHP框架中核心公共函數目錄（Common）里的 functions.php 文件的最后面即可。
調用方法為：{$vo.content|cutstr_html=###,100}
上面調用方法中的 ### 是表示文章內容，100為要截取的字數長度。
謝謝你的閱讀，如果你有更好的方法或在應用過程中遇到問題可以在評論區提問或者直接私信我，我會定期回復，碼農劉小橋與你一起學習，共同進步。
今 Vue 的熱度不斷攀升，使用者越來越多，Vue.js 工具也隨處可見。這種現象不是憑空產生的：Vue 的學習曲線友好，功能驅動的結構清晰易懂，文檔出色易學，所以新人入門很容易，經驗豐富的開發人員也可以快速從其他框架（如 React 或 Angular）切換過來。
只要你認真對待 Vue 的開發工作，逐漸就會發現很多優秀的基礎工具和庫。這些工具將點亮你的 Vue 開發職業生涯，讓你渾身上下散發專業氣息。
本文總結了一些最值得關注的工具和庫，相信你遲早會用在自己的 Vue.js 項目中。同類文章經常只會列舉一些 UI 組件庫，而本文涉及的范圍更廣，探討了 Vue 生態系統中的一系列工具、庫和插件。
我的選擇是基于實用性、有效性和獨特性等原則——而不是它們的 GitHub 受歡迎程度或星級評分。
閑話不提，我們先來看 Top10。
似乎現在每款 JavaScript 應用程序框架都必須使用某種 CLI 工具，Vue 也不例外。Vue CLI 是針對快節奏 Vue 開發打造的一套功能齊全的工具。除了常見的項目骨架之外，它還有方便的即時原型制作功能，你無需創建完整項目就可以嘗試新的創意。
Vue CLI 直接支持各種主流 Web 開發工具和技術，如 Ba??bel、TypeScript、ESLint、PostCSS、PWA、Jest、Mocha、Cypress 和 Nightwatch 等。這主要歸功于它的可擴展插件系統。這意味著社區可以構建和共享可復用的插件以滿足常見需求。
Vue CLI 強大的 GUI（Vue UI，它隨 CLI 一起提供）則為其錦上添花。在其幫助下你可以輕松創建并直接配置和管理項目。
?VueCLI（ https://cli.vuejs.org/ ）
VuePress 是 Vue 生態系統中的另一大重頭戲。它是一個基于 Vue 的靜態站點生成器，最初是用來編寫技術文檔的工具，現在則發展成為一個小巧、緊湊、功能強大的無頭 CMS。從版本 1.x 開始，它提供了出色的博客功能和強大的插件系統。它有一個默認主題（適用于技術文檔），但你也可以構建自定義主題或使用社區中的預制主題。
在 VuePress 中，你使用 Markdown 編寫內容，然后將其轉換為預渲染的靜態 HTML 文件。這些文件加載完畢后，你的站點就成為了由 Vue、Vue Router 和 Webpack 支持的單頁應用程序。
VuePress 的一大好處就是你可以在 Markdown 文件中包含 Vue 代碼或組件，帶來了強大的功能和靈活性。你可以像開發普通的 Vue 應用程序一樣開發你的網站，并充分利用 Vue 應用的種種優勢。
?VuePress（ https://v1.vuepress.vuejs.org/ ）
Gridsome 與 VuePress 有許多相似之處，但前者在處理數據源時采用了另一種非常強大的方法。你可以用它在應用程序中連接和使用許多不同類型的數據，然后將這些數據統一到一個 GraphQL 層中?；旧蟻碚f，Gridsome 用 Vue 提供前端功能，并使用 GraphQL 管理數據。其工作機制可總結為以下三個步驟：
Gridsome 提供了一些開箱即用的最佳實踐，如代碼分割、資產優化、漸進式圖像和鏈接預取等。所以 Gridsome 用起來很快，而且對 PWA 支持完善，對 SEO 也很友好。
?Gridsome（ https://gridsome.org/ ）
開發人員構建 Web 應用程序時面對的一大問題就是狀態管理。為了解決這個問題，Vue 提供了一個狀態管理系統——Vuex。它負責集中存儲應用程序中的所有組件，確保狀態只能以可預測的方式變化。一個存儲區是一個特殊的對象，分為四個部分：
存儲區也可以分割為多個模塊以提高可維護性。
?Vuex（ https://vuex.vuejs.org/ ）
Nuxt 是常用的服務端渲染（SSR）方法。這個框架簡潔而直觀，可用來構建各種應用程序。它也是模塊化的，因此你可以只使用應用程序所需的那些模塊。
你可以使用 Nuxt 創建服務端渲染的應用程序（SSR）、單頁面應用程序（SPA）、漸進式 Web 應用（PWA），或者只用作作靜態站點生成器。
簡而言之，Nuxt 簡化了構建和優化應用程序的流程，為你提供簡潔而愉快的開發體驗。
?Nuxt（ https://nuxtjs.org/ ）
Vuetify 是最好用的 UI 組件庫之一。它提供了大量基于 Material Design 規范精心制作的組件（80+），足以滿足任何應用程序的需求。
你可以用它來構建 SSR 應用程序、SPA、PWA 和移動應用。你可以創建新應用或將它們添加到現有應用中。它有免費和付費版主題可選，你也可以構建自己的主題。它還提供了一個系統，讓你可以只選出要用的組件，從而大大減少應用程序的最終大小。
所有 Vuetify 組件都附帶完善的文檔，并提供了清楚的示例。
?Vuetify（ https://vuetifyjs.com/en/ ）
Quasar 是 Java“一次編寫，隨處運行”哲學的 JavaScript 版本。它是一個通用的，基于 Vue 的框架，讓你可以使用相同的代碼庫為不同的平臺編寫應用程序。SPA、PWA、SSR 應用、混合移動應用或多平臺桌面應用，任君選擇！
它帶有出色的文檔和大批兼顧性能和響應性的組件。Quasar 自帶許多最佳實踐（HTML/CSS/JS 壓縮、緩存清除、tree-shaking、源映射、代碼分割與懶加載、ES6 轉換、代碼 linting、可訪問性等），因此你可以專注于應用程序的功能實現。它還提供了一個用來輕松搭建新項目的 CLI 工具。
?Quasar（ https://quasar.dev/ ）
Vue 是一個主要基于組件的框架，因此編寫優秀、高效的組件對所有開發人員來說都很重要，而 Storybook 可能就是非常趁手的工具。你可以用它在易用并隔離的環境中開發、管理和測試 UI 組件。它使開發人員能夠獨立于主應用程序創建組件，并在隔離的開發環境中以交互方式展示它們，而無需擔心特定于應用程序的依賴關系和需求。
Storybook 提供了大量的附加組件和靈活的 API，可根據需要自定義你的 storybook。你還可以導出為靜態 Web 應用程序，并將項目部署到 HTTP 服務器上。
?Storybook（ https://storybook.js.org/ ）
最近有很多關于 GraphQL 的討論。如果你很熟悉它，希望將其集成到 Vue 中，那么可以試試 Vue Apollo。這個庫是連接 Vue 和 GraphQL/Apollo 的一座橋梁，用起來順暢愉快。
?VueApollo（ https://vue-apollo.netlify.com/ ）
Eagle.js 是一個使用 Vue 構建的功能強大、靈活且獨特的幻燈片系統。你可以在演示中創建易復用的組件、幻燈片和樣式。它還支持動畫、主題和交互式小部件，非常適合制作網絡演示內容。Eagle.js 有一個簡單且可調整的 API，因此你可以自由地制作所需的幻燈片。
這個庫最方便的一項功能之一是將一張幻燈片放在單獨的一個文件中，然后就能在其他幻燈片中重復使用了。你還可以將特定演示文檔中的幻燈片導入另一個文檔里。在這樣強大的工具幫助下，你就可以制作復雜、可交互且吸引人的演示文稿。
?Eagle.js（ https://github.com/zulko/eagle.js/ ）
另外 5 款值得關注的 Vue 工具和庫
現在有了這么多工具，你就可以構建一些精彩的項目了：網站、應用程序、庫、插件……能做的事情還不止這些。去做出一些優秀的作品吧！
我個人的知識見聞自然是有限的，我可能會漏掉一些優秀的工具和庫，所以還有哪些出色的產品就請在評論里推薦吧。
英文原文： https://www.sitepoint.com/vue-js-tools-libraries/
過上一章的內容，現在網頁文件中，我們還須要去除的就是html代碼了。
下面我們要研究一下html代碼的主要特點，不管什么樣的HTML代碼，他們均被左右尖括號所包圍，就像這個樣子<代碼>，因此，我們就有了去除的方法，把括號中的內容和聯通括號一起去除掉，就可以了。
下面開始，根據我們的想法，可以寫出，下面這樣的主程序
看上圖，再上一張定義的函數，我們把它移動到了通用函數庫中
第21行，這是我們新增的代碼，執行完這個代碼，就去除掉了HTML標記，剩下的就應該是純文字內容了。在這里，我們定義了一個函數，名字叫做去除html代碼。
下面我們研究一下，這個函數的內容，如下圖
因為使用了正則表達式，因此，在程序運行前，必須導入模塊re
第3行，導入我們所需要的re模塊，我們想用到正則表達式
第5行，定義函數
第6行，用右尖括號分格隔成列表
第8行，對列表元素進行遍歷
第9行，使用正則挑出有效的內容，其實就是去除以前孤立的右尖括號的內容。
第10行，對有效的內容進行左尖括號分隔
第11行，左尖括號前面的內容就是有效的文字內容
完整的程序如下
下面我們對程序進行下測試，在上一章中，程序運行后得到如下的內容（內容太長，只截取一小部分）
本次程序改造后，運行得到下面的內容
從上面兩個圖片可以看出，我們確實把文字內容提取出來了。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
