使用VScode开发uni-app

•  使用VScode开发uni-app

1. 工作区禁用 Vetur 插件(Vue2 插件和 Vue3 插件冲突)
2. 工作区禁用 @builtin typescript 插件（禁用后自动开启 Vue3 的 TS 托管模式）
3. 安装 uni-app 开发插件
   • uni-create-view ：快速创建 uni-app 页面
   • uni-helper ：uni-app 代码提示
   • uniapp 小程序扩展 ：鼠标悬停查文档
4. TS 类型校验
   • 安装 类型声明文件 pnpm i -D miniprogram-api-typings @uni-helper/uni-app-types
   • 配置 tsconfig.json
5. JSON 注释问题
   1. 设置文件关联，把 manifest.json 和 pages.json 设置为 jsonc

      //setting.json
      {
      
        // 配置语言的文件关联
        "files.associations": {
          "pages.json": "jsonc", // pages.json 可以写注释
          "manifest.json": "jsonc" // manifest.json 可以写注释
        }
      }
      
      

• 引用uni-ui

1.  uni-app官网 (dcloud.net.cn)中，开始使用。进行如下操作

   npm i sass -D
   npm i sass-loader -D
   npm i @dcloudio/uni-ui
   
   // pages.json
   {
   	"easycom": {
   		"autoscan": true,
   		"custom": {
   			// uni-ui 规则如下配置
   			"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
   		}
   	},
   	
   	// 其他内容
   	pages:[
   		// ...
   	]
   }
   
   
   //安装类型声明文件
   
   npm i -D @uni-helper/uni-ui-types
   
   
   // tsconfig.json
   {
     "compilerOptions": {
       // ...
       "types": [
         "@dcloudio/types", // uni-app API 类型
         "miniprogram-api-typings", // 原生微信小程序类型
         "@uni-helper/uni-app-types", // uni-app 组件类型
         "@uni-helper/uni-ui-types" // uni-ui 组件类型  
       ]
     },
     // vue 编译器类型，校验标签类型
     "vueCompilerOptions": {
       "nativeTags": ["block", "component", "template", "slot"]
     }
   }

•  在微信小程序中运行uni-app

1. 打开manifest.json。搜索：mp-weixin，配置appid（小程序ID）
2. npm run dev:mp-weixin。在微信开发工具导入dist/dev/mp-weixin就可