.NET Magazine國際中文電子雜誌 作 者：許薰尹 審 稿：張智凱 文章編號： N240125702 出刊日期：2024/1/24 要在Vue.js中進行例外錯誤處理可以透過全域（Global）或組件等級的方式來實現，以確保網站應用程式遇到不預期的例外錯誤時能夠適當地處理，不讓網站應用程式掛掉。在這一篇文章中，我們將介紹在Vue.js應用程式中如何處理例外錯誤。 建立專案 首先在命令提示字元下指令建立專案，參考以下語法： npm init vue@latest 輸入上述指令之後，接下來會出現一些對話，以讓你命名專案，並詢問是否加裝插件（plugin），本文選用的選... [更多...]

.NET Magazine國際中文電子雜誌 作 者：許薰尹 審 稿：張智凱 文章編號： N231225602 出刊日期： 2023/12/27  這篇文章中將延續本站《Vuetify簡介 - 1》一文的情境，介紹如何在Vue.js應用程式中使用Vue組件框架「Vuetify」來設計Vue組件。 路由  為了讓導航抽屜元件（Navigation Drawers）能夠導覽到指定的頁面，需要修改路由程式碼，例如我們想要在專案中增加一個「BookList.vue」組件，在「index.js」檔案中加入以下程式碼，設定「path」：   // Compos... [更多...]

.NET Magazine國際中文電子雜誌 作 者：許薰尹 審 稿：張智凱 文章編號： N231225601 出刊日期： 2023/12/13 設計網站應用程式時，若要從無到有來撰寫網頁UI元素需花費相當的時間，選擇一個好的UI框架來輔助開發能省掉許多瑣碎的工夫。在本文撰寫的當下，針對目前在Github網站得到的按讚星星數量，適用於VUE較常見的組件框架如下，由得到的星星數量高到低來排列依序為：  Vuetify 37.9k  Element 53.7k （vuejs 2.0） Element-plus 21.3k （vuejs 3.0）  ... [更多...]

.NET Magazine國際中文電子雜誌 作 者：許薰尹 審 稿：張智凱 文章編號：2023/10/4 出刊日期：N231025401 在本站《使用VisualStudio開發Vue.js應用程式》一文中，介紹了如何使用Visual Studio 2022開發工具的「Vue and ASP.NET Core（Preview）」範本，在一個整合的環境內，同時設計前端Vue.js，以及後端ASP.NET Core Web API應用程式。預設「Vue and ASP.NET Core（Preview）」範本中整合了Vue CLI來開發Vue.js應用程式，不過，Vue CLI已經進入維... [更多...]

.NET Magazine國際中文電子雜誌 作 者：許薰尹 審 稿：張智凱 文章編號：N230725101 出刊日期： 2023/7/12 當使用Visual Studio 2022開發工具設計Vue.js應用程式時，現在有一個新的專案範本，可以協助程式設計人員，快速地利用範本程式碼，建立前端Vue.js，以及後端Web API專案，這篇文章將介紹如何使用建立Visual Studio 2022開發工具Vue.js專案，以及如何透過範本專案來客製化程式碼。 安裝 Vue.js開發環境 要使用Visual Studio 2022開發工具進行Vue.js... [更多...]

.NET Magazine國際中文電子雜誌 作 者：許薰尹 審 稿：張智凱 文章編號： N230424801 出刊日期： 2023/4/5 Pinia 是Vue.js應用程式的狀態管理解決方案，允許你將應用程式的狀態儲存在全域的「store」之中，如此Vue.js應用程式所有的組件（Component）都能夠讀到共同的狀態資料。當「store」之中的狀態值變動時，所有使用到此狀態值的組件都可以得到更新的值。例如，當使用者登入網站，你可以將使用者驗證資訊儲存在「store」之中，那麼網站中所有組件都可以得到目前使用者的身份，以便於控管應用程式授權。 Pinia是用來取代Vuex插件的，Pin... [更多...]

.NET Magazine國際中文電子雜誌 作 者：許薰尹 審 稿：張智凱 文章編號： N230424802 出刊日期： 2023/4/19 這篇文章中將延續本站《Pinia簡介 - 1》一文的情境，介紹如何在Vue.js應用程式中使用Pinia進行狀態共用。讓我們從設計Getters開始談起。 設計Getters 「Getters」類似計算屬性，可傳回Store中計算而來的狀態資料，使用上有一個限制，無法傳遞參數到「Getters」。叫用「defineStore」定義狀態時，可以利用「getters」屬性來定義之。以下範例程式碼修改「BookStore.js」，加入一個名為「count... [更多...]

.NET Magazine國際中文電子雜誌 作 者：許薰尹 審 稿：張智凱 文章編號： N230124502 出刊日期： 2023/1/25 本文將延續本站《Vue.js <script setup> - 1》一文的情境，介紹。Vue 3.2版新增加的<script setup>語法來簡化組合式API（Composition API）「setup」函式的基礎程式碼。這篇文章將介紹如何在<script setup>區段之中定義Props、事件，以及匯出組件成員。   使用defineProps定義屬性 在&l... [更多...]

.NET Magazine國際中文電子雜誌 作 者：許薰尹 審 稿：張智凱 文章編號： N230124501 出刊日期： 2023/1/11 有別於Options API，Vue 3新增另一種單文件組件設計方式—組合式API（Composition API），雖有許多優於Options API的特色，但程式仍是稍為囉嗦，例如要在「setup」函式明確回傳「ref」或「reactive」變數，才可以在模板（Template）之中使用。Vue 3.2版新增加的<script setup>語法，又可簡化組合式API「setup」函式的基礎程... [更多...]

.NET Magazine國際中文電子雜誌 作 者：許薰尹 審 稿：張智凱 文章編號： N220323501 出刊日期： 2022/3/2 在這篇文章中，將要介紹如何使用TypeScript與axios插件在Vue 3的應用程式中送出AJAX請求從遠端REST API取得資料，搭配Vue Router來顯示詳細資料。 建立vue專案 從建立專案開始，在作業系統命令提示視窗輸入使用以下指令，將專案命為「tscrud」後按下「Enter」鍵： vue create tscrud 選擇「Manually select features」項目手動安裝，並... [更多...]