创建并运行 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 提供的功能来管理和访问您的项目。