Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”

Author’s other platforms:

| CSDN:blog.csdn.net/qq_4115394…

| the nuggets: juejin. Cn/user / 651387…

| zhihu: www.zhihu.com/people/1024…

| GitHub:github.com/JiangXia-10…

| public no. : 1024 notes

This article is about 1,720 words and takes eight minutes to read

1 introduction

Recently, the old project of the company has been reconstructed to separate the front and back ends. The front end uses vue.js front-end framework, so vue.js is in contact with the company.

Vue. Js is a popular JavaScript MVVM(Model-view-ViewModel) library, which is built with the idea of data-driven and componentization. Compared to other front-end frameworks, vue.js provides a cleaner and easier to understand API, making it easy to get up and running quickly. Vue.js is different from previous jQuery manipulations of the DOM in that vue.js is data-driven and does not require manual manipulation of the DOM. It binds DOM to data through some special HTML syntax. Once the binding is created, the DOM is kept in sync with the data and updated whenever the data is changed.

Because of the work required to use VUE, I found that VUE is actually better. So prepare to write some articles to record some problems and experiences in learning VUE. Vue released version 2.x in October 2016. Version 2.0 has made a lot of changes from version 1.0 and deprecated many apis, so there are still some differences in the usage process. The version I’m using here is the 2.x version

2 prepare

As with any programming language, using VUE first requires some setup and configuration of the environment.

Install Node.js first. Download and install Node. js from the node.js website. After the installation is complete, open the command line tool (win+r, then enter CMD) and enter Node -v, as shown in the following figure. If the corresponding version number appears, the installation is successful.

After downloading and installing Node. js from the official website, the NPM (package management tool) is already installed. You can run the NPM -v command to check whether the NPM is successfully installed. In addition, it should be noted that the version of NPM should be higher than 3.X. x due to the rapid iteration of version update, so as not to have any impact on the subsequent.

Because some resources of NPM are shielded or foreign resources, it often leads to the failure of installing dependency packages with NPM, so we also need the domestic mirror of NPM — CNPM. On the cli, enter NPM install -g CNPM – registry=registry.npm.taobao.org and wait. After the installation is complete, run the CNPM -v command to check whether the installation is successful. If the version number is displayed, the installation is successful.

Then install Webpack (an open source front-end packaging tool), open the command line tool and enter: CNPM install webpack -g. After the installation is complete, enter webpack -v as shown in the following figure. If the corresponding version number appears, it indicates that the installation is successful.

Then install vUE – CLI scaffolding build tool, open the command line tool and enter: CNPM install vue-cli -g, after the installation is complete, enter vue -v (note that there is a capital “V”), as shown in the following figure, if the corresponding version number appears, it indicates that the installation is successful.

Now that you have the environment and tools you need for your VUE project, you can use the VUE-CLI scaffolding tool to build your VUE project.

3 of actual combat

Create a folder on your local hard drive to create the project, select it according to your situation, then run the CD command to go to the folder path, and use the following command to build the project:

Vue init Webpack VueDemoCopy the code

Once created, it looks like this.

Then run the NPM install command to install the dependencies required by the project. If the installation is slow or unsuccessful, you can use the CNPM install command. However, using the CNPM command may cause dependency loss. Then execute the NPM rundev command to start the project:

After the project is started, it will return an address. Copy and enter the address in the browser address bar. The welcome page of vUE official website will appear, and a VUE project is completed.

In general, front-end project development has a corresponding editor. I used VS Code here. Open VS Code and then open the folder, find your project file and open it. Take a look at the vUE project directory and file structure:

How to create a new VUE page next.

Create a new HelloDemo. vue file in the Component directory. The HelloWorld file is generated by default when the project is created.

After creating the new component, configure the route in the index.js directory of the router route, and configure the helloDemo page component.

Run the NPM run dev command on the terminal. The project restarts and an address is generated, which you can click to open:

The welcome page opens by default:

Type Hello after the address bar to jump to the newly created HelloDemo page:

4 summarizes

That’s how to create a simple VUE front-end project. This is just an introductory introduction and demonstration of how to create a VUE project. Later, I will continue to learn about VUE and summarize the problems and lessons learned in the learning process. I have also written some articles about VUE in the past, as listed below. If you have any questions, welcome to discuss. In addition, all the actual combat article source will be synchronized to Github, there is a need to welcome the use of download.

Finally, if you think this article is good, just click “like” and “recommend” to more people.

Today’s recommendation

SpringBoot develops Restful interfaces to implement CRUD functions

Postman interface test graphic tutorial

ElasticSearch: SpringBoot: ElasticSearch

How to play Git

SpringBoot integrates JPA for data access