Home>Article>Web Front-end> How to run vue project on vscode

How to run vue project on vscode

藏色散人
藏色散人 Original
2021-09-13 11:06:27 55762browse

How to run the vue project on vscode: 1. Use vue-cli scaffolding to build an empty vue project; 2. Open VSCode to download the vetur plug-in; 3. Download and install the eslint plug-in; 4. Open the vue project and use git Just iterate on the project.

How to run vue project on vscode

The operating environment of this article: Windows7 system, vue2.5.17 version, DELL G3 computer

How to run the vue project on vscode?

##Preface

以前都是用webstorm编写前端代码,最近开始尝试使用VSCode来写,目前还是有些懵逼的,一步步将使用流程写下来便于之后自己再次配置。

Specific process:

1: First We still need to use vue-cli scaffolding to build an empty vue project, which I won’t go into details.

2: Open VSCode to download the vetur plug-in

Click the circled icon on the left to open the extension plug-in. Search for the

veturplug-in in the search box at the top to download and install it.After downloading and installing, you will see it in the extension list. For example, mine is version 0.29.1
Then you need to open the setting.json file for configuration:

"emmet.syntaxProfiles": { "vue-html":"html", "vue":"html" },

How to run vue project on vscode

3: Download and install the eslint plug-in, which is an intelligent error detection plug-in

Click the circled icon on the left to open the extension plug-in, and search for the

eslintplug-in in the search box at the top Just download and install.After downloading and installing, you will see it in the extension list. For example, mine is version 2.1.13.
Then you need to open the setting.json file for configuration:

"eslint.validate": [ "javascript", "gavesciptreact", "html", "vue" ], "eslint.options": { "plugins":["html"] },

How to run vue project on vscode

4: Open the empty vue project we built in the first step

Enter in the terminal:

npm install, first download the corresponding dependencies.Last input:
npm start, run the project:
How to run vue project on vscodeOpen the corresponding address in the browser and see the picture below, which means the operation is successful:

How to run vue project on vscode

5: Use git for project iteration

For details, please see how VSCode uses git

Recommended learning: "

vue tutorial"

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

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn