1. 为什么选择VSCode开发uni-app很多刚接触uni-app的开发者可能习惯了使用官方推荐的HBuilderX但作为一个长期使用VSCode的老鸟我发现VSCode在以下几个方面确实更胜一筹首先VSCode的插件生态简直不要太丰富。我平时还会写Python、Go等其他语言用VSCode一个编辑器就能搞定所有开发需求不用来回切换IDE。而且VSCode的Git集成、终端集成用起来特别顺手调试代码的时候特别方便。其次团队协作时VSCode的优势更明显。我们团队之前用HBuilderX就遇到过项目配置同步的问题换成VSCode后配合Git管理项目配置新人加入团队时环境搭建特别快。最重要的是VSCode的性能确实更好特别是项目文件多了之后打开速度明显比HBuilderX快不少。不过说实话刚开始从HBuilderX转到VSCode确实需要适应一下主要是要自己配置一些东西。但配置一次之后后面所有项目都能复用这个投入绝对值得。下面我就把我这几年总结的最佳实践分享给大家。2. 环境准备与项目创建2.1 安装必备工具链在开始之前我们需要确保系统已经安装了Node.js建议LTS版本和npm。我建议使用nvm来管理Node版本这样可以很方便地切换不同项目需要的Node版本。安装完Node后建议配置淘宝镜像源能大幅提升安装速度npm config set registry https://registry.npmmirror.com接下来安装Vue CLI这是创建uni-app项目的基础npm install -g vue/cli这里有个小技巧如果你之前安装过旧版本的Vue CLI建议先卸载再安装新版npm uninstall -g vue-cli npm install -g vue/cli2.2 创建uni-app项目使用Vue CLI创建uni-app项目非常简单vue create -p dcloudio/uni-preset-vue my-uni-app执行这个命令后CLI会提示你选择项目模板。我一般会选择默认模板因为它包含了最基础的配置后续我们可以按需添加功能。创建完成后用VSCode打开项目code my-uni-app第一次打开项目时VSCode可能会提示你安装推荐的插件这个我们稍后再详细说。3. 必备插件与配置3.1 基础插件安装VSCode的强大之处在于它的插件系统。对于uni-app开发这几个插件必不可少Volar取代Vetur的Vue 3官方支持插件提供更好的TypeScript支持uni-app-snippets提供uni-app特有的代码片段ESLint代码质量检查工具Prettier代码格式化工具SCSS IntelliSense如果你使用SCSS预处理器安装完这些插件后建议配置VSCode的settings.json让ESLint和Prettier配合工作{ editor.formatOnSave: true, editor.defaultFormatter: esbenp.prettier-vscode, eslint.validate: [javascript, javascriptreact, vue], vetur.validation.template: false }3.2 增强语法提示虽然Volar已经提供了不错的Vue语法提示但uni-app特有的API还需要额外配置。首先安装官方提供的类型定义文件npm install dcloudio/uni-helper-json --save-dev然后在项目根目录创建jsconfig.json文件{ compilerOptions: { baseUrl: ., paths: { /*: [./src/*] }, types: [dcloudio/types] }, exclude: [node_modules, dist] }这样就能获得接近HBuilderX的代码提示体验了。我实测下来常用的uni API如uni.navigateTo、uni.request等都能准确提示。4. 样式与预处理器配置4.1 SCSS配置uni-app默认支持SCSS但需要手动安装相关依赖。这里有个坑要注意sass-loader的版本兼容性问题。经过多次测试我发现7.3.1版本最稳定npm install node-sass sass-loader7.3.1 --save-dev安装完成后在vue.config.js中添加配置module.exports { css: { loaderOptions: { scss: { additionalData: import /styles/variables.scss; } } } }这样就能在项目中全局使用SCSS变量和混合了。我习惯在src目录下创建styles文件夹存放各种全局样式文件。4.2 解决常见样式问题在uni-app开发中样式隔离是个常见问题。特别是在小程序平台有时候样式会莫名其妙不生效。我的经验是尽量避免使用深层选择器如或/deep/因为小程序不支持组件样式最好加上scoped属性全局样式尽量写在App.vue中如果遇到样式不生效的情况可以尝试在样式属性前加上!important或者检查是否是选择器权重问题。5. 多平台调试与发布5.1 微信小程序调试调试微信小程序是uni-app开发中最常见的需求之一。首先确保你已经安装了微信开发者工具并且设置了正确的安装路径。在项目根目录运行npm run dev:mp-weixin这个命令会在dist/dev/mp-weixin目录下生成小程序代码。打开微信开发者工具导入这个目录即可。这里有个实用技巧我习惯在package.json中添加一个快捷命令scripts: { wx: npm run dev:mp-weixin -- --watch }这样只需要运行npm run wx就能启动小程序开发模式--watch参数会监听文件变化自动重新编译。5.2 其他平台调试uni-app支持多平台调试常用的命令包括H5平台npm run dev:h5支付宝小程序npm run dev:mp-alipay百度小程序npm run dev:mp-baidu字节跳动小程序npm run dev:mp-toutiao需要注意的是App平台iOS/Android的调试还是需要依赖HBuilderX这是目前的一个限制。5.3 发布构建当项目开发完成后可以使用build命令进行生产环境构建npm run build:mp-weixin构建产物会输出到dist/build/mp-weixin目录。微信小程序的发布流程是在微信开发者工具中点击上传登录微信公众平台提交审核审核通过后发布新版本我建议在package.json中为每个平台都配置对应的build命令方便团队协作。6. 高级配置与优化6.1 自定义条件编译uni-app的条件编译非常强大可以在不同平台使用不同的代码。在VSCode中我们可以通过注释来实现条件编译的代码提示// #ifdef MP-WEIXIN console.log(这段代码只会在微信小程序中执行) // #endif为了让VSCode能正确识别这些注释需要安装uni-app插件并在settings.json中添加{ uni-app.conditionalCompilation: true }6.2 性能优化建议经过多个uni-app项目的实践我总结出几个性能优化技巧合理使用分包加载小程序主包大小限制为2M超过就需要分包图片资源尽量使用CDN减少包体积避免在页面onLoad中执行耗时操作使用v-if替代v-show减少DOM节点数合理使用uni-app的onReachBottom等生命周期函数6.3 调试技巧在VSCode中调试uni-app项目可以配置launch.json{ version: 0.2.0, configurations: [ { type: chrome, request: launch, name: 调试H5, url: http://localhost:8080, webRoot: ${workspaceFolder} } ] }这样就能直接在VSCode中调试H5端的代码了。对于小程序调试虽然不能直接在VSCode中调试但可以使用微信开发者工的源代码映射功能将编译后的代码映射回源代码。7. 常见问题解决在实际开发中我遇到过不少坑这里分享几个典型问题的解决方案问题1npm install报错这通常是因为node-sass安装失败导致的。解决方法要么是使用cnpm安装要么是先单独安装node-sassnpm install node-sass --sass_binary_sitehttps://npm.taobao.org/mirrors/node-sass/问题2页面样式不生效检查是否在pages.json中正确配置了页面路径以及样式文件路径是否正确。有时候需要重启dev server才能生效。问题3小程序真机调试白屏这可能是由于开发者工具没有开启不校验合法域名选项。在微信开发者工具的详情 - 本地设置中勾选这个选项。问题4H5端路由跳转问题在H5端uni.navigateTo实际上是使用history API实现的。如果部署到非根目录需要在manifest.json中配置router的base参数。