Vue overview and environment installation

Vue overview and environment installation

1. Separation of front and back ends

  Front-end and back-end separation is a kind of software architecture. Its core idea is to deploy front-end project (Node.js service) and back-end project to different servers independently. The front-end project then requests the server-side project Restful interface through Ajax to realize data interaction.

Front-end and back-end separation is to write the front-end code and back-end code of a project separately. Why do this? What are the problems if the front-end and back-end separation methods are not used?

  In traditional Java Web development, the front-end is developed using JSP. JSP is not independently completed by back-end developers. It requires front-end developers to write a set of static HTML pages, and then hand over the pages to back-end programmers to use JSP (Java Server Page) to render the back-end data, which requires the front-end and back-end personnel to communicate frequently about the data interface, page style and request method. If the front-end data is loaded abnormally, the front-end and back-end developers also need to fix it together. The efficiency of this development method is extremely low, and the coupling of the front-end and back-end codes is too high . Using the front-end and back-end separation method for development can perfectly solve this problem.

  In the front-end and back-end separation mode, the front-end only needs to write the client code independently, and the back-end only needs to write the server code independently to provide the data interface. The front-end accesses the data interface of the back-end through Ajax requests, and displays the data of the model layer to the view layer. Front-end and back-end developers only need to agree on interface documents (URL, parameters, data types, etc.) in advance, and then develop them independently . The front-end can be tested with custom data, and it does not need to depend on the back-end at all. The back-end can be tested through browsers or Postman tools, and it does not need to rely on the front-end ( independent testing ). Finally, the front-end and back-end project integration can be completed. The decoupling of front-end and back-end applications is realized, which greatly improves the development efficiency. The structure of front-end and back-end separation is as follows:

Note: The separation of front-end and back-end is to split a single application into two independent applications. The front-end application is responsible for data display and user interaction, and the back-end application is responsible for providing data processing interfaces. The two exchange data through JSON format.

Projects that use front-end and back-end separation architectures often have front-end engineers and back-end engineers in the project team. As a back-end developer, we no longer need to write pages in the project, just write to the controller (Controller) to return JSON format data, and finally deploy the project to the server. The front-end project mainly contains some HTML, JavaScript, pictures and other resources. If you want to run independently, you need to use some front-end frameworks based on Node.js.

2. Vue.js overview

​ Vue is a progressive JavaScript framework. 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, which is not only easy to use, but also easy to integrate with third-party libraries or existing projects. On the other hand, when combined with modern tooling and various supporting libraries, Vue is also fully capable of driving complex single-page applications .

A single page application (Single Page web Application, referred to as SPA) means that the entire application has only one page , and the client page dynamically updates the content of the page through interaction with the server.

advantage:

1. In line with the front-end and back-end separation work mode: Single-page applications can be combined with Restful, which is in line with the front-end and back-end separation development;

2. Good user experience: the application does not have page jumps, all are partially refreshed, and the overall page is smoother;

3. Reduce the pressure on the server side: because it is a partial refresh, the pressure on the server is less;

4. Multi-platform sharing: Both the mobile terminal and the computer terminal can share the server interface. Interface sharing cannot be achieved by passing value by scope;

Disadvantages: SEO is difficult. When searching for a single-page application in SEO, the page searched may be empty <div>. It takes a long time to render the home page. The home page needs to load multiple requests at a time, and the rendering time may be relatively long.

3. MVVM layering idea

Vue.js uses the MVVM layering idea commonly used in the front end .

• View: View is the view layer, which is the user interface. The front-end is mainly constructed by HTML and CSS. In order to display the data of the ViewModel or Model layer more conveniently, various front-end and back-end template languages ​​have been produced, such as FreeMarker, Thymeleaf, etc., and major MVVM frameworks such as Vue.js, AngularJS, EJS, etc. also have their own built-in template languages ​​for building user interfaces;

• ViewModel: Middleware that connects views and data, Vue.js is the implementer of the ViewModel layer in MVVM , which performs two-way data binding with the View layer upwards, and requests data interaction with the Model layer downwards through interfaces;

• Model: Model refers to the data model, which generally refers to various business logic processing and data operations performed by the backend, mainly around the database system. The difficulty here mainly lies in the need for unified interface rules with the front-end agreement;

In the MVVM architecture, data and views are not allowed to communicate directly, only through ViewModel, and ViewModel defines an Observer. ViewModel can observe changes in data and update the content corresponding to the view. ViewModel can listen to the view changes, and can notify the data changes.

View state and behavior are encapsulated in ViewModel , this encapsulation allows ViewModel to completely describe the View layer. Because of the two-way binding, the content of the ViewModel is displayed in the View layer in real time, which is exciting because the front-end developer no longer has to manipulate the DOM to update the view inefficiently and cumbersomely.

4. Environment Installation

4.1 Node.js installation

Node.js encapsulates the Chrome V8 engine, so that JavaScript can run independently from the browser environment. Currently, the front-end market uses Node.js-based frameworks instead of using Node.js directly. The reason why the front-end project can run independently is with the help of Node.js ;

Download node-v16.14.0-x64.msi from the official website, and click the Next button for all processes. The npm tool is automatically installed after Node.js is installed. Some components can be installed through npm , and the effect is similar to yum in Linux. When using Node.js, not everything can be downloaded, some are components provided by third parties, and some are plugins. When you need to use these things, you npm installcan .

Check node and npm versions with node -vand :npm -v

4.2 Install npm Taobao mirror

It is relatively slow to use npm to download resources in China. You can use domestic mirrors to improve the download speed. Here we use the Taobao image to operate, and enter the command on the command line to install:

npm install -g cnpm --registry=https://registry.npm.taobao.org

After the operation is completed, use the cnpm command to check whether the installation is successful, and the following information will be displayed if the installation is successful.

Note: npm install xxxThe be replaced cnpm install xxxwith .

4.3 Install webpack

webpack is a project management tool in front-end development. This is similar to what Maven does when we develop Java.

Enter at the command line:cnpm install -g webpack webpack-cli

Note: where -gindicates global installation, and installation is no longer required in the future . If there is no -g, it means that it is only used in the current directory [the directory where the command is run]. If the project is rebuilt, it needs to be reinstalled if the folder is changed.

4.4 Install vue/cli

Vue-cli is a client-side tool for Vue.js. Through Vue-cli, Vue project scaffolding functions can be quickly built.

Type in the command linecnpm install -g @vue/cli

4.5 Install the Vue.js plugin

Open IDEA and install the vue.js plugin. Menu settings → plugins → search for vue → Vue.js click install → restart idea after installation

You can also download and install offline: https://plugins.jetbrains.com/plugin/9442-vue-js/versions

5. Create a Vue.js project

Step 1: Select the project type

Click on the menu File → New Project → Static Web → Vue.js

Step 2: Fill in the project information

1. Project name: Project name. The project name does not support uppercase;
2. Project location: the path where the project is stored;
3. Node interpreter: Node tool. Installing node.js will automatically load the native Node tool. If it is not installed, it will be red none, indicating that there is no node environment;
4. Vue Cli: Vue tools. If the Vue tool is installed, the following information will be prompted: ~\AppData\Roaming\npm\node_modules\@vue\cli;

Wait and initialize the project. Every time you create a Vue project, you need to initialize the project information through the Vue/cli scaffolding.

Step 3: Run the project

Enter the npm run serverun . After the operation is completed, the URL information will be displayed on the console, which occupies port 8080 by default.

When accessing the project, entering http://localhost:8080 in the browser will display the following page: