How to start a Vue.js project

1. Node.js and Vue

1.1 Node.js

• Node.js is a JavaScript runtime environment based on the Chrome V8 engine. Node.js uses an event-driven, non-blocking I/O model.
• [Node is a development platform that allows JavaScript to run on the server, making JavaScript a scripting language on par with server-side languages ​​such as PHP, Python, Perl, and Ruby. Released in May 2009, it was developed by Ryan Dahl and is essentially a wrapper around the Chrome V8 engine.
• Node optimizes some special use cases and provides alternative APIs to make V8 run better in non-browser environments. The V8 engine executes Javascript very quickly and has very good performance. Node is a platform built on the Chrome JavaScript runtime, which is used to easily build fast-response and easily scalable network applications. Node uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, making it ideal for running data-intensive real-time applications on distributed devices.

Simply put, Node.js is equivalent to a compilation environment for our project, similar to the Jvm virtual machine required for Java language compilation. After installing Node.js, we can compile the Node project.

1.2 Vue.js

• Vue (pronounced /vjuː/, similar to view) is a progressive JavaScript framework for building user interfaces. Unlike other large frameworks, Vue is designed to be applied layer by layer from the bottom up. Vue's core library only focuses on the view layer, making it easy to integrate with third-party libraries or existing projects.
• The goal of Vue.js is to implement responsive data binding and combined view components through the simplest API possible
• Vue.js itself is not a full-featured framework - it focuses only on the view layer. Therefore it is very easy to learn and very easy to integrate with other libraries or existing projects. On the other hand, Vue.js can also perfectly drive complex single-page applications when used with relevant tools and supporting libraries.
• Features of Vue.js: Easy to use: Get started quickly based on HTML CSS JavaScript. Flexible: A simple and compact core and a progressive technology stack are sufficient to handle applications of any size. High performance: 20kb min+gzip runtime size, ultra-fast virtual DOM, and the most worry-free optimization

Simply put, Vue.js is an application framework, which is similar to the Spring series in Java. It can provide us with concise and efficient syntax, and can assist us in completing a front-end project efficiently and with quality. At the same time, because it is a lightweight framework, we only need to introduce its vue.js to use its syntax.

1.3 Overview of this article

In this article, the blogger will show you how to run the Vue.js project locally, and at the same time be able to deploy the Vue project independently on the server;

2. Run the front-end Vue project in the local dev environment

2.1 Download and install Node.js

Download address: https://nodejs.org/zh-cn/

Select the Windows version. It is recommended to select the long-term support version. Just click OK as prompted. After node.js is installed, the environment variables will be automatically configured. After the installation is complete, open the cmd window and enter the command: node --version. If the following content appears, it means the installation is successful, as shown in the figure:

2.2 Install front-end development tools

WebStrom and VsCode are often used on the front end. Here is an introduction to installing WebStrom:

1. Download WebStorm: Download address https://www.jetbrains.com/zh-cn/webstorm/download/

2. Install WebStrom. There are many tutorials on the Internet. You can search Baidu for details. If you don’t use it for a long time, we can try it for free for 30 days.

3. Import the project: Click file -> open -> select the specific front-end project, click ok -> wait for the index to be built

4. Common commands:

Build the project:

npm install

Start the service

npm run dev

Click the provided URL path and enter the browser to view the service, as shown in the figure:

2.3 Start using the command in package.json:

We can directly click the green arrow to start, as shown in the figure:

The picture shows Intellij IDEA. WebStrom is used in a similar way.

There are other commands as well, which I will not go into detail about. Students can search on Baidu if they need to know.

3. Deploy the front-end Vue project in the server environment

3.1 Deploy Node.js environment

• Refer to this tutorial https://blog.csdn.net/qq_37128049/article/details/104431768
• Just install Node, which comes with Npm.
• The Node environment variables configured in this tutorial are temporary environment variables and need to be rewritten when the project is restarted. If students need permanent environment variables, they can refer to the tutorial online;

3.2 Install the express-generator generator

Enter the following command to install the generator:

npm install express-generator -g

Create an express project:

express expressDemo (replace expressDemo with your own project name)

The expressDemo project directory is as follows:

Enter the project:

cd expressDemo

If you change it to your own project name, expressDemo here is changed to your own project name

Project Build:

npm install

Open our Windows development tool, use the npm build command to package the project, and copy the files under public to the public directory in expressDemo:

Enter the following command to run expressDemo:

npm start

Open the browser and enter: http://localhost:3000 to see the effect

If we deploy it on a server, if we want to see the effect on our own computer, we need to pay attention to the following: 1. Replace localhost with the server IP, and port 3000 with the actual port; 2. If the startup fails to access, please check whether the firewall is open to this port;

The above is how to start a Vue project. There are many other ways and students can find answers online. The simplest way is to directly copy all the codes and execute npm install+npm run dev to start successfully; if it is not a Vue project but a Node.js project, you can also use this method!

The above is the details of how to start a Vue.js project. For more information about starting a Vue.js project, please pay attention to other related articles on 123WORDPRESS.COM!