VUE介绍

Vue.jsis a popular JavaScript library for building web application user interfaces and Visual Studio Code has built-in support for the Vue.js building blocks ofHTML,CSS, andJavaScript. For a richer Vue.js development environment, you can install theVolarandVolar for TypeScriptextensions that support Vue.js IntelliSense, code snippets, formatting, and more.

Note:Vue 2 support will end on December 31st, 2023so the use of theVeturextension isnot recommended. You will need todisable Veturto use Volar.

​

本教程

本教程通过Vite工具创建项目Vue.js 框架官网：vuejs.orgwebsite.

安装使用vue和vite之前需要先安装Node.js 和Npm.Node.jsnpm(Node.js package manager) 官方下载，安装node时自动安装npmNode.js downloads.

检查是否安装的命令node --versionandnpm --version.

运行命令，如果没有安装Vue，则提示安装。

npm create vue@latest

​

安装后的界面如下，尽量选择No。最小化安装过程。

​

按照提示， 到对应项目目录中。执行 npm install. npm run dev命令执行项目。在

cd npm install

npm run dev

浏览器输入http://localhost:5173显示如下：

打开VSCODE的方式，自动进入项目:

cd vue-projectcode .

Volar extension 安装扩展

系统建议安装扩展volar，选择install即可。

​

Volar界面如下

​

安装后，.vue文件显示。

​

IntelliSense智能代码补全

As you start typing inApp.vue, you’ll see smart suggestions or completions both for HTML and CSS but also for Vue.js specific items like declarations (v-bind,v-for) in the Vuetemplatesection:

​

and Vue properties such ascomputedin thescriptssection:

​

Go to Definition, Peek definition 查看定义和源代码功能

VS Code through the Volar extension Vue.js language service can also provide type definition information in the editor throughGo to Definition(F12) orPeek Definition(Alt+F12). Put the cursor over theApp, right-click and selectPeek Definition. APeek windowopens showing theAppdefinition fromApp.js.

​

PressEscapeto close the Peek window.

Hello World 最小变化

Let’s update the sample application to “Hello World!”. InApp.vuereplace the HelloWorld componentmsgcustom attribute text with “Hello World!”.

Once you save theApp.vuefile (Ctrl+S), restart the server withnpm run devand you’ll see “Hello World!”. Leave the server running while we go on to learn about Vue.js client side debugging.

Tip: VS Code supports Auto Save, which by default saves your files after a delay. Check theAuto Saveoption in theFilemenu to turn on Auto Save or directly configure thefiles.autoSaveusersetting.

​

Linting语法纠错

Linters analyze your source code and can warn you about potential problems before you run your application. The Vue ESLint plugin (eslint-plugin-vue) checks for Vue.js specific syntax errors, which are shown in the editor as red squiggles and are also displayed in theProblemspanel (View>ProblemsCtrl+Shift+M).

Below you can see an error when the Vue linter detects more than one root element in a template:

​

Debugging调试工具

You can debug client side Vue.js code with the built-in JavaScript debugger. Follow thisconversationto use Vite/Vue.js 3 project with VS Code using Microsoft Edge.

For Vue CLI, which isnow in maintenance mode, check outVue.js debugging in VS Coderecipe on the VS Code debuggingrecipessite to learn more.

Another popular tool for debugging Vue.js is thevue-devtoolsplug-in, which can be used regardless of the environment.

Other extensions 其他扩展

VScode会建议安装扩展。Volar is only one of many Vue.js extensions available for VS Code. Another recommended extension isVolar for TypeScript.

​

You can search in the Extensions view (Ctrl+Shift+X) by typing ‘vue’.

​

Extension likeVue VS Code Snippetscan be handy for Vue snippets. 代码片段（类似宏的功能）

​

There are also Extension Packs, which bundle extensions that other people have found useful for Vue.js development.

​