nodejs构建vue_如何使用NodeJS开发和构建Vue.js应用

nodejs构建vue

There are so many ways we can build Vue apps and ship for production. One way is to build the Vue app with NodeJS or Java and another way is to build the Vue.js and serve that static content with the NGINX web server. With NodeJS we have to deal with the server code as well, for example, you need to load index.html page with node.

我们可以通过多种方式来构建Vue应用并交付生产。 一种方法是使用NodeJS或Java构建Vue应用程序，另一种方法是构建Vue.js并通过NGINX Web服务器提供该静态内容。 使用NodeJS，我们还必须处理服务器代码，例如，您需要使用node加载index.html页面。

In this post, we will see the details and implementation with the NodeJS. We will go through step by step with an example.

在本文中，我们将看到NodeJS的详细信息和实现。 我们将逐步举例。

• Introduction

  介绍

• Prerequisites

  先决条件

• Example Project

  示例项目

• Just Enough NodeJS For This Project

  足够用于该项目的NodeJS

• Development Phase

  开发阶段

• How To Build Project For Production

  如何建立生产项目

• Summary

  摘要

• Conclusion

  结论

介绍 (Introduction)

Vue.js is a Progressive JavaScript Framework for building web apps and it doesn’t load itself in the browser. We need some kind of mechanism that loads the index.html (single page) of Vue application with all the dependencies(CSS and js files) in the browser. In this case, we are using node as the webserver which loads Vue assets and accepts any API calls from the Vue UI app.

Vue.js是一个用于构建Web应用程序的渐进式JavaScript框架，它不会在浏览器中加载自身。 我们需要某种机制来加载Vue应用程序的index.html (单页)以及浏览器中的所有依赖项(CSS和js文件)。 在这种情况下，我们将节点用作加载Vue资产并接受来自Vue UI应用程序的所有API调用的Web服务器。

Vue with nodejs Vue与Node.js

If you look at the above diagram all the web requests without the /api will go to Vue routing and the Vue Router kicks in and loads components based on the path. All the paths that contain /api will be handled by the Node server itself.

如果您查看上面的图，所有不带/ api的Web请求都将转到Vue路由，Vue路由器将启动并根据路径加载组件。 包含/ api的所有路径都将由节点服务器本身处理。

In this post, we are going to develop the Vue app with NodeJS and see how to build for production.

在本文中，我们将使用NodeJS开发Vue应用程序，并了解如何为生产而构建。

先决条件 (Prerequisites)

There are some prerequisites for this article. You need to have nodejs installed on your laptop and know-how Http works. If you want to practice and run this on your laptop you need to have these on your machine.

本文有一些先决条件。 您需要在笔记本电脑上安装nodejs并了解Http的工作原理。 如果要在笔记本电脑上练习并运行此程序，则需要在计算机上安装它们。

• NodeJS

  节点JS

• Vue CLI

  Vue CLI

• VSCode

  VSCode

• BootstrapVue

  BootstrapVue

示例项目 (Example Project)

This is a simple project which demonstrates developing and running Vue application with NodeJS. We have a simple app in which we can add users, count, and display them at the side, and retrieve them whenever you want.

这是一个简单的项目，演示了如何使用NodeJS开发和运行Vue应用程序。 我们有一个简单的应用程序，可以在其中添加用户，计数并在侧面显示它们，并在需要时检索它们。

Example Project 示例项目

As you add users we are making an API call to the nodejs server to store them and get the same data from the server when we retrieve them. You can see network calls in the following video.

添加用户时，我们正在对nodejs服务器进行API调用，以存储它们并在检索用户时从服务器获取相同的数据。 您可以在以下视频中看到网络通话。