How to start a vue project using vscode configuration

Note: This is the configuration of version 1.2.

1. Installation of the vetur plug-in

This plug-in is a highlighting plug-in for the basic syntax of vue files. Enter vetur in the plug-in window and click to install the plug-in. After installation, click File->Home Options->Settings Open the settings interface and add configuration on the right side of the settings interface

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

2. Installation of eslint plug-in

eslint intelligent error detection plug-in plays a great role in specific development and can Help us find errors in a timely manner. As for installation, also open the plug-in extension window and enter eslint and click to install the plug-in. After installation, you also need to configure it. Configure it in the same place as the vetur plug-in

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

The configuration of the vetur and eslint plug-ins is as shown below:

Import the project and compile

1. Import the project

Download the vuestic-admin project from github, pull it locally and open VSCode Direct file -> Open the folder to import the project, Ctrl shift Y to call out the console, enter npm install in the console terminal to add package dependencies

If npm is not installed, please install it first npm.

2. Run the project

Also execute npm run dev at the end to start running the project. This command will automatically run the project on the browser. The running result is as shown in the figure below, which means the configuration is successful. .

Related tutorial recommendations: vscode tutorial

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