介紹
免責聲明
語言能力
安裝
Vue
Bundler
Optionals
Development
添加視圖群組件
Views
Components
動态頁面
從API擷取
使用者編輯
元件庫
部署方式
故障排除
常見問題
在本文中，我将逐漸向您介紹我使用的工具。您可以繼續學習，但是了解“我為什麼要這樣做”比“我在做什麼”更為重要。一個很好的建議是，嘗試在本教程中與我一起執行相同的步驟。然後，嘗試更改一些越來越大的東西。最後，在結尾您應該能夠自己再次進行所有操作。
首先，這确實很重要，所有這些都是我對開發的偏見。我們都有獨特的看待事物的方式。
Web開發是一個巨大而複雜的主題。這篇文章并不是要描述最簡單或最快的方法。
但是，這是我從小就喜歡的方法（出于我将要講到的原因），也是我最能詳細解釋的方法。
從這裡開始，我假設您對Java和Vue有基本的了解。我也不會詳細介紹如何安裝Node.js以及如何使用NPM。
讓我們從語言開始說起。
我已經使用Javascript大約十年了。它有很多貶低者，但過去和現在一直是我最喜歡的語言。
它易于使用，擁有最大的社群之一，并且可以支援龐大的應用程式。
當然，我也在用英語寫作。盡管這不是我的母語，但它被公認是國際語言。
Node.js已安裝在我的計算機上，是以我将使用NPM安裝所有JS依賴項。
開始新項目時，我總是做的第一件事是
這将建立<code>package.json</code>檔案。然後，我們手動建立<code>readme.md</code>和<code>.gitignore</code>檔案以及<code>src</code>目錄，這将在後面使用。
我的項目檔案系統的預覽
我喜歡Vue，這就是我最常使用的。安裝簡單
我比較喜歡Vue提供的子產品化模闆文法。但是，這不是浏覽器可以了解的本機JS。是以，需要對其進行轉換才能使用。
我為此使用Webpack。安裝不是那麼簡單，因為我們需要更多的子產品。首先，讓我們從Webpack本身及其CLI界面開始
然後，我們需要使用其編譯器添加處理Vue檔案的插件
最後，我們就可以編寫CSS，現在我們需要另一對插件來處理CSS代碼
現在，需要配置Webpack。這是最無趣的部分，但是我們需要了解此步驟以解決将來可能出現的問題。
Webpack可以使用名為的檔案進行配置<code>webpack.config.js</code>，是以讓我們建立它。
這是最低要求。如果需要擴充它，我們稍後再回來。
這樣就都結束了，我們隻需要在終端中運作
看到我的項目被完全壓縮和縮小。這将暫時失敗，但請放心。
這些工具不在本文讨論範圍之内。也許我會在下一個中詳細介紹。
我總是使用Eslint來檢查代碼中的潛在錯誤。
為了與我的個人配置一起使用，我運作
我嘗試測試我的代碼以趕上回歸，并確定我涵蓋了大多數用例。我使用AVA進行測試，使用NYC進行代碼覆寫。
這已經有很多步驟了，我還沒有寫一行代碼。所有這些看起來很多，但是請相信我，它将使您将來的運作速度更快。
比較細心的人會記得，在我的Webpack配置中，入口檔案是<code>./src/index.js</code>。是以，讓我們從那裡開始。
我們在其中建立一個<code>index.js</code>檔案，<code>src</code>并添加幾行代碼以調用Vue（帶有ESM）。
有了這個基本的JS檔案，我就可以安全地運作
用watch（在我們每次更改代碼時都會重新建構）以開發模式（較慢，但對錯誤的描述性更高）觸發Webpack。
這将<code>main.js</code>在<code>dist</code>目錄中建立一個新檔案。這是我的最終使用者将使用的檔案。
現在，我們建立一個<code>index.html</code>檔案（通常在<code>public</code>目錄中，但這并不是必然要求）。
在浏覽器中打開該檔案将不會顯示任何預期的結果，但這一切正常。到目前為止，這是我項目的狀态。
你Vue的檔案應該是視圖之間拆分（個人螢幕，如：菜單，關于…）群組件（撰寫你的意見，如：按鈕，頁腳…）
這兩種工作方式相同，但不具有相同的關注。是以，讓我們在其中添加兩個目錄（<code>views</code>和<code>components</code>）<code>src</code>進行排序。
讓我們從建立一個新視圖開始。這将是首頁，是以我将其稱為檔案<code>Home.vue</code>。
我在檔案名中使用了大寫字母，以表明它是Java等其他OOP語言中的類。
為了進入該視圖，我必須告訴我的Vue執行個體進行渲染。在<code>index.js</code>檔案中，我将添加必要的行。
為了擁有更多views，您需要在views之間進行導航，是以需要<code>vue-router</code>。我們暫時不談論它。
想象一下，我想為我想看的每部電影制作一張簡單的卡片（标題+文字），我不想重複每張卡片的代碼。一個很好的規則是DRY（Don’t Repeat Yourself）。
如果您寫兩次以上，則應将其分解為一處。
同樣，我<code>Film.vue</code>在<code>components</code>目錄中建立一個新檔案。
并在中使用它<code>Home.vue</code>。
正如您已經看到的那樣，我有3張卡片具有相同的标題和文本。
這不是我想要的。
如果我向card元件添加屬性并在主視圖中寫入資料，這将允許我為每張卡定義值。
設定好之後，應用于我的資料的任何更改都會反映在螢幕上。
例如，我可以從API擷取資料，或者允許使用者編輯頁面（或同時選擇兩個????）。
首先，我将從線上模拟API中擷取資料。為了做到這一點，我首先清空資料數組。
然後，根據Vue生命周期，<code>mounted</code>當視圖出現在螢幕上時，我可以使用函數執行代碼。
同樣，我可以允許使用者将新film添加到清單中。送出時會推送新條目的小型HTML表單将看到修改反映在視圖上。
當然，這将不會線上儲存任何内容，并且在重新加載頁面時所做的更改将丢失。
您可以通過将請求發送到将輸入儲存在資料庫中的伺服器來改進此示例。
我很懶。成為高效的開發人員通常意味着要懶惰。
除了建立所有元件之外，我們還可以使用現有的元件庫。這樣，我們可以将更多精力放在内容上，而不是如何正确設計日期選擇器。
由于使用Vue，是以我選擇了Vue相容庫Vuetify。
隻需很少的更改即可激活它<code>index.js</code>。
然後，我們可以在應用程式中的任何地方（在Film.vue）中使用它。
我最近最喜歡的發現之一是無伺服器。基本上，隻要您的應用程式是無狀态的（總是使用相同的參數傳回相同的結果），就不需要擁有複雜且始終在運作的伺服器。通過利用緩存和資源共享的功能，您可以将伺服器幾乎減少為零。
使用Vercel，我們隻需單擊幾下就可以自由托管，部署和提供服務。隻需要将該項目放在Github上即可。
You are using the runtime-only build of Vue where the template compiler is not available.（您正在使用Vue的僅運作時版本，而模闆編譯器不可用。）
您輸入的Vue錯誤。如果您還記得的話，有很多導入Vue的方法。預設情況下，<code>import "vue"</code>将調用該<code>vue.runtime.common.js</code>檔案。
在這裡的代碼中，将ESM與模闆配合使用（是以需要<code>vue.esm.js</code>）。
<code>[Vuetify] Multiple instances of Vue detected / this.$vuetify is undefined</code>（[Vuetify]檢測到多個Vue執行個體/ this。$ vuetify未定義）
您的應用程式和Vuetify沒有導入“相同”的Vue。如上所述，導入适合您的用法的Vue非常重要。一個好的解決方案是在webpack中建立一個别名。
使用它們時，為什麼不需要導入每個Vuetify元件？
當我們執行操作<code>Vue.use(Vuetify)</code>;在<code>index.js</code>中，它将在整個項目中将其激活。使用它們時，可能僅導入Vuetify元件。但這需要做一些超出本教程範圍的工作。
為什麼不使用X代替Y？
我習慣了。我相信您會找到我上面描述的任何工具或方法的更好替代方法。但是我熟悉他們。
歸根結底，deliver比無休止地學習新技術更重要。
我有什麼選擇？
Vue:
React
Angular
Svelte
Vuetify:
Material-UI
Any CSS frameworks:
Bootstrap
Bulma
Tailwind
Webpack:
Rollup
Skypack
Vercel:
Netlify
Heroku