建立並運行 Nuxt.js 專案

什麼是 Nuxt.js？

Nuxt.js 是一個基於 Vue.js 的開源框架，用於構建伺服器渲染的 Vue.js 應用程式。它提供了豐富的功能，如伺服器端渲染（SSR）、靜態站點生成（SSG）、自動代碼拆分、強大的路由系統等，使得開發者可以更高效地構建現代化的 Web 應用。

Nuxt.js 的主要特性和優勢

• 伺服器端渲染（SSR）：提高了頁面加載速度和 SEO 效能。
• 靜態站點生成（SSG）：預渲染靜態頁面，提高效能和用戶體驗。
• 自動代碼拆分：只加載當前頁面所需的 JavaScript 代碼，優化效能。
• 內建路由：基於文件系統的路由，無需額外配置。
• 模組化：通過模組擴展功能，輕鬆整合第三方庫和服務。
• 強大的生態系統：Nuxt.js 擁有豐富的插件和模組支持，使得開發更加便捷。

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

使用 ServBay 建立並運行 Nuxt.js 專案

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

建立 Nuxt.js 專案

1. 初始化專案

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

   cd /Applications/ServBay/www
   npx create-nuxt-app servbay-nuxt-app

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

   ? Project name: servbay-nuxt-app
   ? Programming language: JavaScript
   ? Package manager: Npm
   ? UI framework: None
   ? Nuxt.js modules: Axios
   ? Linting tools: ESLint
   ? Testing framework: None
   ? Rendering mode: Universal (SSR / SSG)
   ? Deployment target: Server (Node.js hosting)
   ? Development tools: jsconfig.json (Recommended for VS Code)

2. 安裝依賴

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

   cd servbay-nuxt-app
   npm install

修改 Nuxt.js 專案輸出內容

1. 修改 pages/index.vue 文件

   打開 pages/index.vue 文件，修改內容使網頁輸出 "Hello ServBay!":

   <template>
     <div>
       <h1>Hello ServBay!</h1>
     </div>
   </template>
   
   <script>
   export default {
     name: 'IndexPage'
   }
   </script>
   
   <style>
   div {
     text-align: center;
     margin-top: 50px;
   }
   </style>

進入開發模式

1. 運行開發伺服器

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

   npm run dev -- --port 8585

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

2. 配置 ServBay 主機反向代理

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

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

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

3. 訪問開發模式

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

構建生產版本

1. 構建生產版本

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

   npm run build
   npm run export

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

2. 設置靜態文件服務

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

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

3. 訪問生產模式

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

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