SFC

SFC（Single File Component）由三部分组成：

<template></template>：一个文件内只能有一个

<script></script>：一个文件内可以有多个，但只能有一个 script 加上 setup 属性

<style></style>：一个文件内可以有多个

VScode 插件

在扩展中搜索 volar
安装 Vue Language Features (Volar) 和 TypeScript Vue Plugin (Volar) ，可以产生 vue3 和 ts 的智能提示
如果安装了 Vetur（vue2 的智能提示），要禁用或者卸载，不然会和 vue3 的产生冲突
设置 vue3 模板代码生成的快捷键

(1) 依次操作：Ctrl+Shift+P ——> 首选项:配置用户代码片段 ——> 新建全局代码片段文件 ——> 为文件起名 ——> 去掉Example以下的注释 ——> 设置scope:快捷键生效区域；prefix:快捷键前缀；body:点击快捷键要生成的全部代码

(2) 示例

{
    // Example:
    "Print to console": {
        "scope": "vue",
        "prefix": "v3",
        "body": [
                "<template>",
                "$2",  // 初始光标悬停位置
                "</template>",
                "",
                "<script setup lang=\"ts\">",
                "",
                "</script>",
                "",
                "<style scoped>",
                "",
                "</style>"
        ],
        "description": "Log output to console"
    }
}

npm run dev 过程

当执行 npm run 时，会找到 package.json 文件中 "scripts" 下的命令

{
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc && vite build",
    "preview": "vite preview"
  }
}

比如 npm run dev，那么就会运行 vite

可以看到，在 node_modules/.bin/ 下有三个 vite 文件，分别是 vite(UNIX)、vite.cmd(Windows)、vite.ps1（跨平台）

执行过程：

先在本地的 node_modules 下找有没有 vite 可执行
如果没有就到 全局（npm i -g）去找
如果没有就到环境变量里面找
如果还找不到就报错

【Vue3】02-SFC & VScode 插件 & npm run dev 过程

SFC

VScode 插件

npm run dev 过程