摘要：对于熟悉 Vue 语法的开发者来说，用 UniApp 开发微信小程序堪称 "无缝衔接"。本文放弃传统的 HBuilderX，改用更受欢迎的 VSCode 作为开发工具，通过最简单的 Hello World 示例，带你走完从开发到发布的完整流程，30 分钟即可上
对于熟悉 Vue 语法的开发者来说，用 UniApp 开发微信小程序堪称 "无缝衔接"。本文放弃传统的 HBuilderX，改用更受欢迎的 VSCode 作为开发工具，通过最简单的 Hello World 示例，带你走完从开发到发布的完整流程，30 分钟即可上手。
打开 VSCode，在扩展面板搜索并安装：
Volar：Vue 3 官方推荐插件，提供语法高亮和智能提示（替代旧版 Vetur）UniApp Snippets：UniApp 代码片段，输入u-可快速生成组件代码WeChat Mini Program Tools：微信小程序相关辅助工具npm install -g @vue/cli @dcloudio/uni-clivue create -p dcloudio/uni-preset-vue my-first-mini选择模板：键盘上下键选择「default (Vue 3 + Vite)」，回车确认进入项目目录：cd my-first-mini安装依赖：pnpm installmy-first-mini/├─ src/│ ├─ pages/ # 页面目录（每个页面一个文件夹）│ │ └─ index/ # 首页│ │ ├─ index.vue # 首页组件（核心文件）│ ├─ App.vue # 应用入口组件│ ├─ main.js # 入口文件│ └─ pages.json # 页面路由配置└─ manifest.json # 项目配置（含小程序AppID）打开src/pages/index/index.vue，替换为以下代码：
{{ message }}点击修改内容// Vue3语法：响应式数据import { ref } from 'vue'const message = ref('Hello World! ')// 点击事件处理函数const changeMessage = => {message.value = '你已掌握UniApp基础用法！'}/* 样式部分（支持Vue单文件组件语法） */.container {display: flex;flex-direction: column;align-items: center;padding-top: 200rpx;}.title {font-size: 36rpx;margin-bottom: 40rpx;}.btn {background-color: #007aff;color: white;padding: 15rpx 30rpx;border-radius: 8rpx;}熟悉 Vue 的开发者会发现：语法完全一致！只需注意将 div 换成 view，span 换成 text 等小程序规范标签。
npm run dev:mp-weixin命令执行成功后，会在项目根目录生成dist/dev/mp-weixin文件夹（微信小程序编译结果）
打开微信开发者工具：点击「+ 新建项目」项目目录选择刚才生成的mp-weixin文件夹测试阶段可选择「测试号」（无需 AppID）点击「确定」即可看到运行效果实时调试：在 VSCode 中修改代码并保存，会自动编译微信开发者工具会实时刷新，无需手动操作可在微信工具中使用「调试器」查看日志和断点调试对于熟悉 Vue 的开发者来说，UniApp+VSCode 组合几乎没有学习成本。本文通过 Hello World 示例，展示了从环境搭建到发布的完整流程，核心步骤仅需 5 步：安装工具→创建项目→编写代码→运行调试→上传发布。
后续可尝试添加路由跳转、数据请求等功能，逐步构建复杂应用。如果遇到问题，欢迎在评论区交流～
来源：热数层工作室