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.

相关推荐
前端农民工ws25 分钟前
Vue 框架的 markdown 渲染组件,针对 AI 的 markdown 流式传输场景
前端·javascript·vue.js·ai
理想国的女研究僧35 分钟前
Jupyter Notebook操作指南(1)
ide·python·学习·jupyter
百思可瑞教育1 小时前
Vue 生命周期详解:从初始化到销毁的全过程剖析
前端·javascript·vue.js·前端框架·uni-app·北京百思可瑞教育·百思可瑞教育
星语卿2 小时前
Vuetify:构建优雅Vue应用的Material Design组件库
前端·javascript·vue.js
wangbing11253 小时前
界面规范11-对话框
javascript·vue.js·elementui
不一样的少年_3 小时前
Vue3 后台分页写腻了?我用 1 个 Hook 删掉 90% 重复代码(附源码)
前端·vue.js·设计模式
一枚前端小能手3 小时前
🔥 滚动监听写到手抽筋?IntersectionObserver让你躺平实现懒加载
前端·javascript
我是日安3 小时前
从零到一打造 Vue3 响应式系统 Day 5 - 核心概念:单向链表、双向链表
前端·vue.js
遂心_3 小时前
React中的onChange事件:从原理到实践的全方位解析
前端·javascript·react.js
GHOME3 小时前
原型链的原貌
前端·javascript·面试