[多端小程序]uniapp+vue3+ts+pinia+vite+sass+uview-plus

官方网站

1. Uniapp
2. uView-plus

搭建

项目文件结构

• src
  • components
  • storepinia使用的地方
  • styles
  • utils
  • types存放对象内部字段/类型
    • xxxx.d.ts相当于java里的model

通过脚手架初始化项目

1. 脚手架为uniapp vue3 ts vite
2. 执行命令npx degit dcloudio/uni-preset-vue#vite-ts 项目名称（挂梯子下载更快）
3. 下载依赖pnpm install
4. 在微信小程序平台获取APP ID，并填入manifest.json - mp-weixin - appid
5. 运行微信开发者工具，执行pnpm dev:mp-weixin，即可运行调试画面

VS Code插件初始化

1. Uniapp - 下载以下插件
   • uni-create-view
   • uni-helper
   • uniapp小程序扩展
2. Vue3 - 下载以下插件
   • Vue Official[无法下载看这里]

安装TypeScript

1. 执行命令 pnpm i -D @types/wechat-miniprogram @uni-helper/uni-app-types
2. 打开tsconfig.json，新增以下内容
3. 安装完成，组合键command+i可以唤出提示

安装Sass(使用uview-plus的前置安装)

1. Sass报警@import - 在sass1.8.0以上版本报错Deprecation Warning: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0. 因为新版本Sass的@use语法较为激进，如果升级为@use将会是破坏式更新，所以推荐将sass固定在以下版本结局报警。
   • "sass": "^1.63.2"
   • "sass-loader": "^10.4.1"
2. 参考npm安装

安装uni-ui

1. uni-ui pnpm i @dcloudio/uni-ui
2. 在tsconfig.json的types中添加"@uni-helper/uni-ui-types"

安装uview-plus

1. uni-ui pnpm i @dcloudio/uni-ui
2. uview-plus pnpm install uview-plus
3. 参考文章：main.ts引入uView-plus，配置easycom
   • 配置方案1
   • 配置方案2

安装pinia

1. 执行命令pnpm i pinia
2. 在main.ts中写入如下代码

store目录的规划

1. 定义在src下，modules里存放不同类型的store，最后由顶层的index.ts统一输出

跨端注意

请仔细阅读官方文档

语法

问题解决

Vue Official下载不了

• 安装Vue-Official，如果报错版本不是适配，Vue-Volar无法下载
• 第一步：下载vue-volar.vsix
• 第二步：查看vscode的版本，把vue-volar.vsix的后缀改为vue-volar.zip，解压后打开extension下的package.json，把以下两个内容改为vscode版本

• 第三步：压缩vue-volar文件夹，并把vue-volar.zip后缀改回vue-volar.vsix
• 第四步：打开vscode，选择以vsix运行

• 注：如果报错zip中找不到package.json,请下载vsce，从终端进入，在vue-volar.vsix的extension文件夹下执行vsce package，然后选择最新打包出来的文件执行第四步

解决json文件注释标红的现象

打开设置，搜索文件关联，添加这两个文件，并把值设置为jsonc，注意：只允许这两个文件加。其他不行！