建立並運行 Vue.js 專案

什麼是 Vue.js？

Vue.js 是一個用於構建用戶界面的漸進式 JavaScript 框架。與其他大型框架不同，Vue 採用自底向上增量開發的設計。Vue 的核心庫只關注視圖層，不僅易於上手，還便於與第三方庫或既有專案整合。Vue 3 是 Vue.js 的最新版本，帶來了許多新特性和改進，包括更快的性能、更小的包大小和更好的 TypeScript 支援。

Vue 3 的主要特性和優勢

• 組合式 API：通過函數組合來組織邏輯代碼，使得代碼更易於維護和重用。
• 更快的性能：Vue 3 使用了 Proxy 對象來實現響應式系統，性能得到了顯著提升。
• 更小的包大小：通過 Tree-shaking 技術，Vue 3 的包大小比 Vue 2 更小。
• 更好的 TypeScript 支援：Vue 3 提供了更好的 TypeScript 型別定義，使得開發體驗更佳。
• 改進的組件生命周期：新的生命周期鉤子函數，使得組件的邏輯更加清晰和易於管理。

使用 Vue 3，可以幫助開發者更高效地構建現代化的、反應迅速的 Web 應用。

使用 ServBay 建立並運行 Vue 3 專案

在這篇文章中，我們將使用 ServBay 提供的 Node.js 環境來建立並運行一個 Vue 3 專案。我們將使用 ServBay 的『主機』功能來設置 Web 伺服器，並通過反向代理和靜態文件服務來實現專案的訪問。

建立 Vue 3 專案

1. 初始化專案

   首先，確保您已經安裝了 ServBay 提供的 Node.js 環境。然後，使用以下命令初始化一個新的 Vue 3 專案：

   cd /Applications/ServBay/www
   npm create vue@latest

   按照提示輸入專案名稱（建議命名為 servbay-vue-app），並根據需要選擇其他選項：

   ✔ Project name: … servbay-vue-app
   ✔ Add TypeScript? … No
   ✔ Add JSX Support? … No
   ✔ Add Vue Router for Single Page Application development? … Yes
   ✔ Add Pinia for state management? … No
   ✔ Add Vitest for Unit testing? … No
   ✔ Add an End-to-End Testing Solution? … No
   ✔ Add ESLint for code quality? … Yes
   ✔ Add Prettier for code formatting? … Yes
   ✔ Add Vue DevTools 7 extension for debugging? (experimental) … No

2. 安裝依賴

   進入專案目錄並安裝依賴：

   cd servbay-vue-app
   npm install

修改 Vue 專案輸出內容

1. 修改 src/App.vue 文件

   打開 src/App.vue 文件，修改內容使網頁輸出 "Hello ServBay!"：

   <template>
     <div id="app">
       <h1>Hello ServBay!</h1>
     </div>
   </template>
   
   <script>
   export default {
     name: 'App'
   }
   </script>
   
   <style>
   #app {
     font-family: Avenir, Helvetica, Arial, sans-serif;
     text-align: center;
     color: #2c3e50;
     margin-top: 60px;
   }
   </style>

進入開發模式

1. 運行開發伺服器

   啟動開發伺服器並指定端口（例如：8585）：

   npm run dev -- --port 8585

   這將會在本地啟動一個開發伺服器，並暴露端口 8585。

2. 配置 ServBay 主機反向代理

   使用 ServBay 的『主機』功能，通過反向代理來訪問開發伺服器。在 ServBay 的『主機』設置中，添加一個新的反向代理：

   • 名字：My first Vue dev site
   • 域名：servbay-vue-test.dev
   • 主機類型：反向代理
   • IP：127.0.0.1
   • 端口：8585

   詳細設置步驟請參考添加 Nodejs 開發的網站。

3. 訪問開發模式

   打開瀏覽器，訪問 https://servbay-vue-test.dev，實時查看專案。由於 ServBay 支援自定義域名以及免費的 SSL 證書，您將享受到更高的安全性。

構建生產版本

1. 構建生產版本

   當開發完成後，使用以下命令構建生產版本：

   npm run build

   構建完成後，生成的靜態文件將位於 dist 目錄中。

2. 設置靜態文件服務

   使用 ServBay 的『主機』功能，通過靜態文件服務來訪問生產版本。在 ServBay 的『主機』設置中，添加一個新的靜態網站：

   • 名字：My first Vue production site
   • 域名：servbay-vue-test.prod
   • 主機類型：靜態
   • 網站根目錄：/Applications/ServBay/www/servbay-vue-app/dist

3. 訪問生產模式

   打開瀏覽器，訪問 https://servbay-vue-test.prod，查看構建后的生產版本。通過 ServBay 的自定義域名和免費的 SSL 證書，您的網站將具有更高的安全性和可信度。

通過以上步驟，您成功建立並運行了一個 Vue 3 專案，並使用 ServBay 提供的功能來管理和訪問您的專案。