开发环境 IDE

. Live Server

. Vue Official - volar

. Vue VSCode Snippets

. Prettier - Code formatter

Google Chrome

. vue.js devtools

. FeHelper

[] 定制模板

Vs Code 的扩展 Vue VSCode Snippets 提供了很多内置的代码片段；在新组件中，输入vb或v3后，选择 vbase-3-setup 可以快速生成模板

默认采用带根节点的结构 <template>、逻辑 <script>在结构 <template> 后面；样式 <style> 使用 CSS 预处理器 scss

调整为：逻辑在最前面、去掉根节点、不带 CSS 预处理

1. 打开用户目录 → .vscode → 扩展 extension → vue-vscode-snippets → snippets → vue.json，定位到 vbase-3-setup

2. 删除结构 <template> 中的根节点 <div>

3. 移动逻辑 <script>到最上面

4. 保存并重启 Vs Code，扩展生效

"Vue Single File Component Setup Composition API": {
    "prefix": "vbase-3-setup",
    "body": [
        "<script setup>",
        "",
        "</script>",
        "",
        "<template>",
        "",
        "</template>",
        "",
        "<style scoped>",
        "",
        "</style>"
    ],
    "description": "Base for Vue File Setup Composition API with SCSS"
}

<script setup>
//逻辑
</script>
                
<template>
    //结构
</template>

<style scoped>
    //样式
</style>

Third Party

Other