开始

uni-appHbuilder X

uni-app

 uni-app

pages.jsonmanifest.jsonAPI

uni-app

文章比较长，写的也比较详细，小白也能看懂。

初始化项目

我们使用 vue2 创建工程作为示例，uni-app中Vue2版的组件库和插件也比较多，稳定、问题少，可以先参考下官方文档：通过vue-cli命令行

@vue/cli

注意：Vue2创建的项目，脚手架版本要用@4的版本，用@5的版本运行项目会报错，这里推荐 @4.5.15

npm install -g @vue/cli@4.5.15
复制代码

创建项目，后面是你的项目名字。

vue create -p dcloudio/uni-preset-vue uni_vue2_cli
复制代码

这里我们选择默认模板。

srcHbuilderX

scssvetursass

tsconfig.json报错问题

tsconfig.jsontstsconfig.jsonjsconfig.json

增强pages.json和manifest.json开发体验

json文件写注释

pages.jsonmanifest.jsonjsonjsonc

pages.jsonmanifest.jsonjsoncsettings.json

jsonjsoncjsonpackage.jsonpackage.json

语法提示

pages.jsonmanifest.json

而且鼠标悬浮还有提示，相当的贴心了。

内联颜色修饰器

jsonuni-app-schemaspages.jsonuni-appColor Highlight

路径提示

pages.json

如果使用这个插件的话，建议关掉VSCode默认的自动完成

"typescript.suggest.paths": false
"javascript.suggest.paths": false
复制代码

tsconfig.jsonjsconfig.jsonVScodepath-intellisense.mappingstsconfig.json

jsconfig.json

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"]
    },
    "types": ["@dcloudio/types", "miniprogram-api-typings", "mini-types"]
  }
}
复制代码

Image preview

"gutterpreview.showImagePreviewOnGutter": false,// 关闭在行号中显示缩列图
复制代码

最终到达的效果

一键创建页面、组件、分包

paegs,json

条件编译注释高亮

在Hubilder X条件注释是有高亮的，以便区分开普通注释，在VSCode也有对应的插件可以实现，不得不说，VSCode的生态真的太好了，要啥插件都有。

volar

这个插件可以定制化我们的注释，比如颜色、加粗、斜体，怎么好看怎么来。

"better-comments.tags":[
  {
    "tag": "#",
    "color": "#18b566",
    "strikethrough": false,
    "underline": false,
    "backgroundColor": "transparent",
    "bold": true,
    "italic": false
   },
]
复制代码

API，组件，uni.scss语法提示

API语法提示

uni-appApitscongfig.jsonjsconfig.json

uniwxmy

组件提示

npm i @dcloudio/uni-helper-json
复制代码

vue3uni-app-types@dcloudio/uni-helper-jsonvue3

npm i -D uni-app-types
复制代码

tsconfig.jsonjsconfig.jsoncompilerOptions.typesvueCompilerOptionsincludevue

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"]
    },
    "types": ["@dcloudio/types", "uni-app-types"]
  },
 "vueCompilerOptions": {
    "experimentalRuntimeMode": "runtime-uni-app"
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}
复制代码

uni-cloud-typesuni-ui-types

还有其他的，可以去这个uni-helper看看。

代码块

uni.scss变量提示

注意：cli创建的uni-app项目，跟web项目一样，需要安装对应的sass模块，才能写scss。安装sass-loader，建议版本@10，否则可能会导致vue与sass的兼容问题而报错。

npm i sass sass-loader@10 -D
复制代码

SCSS IntelliSensescss

运行、发布项目

package.json

• npm run dev:%PLATFORM%
• npm run build:%PLATFORM%

npm run dev:mp-weixin

npm

VSCodeHbuilder x 

manifest.jsonappid

在微信开发者工具导入打包出来的文件夹。

然后，就可以愉快的写代码了。不管是运行项目，还是差量化编译速度还是非常快的。

使用 vue3 创建工程

尤雨溪宣布Vue 3 在 2022 年 2 月 7 日成为新的默认版本，但目前uni-app对应的Vue3的组件库和插件太少了，生态还不成熟。容易遇到问题，不太推荐直接拿去做业务。

vitevite

@dcloudio/uvm

npx @dcloudio/uvm
复制代码

javascript

npx degit dcloudio/uni-preset-vue#vite uni_vue3_cli
复制代码

APItsconfig.json

npm i @dcloudio/types miniprogram-api-typings mini-types -D
复制代码

Vue3VolarVite

DCloud插件市场的使用

npmnpmuViewUInpmzip压缩包uCharts

这点确实没有Hbuilder X方便，不过导入第三方插件这种事情不是经常做，这还是可以接受的。

结语

2022.09 更新：

目前，仓库已经同步uni-app官方最新cli模板，另外我还上传了vue3+vite+ts的版本，可当做示例来供来学习参考。

🚀🚀🚀Github仓库地址：uni-vscode-template。

总的来说，配置起来还是比较麻烦的，插件也比较多，但最终获得体验也是非常不错的。

uni-appuni-app

settings.json

感谢读完本篇文章，希望对你能有所帮助，如有问题或有自己实用的技巧欢迎在评论区分享和讨论。

创作不易，希望可以点个赞支持一下❤️❤️。