Create and Run a Vue.js Project

What is Vue.js?

Vue.js is a progressive JavaScript framework for building user interfaces. Unlike other large frameworks, Vue is designed for incremental development from the bottom up. The core library of Vue focuses only on the view layer, making it not only easy to pick up but also easy to integrate with third-party libraries or existing projects. Vue 3 is the latest version of Vue.js, bringing many new features and improvements, including faster performance, smaller bundle size, and better TypeScript support.

Main Features and Advantages of Vue 3

• Composition API: Organize logic code through function composition, making the code easier to maintain and reuse.
• Faster Performance: Vue 3 uses Proxy objects to implement the reactivity system, significantly improving performance.
• Smaller Bundle Size: Using Tree-shaking techniques, the bundle size of Vue 3 is smaller than Vue 2.
• Better TypeScript Support: Vue 3 provides better TypeScript type definitions, enhancing the development experience.
• Improved Component Lifecycle: New lifecycle hook functions make the component logic clearer and easier to manage.

Using Vue 3 can help developers build modern, responsive web applications more efficiently.

Create and Run a Vue 3 Project Using ServBay

In this article, we will use the Node.js environment provided by ServBay to create and run a Vue 3 project. We will use ServBay's "Host" feature to set up a web server and use reverse proxy and static file serving to access the project.

Create a Vue 3 Project

1. Initialize the Project

   First, make sure you have installed the Node.js environment provided by ServBay. Then use the following command to initialize a new Vue 3 project:

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

   Follow the prompts to enter the project name (recommended to name it servbay-vue-app) and select other options as needed:

   ✔ 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. Install Dependencies

   Navigate to the project directory and install dependencies:

   cd servbay-vue-app
   npm install

Modify Vue Project Output

1. Modify src/App.vue File

   Open the src/App.vue file and modify the content to output "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>

Enter Development Mode

1. Run Development Server

   Start the development server and specify the port (e.g., 8585):

   npm run dev -- --port 8585

   This will start a local development server and expose port 8585.

2. Configure ServBay Host Reverse Proxy

   Use ServBay's "Host" feature to access the development server through a reverse proxy. In the "Host" settings of ServBay, add a new reverse proxy:

   • Name: My first Vue dev site
   • Domain: servbay-vue-test.dev
   • Host Type: Reverse Proxy
   • IP: 127.0.0.1
   • Port: 8585

   For detailed setup steps, refer to adding a Nodejs development website.

3. Access Development Mode

   Open the browser and visit https://servbay-vue-test.dev to see the project in real-time. Since ServBay supports custom domain names and free SSL certificates, you will enjoy higher security.

Build Production Version

1. Build Production Version

   When development is complete, use the following command to build the production version:

   npm run build

   After building, the generated static files will be located in the dist directory.

2. Set Up Static File Service

   Use ServBay's "Host" feature to access the production version through static file service. In the "Host" settings of ServBay, add a new static website:

   • Name: My first Vue production site
   • Domain: servbay-vue-test.prod
   • Host Type: Static
   • Website Root Directory: /Applications/ServBay/www/servbay-vue-app/dist

3. Access Production Mode

   Open the browser and visit https://servbay-vue-test.prod to view the built production version. With ServBay's custom domain names and free SSL certificates, your website will have higher security and credibility.

By following the above steps, you have successfully created and run a Vue 3 project and used the features provided by ServBay to manage and access your project.