How to build vue in vscode

With the continuous development of front-end technology, more and more companies and teams are beginning to adopt the Vue framework for development. The excellent design and powerful ecosystem of the Vue framework have become the reasons why more and more developers choose Vue. In the actual project process, an efficient development environment can greatly improve development efficiency. This article will introduce the actual process of building a Vue project in VSCode through demo demonstration.

Environment preparation

Before you start building a Vue project, you must ensure that necessary software such as Node.js, Vue-CLI, and VSCode are installed. If it has not been installed yet, please refer to the following steps to install it.

Install Node.js

Node.js is a JavaScript runtime environment based on the Chrome V8 engine, which allows JavaScript to run on the server side. This article uses Node.js version 14.17.3, and the download address is https://nodejs.org/en/download/.

Install Vue-CLI

Vue-CLI is an official scaffolding tool that can help us quickly build Vue projects. Enter the following command in the terminal or command line to install:

# 全局安装Vue-CLI
npm install -g @vue/cli

Install VSCode

VSCode is a lightweight and powerful cross-platform code editor that supports multiple programming languages. The download address is https://code.visualstudio.com/.

Build the project

After installing the necessary software, we can start building the Vue project. Enter the following command in the terminal or command line to create a project:

# 创建项目
vue create demo

Among them, demo is the project name, which can be modified according to the actual situation. After creating the project, you will enter the following interface:

Here we can choose to use default settings or manual configuration options. Manual configuration options include the following:

• Select the Vue version, including 2.x and 3.x versions;
• Whether to use Babel and TypeScript;
• Whether to use code standardization tools such as ESLint and Prettier;
• Whether to use common plug-ins such as Vue Router and Vuex.

We can set it according to actual needs, press Enter after completion and wait for the project creation to be completed.

After the project is created, we can use VSCode to open the project directory. Select "File" → "Open Folder" in VSCode, find the demo folder we just created and open it.

Run the project

After opening the project in VSCode, we can enter the project directory through the terminal or command line and run the project. Enter the following command in the terminal or command line:

# 进入项目目录
cd demo

# 运行项目
npm run serve

After entering the items, a local development server will be started and the following information will be output:

 DONE  Compiled successfully in 4311ms                                                                        14:32:18

  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.0.9:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

Access http://localhost in the browser :8080/, we can see the Vue project page we just created.

Debugging Project

When developing a Vue project, debugging is a very important link. As an excellent code editor, VSCode provides rich debugging functions to facilitate debugging during the development process. Next, we will introduce how to debug the Vue project in VSCode.

First, open the "Debug" panel in VSCode. Select the "Launch.json file created" option in the "Launch and debug" drop-down list.

Next, select the Vue project in the pop-up window:

After selecting the Vue project, VSCode will be automatically created A launch.json file populated with a default debug configuration.

Now we can open a .vue file in VSCode and select a breakpoint on the left side of it. Then, visit http://localhost:8080/ in the browser and operate the functions on the page to trigger the breakpoint.

Summary

This article outlines the actual project process of building Vue in VSCode. We introduce the basic process in actual development from environment preparation, project creation, running the project to debugging the project, and use demonstrations and screenshots to allow readers to better understand the process of building actual Vue projects.

To become a Vue development master, in addition to mastering technology and tools, you also need continuous learning and practice. This article is just a simple introductory guide. I hope readers can continue to learn and explore more features and functions of the Vue framework based on this.

The above is the detailed content of How to build vue in vscode. For more information, please follow other related articles on the PHP Chinese website!