初學者開發人員的Vue.js教程：學習基礎知識並使用此入門Vue結構

每當您開始在開發流程中使用新技術時，您可能會感到至少有點害怕。特別是在野外有無數的npm包裝的時候。混合和匹配的東西有時會耗費大量的時間和精力，而且通常令人沮喪。這是初學者開發人員的以下Vue.js教程發揮作用的地方。

什麼是Vue.js？你為什麼要關心？

Vue.js或Vue簡稱是用於構建用戶界面的JavaScript框架。與其他框架（如Angular或React）相比，Vue更平易近人，並沒有像學習曲線那樣陡峭。

Vue也是模塊化的，允許您將代碼拆分為可重用的組件。他們每個人都有自己的HTML標記，CSS和JavaScript代碼。

這個Vue.js教程的範圍是什麼？

這個簡短的Vue.js教程的目的是為您提供一些腳手架，您可以在其上構建和試驗Vue。我們將在WordPress儀錶板中查看Vue應用程序的基本設置。

（注意;我們不會在本指南中教您Vue本身，但是您可以在此處設置項目後繼續從官方指南中了解有關該框架的更多信息 – 您可以在完成後繼續進行實驗。）

我們要做的是使用Vue為WordPress插件使用預定義的模板。如果您想深入了解，可以在以下GitHub存儲庫中找到它：https：//github.com/abaicus/vue-wp-bootstrap。

Vue.js教程：先決條件

您應該已經在計算機上設置了一些內容以繼續遵循本指南：

首先，你需要一個LAMP堆棧 – 你可以在Windows或Mac上使用XAMPP，或者在Mac上使用Flywheel的Local，然後為自己設置一個全新的本地WordPress安裝。

確保您的計算機上安裝了NodeJS包管理器（npm）。您還需要通過終端安裝另外兩個軟體包 – Vue CLI和Vue模板初始化工具。像這樣：

$ npm install -g @ vue / cli $ npm install -g @ vue / cli-init

安裝這兩個依賴項後，需要將活動目錄更改為本地WordPress實例的wp-content / plugins目錄，然後在其中運行以下命令：

$ vue init abaicus / vue-wp-bootstrap my-vue-dashboard-plugin

接下來，系統將提示您回答有關項目設置的一些問題。

對於Build提示，請繼續選擇現在的第一個選項「Runtime + Compiler：為大多數用戶推薦」。

如果需要，可以啟用ESLint linter。它將檢測項目中的任何linting錯誤，但您現在不必擔心這一點。

Commit Lint和Pre-Commit Hook用於在向GitHub發送提交之前檢查您的提交消息和代碼 – 以保持一切整潔和格式良好。

完成後，您將看到一個或多或少看起來像這樣的終端：

您可以繼續按照屏幕上的說明進行操作。將目錄更改為新生成的插件目錄，然後運行終端提示中顯示的命令。這將使您的應用程序啟動並運行，等待代碼內部的更改，並將Vue代碼轉換為JavaScript。

它有什麼作用？

不多。這只是一個顯示後端數據的基本應用程序。引擎蓋下的Vue並不多。您可以繼續進行插件儀錶板頁面並激活它。它將在您的管理員菜單中添加新頁面。導航到它後，您將找到一個包含兩個字元串的儀錶板頁面：

插件腳手架結構

我們來看看新生成的插件的文件結構。我們將忽略此Vue.js教程中的大多數配置文件，以便我們可以專註於應用程序的結構：

首先，我們有plugin.php文件，它是實際插件的入口點。在這裡，我們有主要的Plugin類。這是包含和運行應用程序的主要組件的位置。

接下來，有一個package.json文件，其中定義了所有依賴項和一堆其他項目信息。您可能感興趣的部分位於「腳本」欄位下。在那裡，您可以使用npm運行前綴運行所有命令。目前，重要的應該是npm run dev（構建應用程序以進行開發）和npm run build（一旦準備好部署應用程序進行生產，就應該運行）。其他命令與這兩個命令相鄰，或者做其他一些你現在不必擔心的事情。

在includes目錄中，有三個文件：

• rest.php類目前沒有做任何事情，但你已經有了一個結構來添加你的RestAPI路由
• assets.php類處理樣式和腳本入隊。在這裡，JavaScript文件被本地化以將起始數據從PHP傳遞到我們的Vue應用程序。目前，只發送了兩個文本，但您可以包含任何您想要的內容。
• admin.php文件是負責在儀錶板中添加新頁面並呈現實際插件頁面的文件。您會注意到應用程序本身只是兩個空的
  plugin_page（）函數內的標籤。那是因為JavaScript將在載入後處理應用程序的實際呈現。

在assets目錄中，您將找到另外四個目錄：

• src目錄 – 我們的Vue應用程序的源文件，我們將在稍後討論。
• scss目錄 – 我們生成CSS樣式表的SCSS樣式文件。
• js目錄 – 從我們在src目錄中的文件生成的轉換代碼。
• css目錄 – 來自SCSS文件的編譯樣式。

src目錄和Vue模板文件

在這個目錄中，有兩個文件：main.js和App.vue。 main.js文件是應用程序的入口點。它將Vue應用程序組件附加到具有相應id的DOM元素。

/ * jshint esversion：6 * / import Vue來自'vue'導入App來自'./App.vue'window.addEventListener（'load'，function（）{new Vue（{// eslint-disable-line no-new el：'＃mvdp-app'，組件：{App}，渲染：（h）=> h（App）}）}）

實際的應用程序標記位於App.vue模板中：

/ * jshint esversion：6 * /

您可以在上面的代碼段中看到我們正在使用我們在Assets類中本地化的字元串。 Vue的一個重要特性是組件的代碼整齊地組織成模板，腳本和樣式，使得理解結構變得容易。

就是這樣，你現在有了一個堅實的起點，無論你想用Vue.js進一步發展什麼！我希望這個Vue.js教程有所幫助。

…

不要忘記加入我們的速成課程，以加快您的WordPress網站。通過一些簡單的修復，您可以將載入時間減少50-80％：