Vue3 + Ts + Pinia + uni-app 学习笔记

W.Y.B.G

已于 2024-12-10 18:13:55 修改

阅读量1k

点赞数 3

分类专栏：笔记 uni-app 微信小程序文章标签： uni-app vue.js 小程序

于 2023-09-13 17:24:53 首次发布

本文链接：https://blog.csdn.net/qq_33365152/article/details/132859393

版权

本文是一篇关于Vue3、TypeScript、Pinia和uni-app的综合学习笔记，涵盖uni-app与原生小程序的区别、适合的学习人群、项目结构，以及创建、配置VS Code、网络请求封装、全局组件类型定义等内容。还涉及到uniCloud云开发的基础概念，包括云数据库和云函数。最后讲解了项目打包上线至微信小程序、H5、Android和iOS的流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue3 +Ts + Pinia + uni-app

第一部分
第二部分（重点）
第三部分
- 开发中的笔记
第四部分
第五部分
- uniCloud 云开发 - 基础概念
- - uniCloud 云开发 - 准备工作
第六部分

第一部分

uni-app 和原生小程序开发区别

每个页面是一个 .vue 文件，数据绑定及事件处理同 Vue.js 规范：
- 1、属性绑定 src=“{ { url }}” 升级成 :src=“url”
- 2、事件绑定 bind:tap=“eventName” 升级成 @tap=“eventName”。支持（）传参
- 3、支持 Vue 常用指令 v-for、v-if、v-show、v-model 等
- 温馨提示：调用接口能力，建议前缀 wx 替换为 uni，养成好习惯，这样支持多端开发。

适合人群

已经学过原生小程序，想要进阶 uni-app 技术栈的小伙伴
想要一套代码，同时覆盖小程序、H5、App 多端
学过 Vue3 + TS 基础，但是苦于没有项目练手的小伙伴
想要做小程序毕业设计的小伙伴

uni-app 项目文件结构目录说明

pages：业务页面文件存放的目录
- index
  - index.vue：index 页面
static：存放应用引用的本地静态资源的目录（注意：静态资源只能存放于此文件夹）
unpackage：非工程代码，一般存放运行或发行的编译结果
index.html：H5 端页面
main.js：Vue 初始化入口文件
App.vue：配置 App 全局样式、监听应用生命周期
pages.json：配置页面路由、导航栏、tabBar 等页面类信息
manifest.json：配置 appid、应用名称、logo、版本等打包信息
uni.scss：uni-app 内置的常用样式变量

入门案例 - `pages.json` 和 `tabBar`

pages.json：文件内容节点说明

pages：页面路由及窗口表现，示例代码如下：

"pages": [{
     
	"path": "pages/A/A",
	"style": {
     
		"navigationBarTitleText": "A"，
		"navigationStyle": "custom" // 自定义导航
	}

}, {
     
	"path": "pages/B/B",
	"style": {
     
		"navigationBarTitleText": "B"
	}

}, {
     
	"path": "pages/C/C",
	"style": {
     
		"navigationBarTitleText": "C"
	}

}, {
     
	"path": "pages/D/D",
	"style": {
     
		"navigationBarTitleText": "D"
	}

}],

globalstyle：默认窗口表现，示例代码如下：

"globalStyle": {
     
	"navigationBarTextStyle": "white",
	"navigationBarTitleText": "uni-app study project",
	"navigationBarBackgroundColor": "#1AAA9B",
	"backgroundColor": "#F8F8F8"
},

tabBar：至少两个菜显示，示例代码如下：

"tabBar": {
     
	"color": "#13227a", // tab 上的文字默认颜色
	"selectedColor": "#d81e06", // tab 上的文字选中时的颜色
	"list": [{
     
		"pagePath": "pages/A/A", // 页面路径
		"text": "A", // 页面标题
		"iconPath": "./static/img/A.png", // tab 图标默认颜色
		"selectedIconPath": "static/img/_A.png" // tab 图标选中时的颜色
	}, {
     
		"pagePath": "pages/B/B",
		"text": "B",
		"iconPath": "./static/img/B.png",
		"selectedIconPath": "static/img/_B.png"
	}, {
     
		"pagePath": "pages/C/C",
		"text": "C",
		"iconPath": "./static/img/C.png",
		"selectedIconPath": "static/img/_C.png"
	}, {
     
		"pagePath": "pages/D/D",
		"text": "D",
		"iconPath": "./static/img/D.png",
		"selectedIconPath": "static/img/_D.png"
	}]
},

第二部分`（重点）`

创建 `uni-app` 项目

第一种创建方法：通过 HbuilderX 创建
- 未做笔记
第二种创建方法：通过命令行创建
- 不需要依赖 Hbuilder 开发工具
- 官方说明文档地址
- 或者下载完整空项目
- 命令如下：
```
npx degit dcloudio/uni-preset-vue#vite-ts 项目名称
```

创建 JavaScript 开发的工程：
npx degit dcloudio/uni-preset-vue#vite（项目名称）
首先创建 uni-app 项目。笔记中通过命令行创建的项目，项目创建后安装依赖，并运行 npm run dev:mp-weixin 打包项目。

`VSCode 开发 vue3 + ts + uni-app 项目`

为什么选择 VS Code?

