VSCODE中使用Vue3教程

VUE介绍

Vue.js is a popular JavaScript library for building web application user interfaces and Visual Studio Code has built-in support for the Vue.js building blocks of HTML, CSS, and JavaScript. For a richer Vue.js development environment, you can install the Volar and Volar for TypeScript extensions that support Vue.js IntelliSense, code snippets, formatting, and more.

Note : Vue 2 support will end on December 31st, 2023 so the use of the Vetur extension is not recommended. You will need to disable Vetur to use Volar.



本教程

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

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

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

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

复制代码
npm create vue@latest

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

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

复制代码
cd <your-project-name>
npm install

npm run dev

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

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

复制代码
cd vue-project
code .

Volar extension 安装扩展

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

Volar界面如下

安装后,.vue文件显示。

IntelliSense智能代码补全

As you start typing in App.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 Vue template section:

and Vue properties such as computed in the scripts section:

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

VS Code through the Volar extension Vue.js language service can also provide type definition information in the editor through Go to Definition (F12) or Peek Definition (Alt+F12). Put the cursor over the App, right-click and select Peek Definition . A Peek window opens showing the App definition from App.js.

Press Escape to close the Peek window.

Hello World 最小变化

Let's update the sample application to "Hello World!". In App.vue replace the HelloWorld component msg custom attribute text with "Hello World!".

复制代码
<template>
  <header>
    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />

    <div class="wrapper">
      <HelloWorld msg="Hello World!" />
    </div>
  </header>

  <main>
    <TheWelcome />
  </main>
</template>

Once you save the App.vue file (Ctrl+S), restart the server with npm run dev and 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 the Auto Save option in the File menu to turn on Auto Save or directly configure the files.autoSave user setting.



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 the Problems panel (View > Problems Ctrl+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 this conversation to use Vite/Vue.js 3 project with VS Code using Microsoft Edge.

For Vue CLI, which is now in maintenance mode, check out Vue.js debugging in VS Code recipe on the VS Code debugging recipes site to learn more.

Another popular tool for debugging Vue.js is the vue-devtools plug-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 is Volar for TypeScript.

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

Extension like Vue VS Code Snippets can be handy for Vue snippets. 代码片段(类似宏的功能)

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

相关推荐
爱编程的喵9 分钟前
React入门实战:从静态渲染到动态状态管理
前端·javascript
GDAL15 分钟前
vscode 插件开发activityba
vscode·编辑器
learn_coder17 分钟前
在vscode中和obsidian中使用Mermaid
ide·vscode·编辑器
Tttian62221 分钟前
npm init vue@latestnpm error code ETIMEDOUT
前端·vue.js·npm
唐叔在学习32 分钟前
不用装插件!3轮对话,我用油猴脚本+AI复刻了掘金闪念笔记,真香!
javascript·浏览器
AliciaIr33 分钟前
深入React事件机制:解密“合成事件”与“事件委托”的底层奥秘
javascript·react.js
元气小嘉1 小时前
前端技术小结
开发语言·前端·javascript·vue.js·人工智能
励志的大鹰哥1 小时前
V少JS基础班之第七弹
开发语言·javascript·ecmascript
cccyi71 小时前
Vue3基础知识
javascript·vue.js
江城开朗的豌豆2 小时前
Vue计算属性:为什么我的代码突然变优雅了?
前端·javascript·vue.js