HbuilderX 对 TS 类型支持暂不完善
VS Code 对 TS 类型支持友好，熟悉的编辑器

配置 VS Code

安装 uni-app 插件

配置 vscode-snippets-uniapp

下载地址
下载后将css&js&vue-html三个文件放到项目根 .vscode 目录下(如果没有请手动创建)，重启vscode就可以拥有和 HBuilderX 一样的代码块。

通过 `微信开发者工具` 打开项目，项目位置如下图：

在这里插入图片描述

安装类型声明文件（TS声明文件）

1、微信小程序的类型声明
2、uni-app 的类型声明

npm install -D miniprogram-api-typings @uni-helper/uni-app-types

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: uni-preset-vue@0.0.0
npm ERR! Found: typescript@4.9.5
npm ERR! node_modules/typescript
npm ERR! dev typescript@“^4.9.4” from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer typescript@“^5.5.4” from @uni-helper/uni-app-types@1.0.0-alpha.3
npm ERR! node_modules/@uni-helper/uni-app-types
npm ERR! dev @uni-helper/uni-app-types@“*” from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR!
npm ERR! For a full report see:
npm ERR! C:\Users\ASUS\AppData\Local\npm-cache_logs\2024-08-21T01_36_01_224Z-eres

如果有以上报错信息无法安装请升级typescript版本到^5.5.4以上

配置 tsconfig.json 文件

{
   
  "extends": "@vue/tsconfig/tsconfig.json",
  "compilerOptions": {
   
    "sourceMap": true,
    "baseUrl": ".",
    "paths": {
   
      "@/*": ["./src/*"]
    },
    "lib": ["esnext", "dom"],
    "types": [
      "@dcloudio/types",
      "miniprogram-api-typings", // 新增配置
      "@uni-helper/uni-app-types", // 新增配置
    ]
  },
  // 校验 uni-app 组件类型
  "vueCompilerOptions": {
   
    "nativeTags": ["block", "component", "template", "slot"]
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

安装 `uni-ui`

官网
说明文档
安装 sass：

npm install sass -D

安装 sass-loader

npm i sass-loader@10.1.1 -D

安装uni-ui：

npm i @dcloudio/uni-ui

配置easycom（组件自动导入），在 pages.json 文件中

// pages.json
{
   
	"easycom": {
   
		"autoscan": true,
		"custom": {
   
			// uni-ui 规则如下配置
			"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
		}
	},
	
	// 其他内容
	pages:[
		// ...
	]
}

配置 uni-ui 的类型声明

npm install -D @uni-helper/uni-ui-types

配置 tsconfig.json 文件

// tsconfig.json
{
   
  "extends": "@vue/tsconfig/tsconfig.json",
  "compilerOptions": {
   
    "ignoreDeprecations": "5.0",
    "sourceMap": true,
    "baseUrl": ".",
    "paths": {
   
      "@/*": ["./src/*"]
    },
    "lib": ["esnext","dom"],
    "types": [
      "@dcloudio/types", // uni-app API 类型
      "miniprogram-api-typings", // 原生微信小程序类型
      "@uni-helper/uni-app-types" // uni-app 组件类型
    ]
  },
  // vue 编译器类型，校验标签类型
  "vueCompilerOptions": {
   
    "nativeTags": ["block","component","template","slot"],
  },
  "include": ["src/**/*.ts","src/**/*.d.ts","src/**/*.tsx","src/**/*.vue"]
}

安装 uview-plus

官网

安装

npm 方式安装

npm install uview-plus
npm install dayjs
npm install clipboard

配置

uview-plus依赖SCSS，您必须要安装此插件，否则无法正常运行。

`main.js`文件中添加如下配置：

// main.js
import uviewPlus from 'uview-plus'

// #ifdef VUE3
import {
    createSSRApp } from 'vue'
export function createApp() {
   
  const app = createSSRApp(App)
  app.use(uviewPlus)
  return {
   
    app
  }
}
// #endif

配置`scss`主题文件

在项目根目录的uni.scss中引入此文件。

@import 'uview-plus/theme.scss';

引入uview-plus基础样式

在App.vue中首行的位置引入，注意给style标签加入lang="scss"属性

<style lang="scss">
	/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
	@import "uview-plus/index.scss";
</style>

配置easycom组件模式

此配置需要在项目src目录的pages.json中进行。

// pages.json
{
   
	"easycom": {
   
		"autoscan": true,
		// 注意一定要放在custom里，否则无效，https://ask.dcloud.net.cn/question/131175
		"custom": {
   
			"^u--(.*)": "uview-plus/components/u-$1/u-$1.vue",
			"^up-(.*)": "uview-plus/components/u-$1/u-$1.vue",
	        "^u-([^-].*)": "uview-plus/components/u-$1/u-$1.vue"
		}
	},
	
	// 此为本身已有的内容
	"pages": [
		// ......
	]
}

typescript支持

在tsconfig.json中参考如下配置增加"uview-plus/types"

{
   
	"compilerOptions": {
   
    "sourceMap": true,
    "baseUrl": ".",
    "paths": {
   
      "@/*": ["./src/*"]
    },
    "lib": ["esnext", "dom"],
    "types": [
        "@dcloudio/types",
        "uview-plus/types"
    ]
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts"