使用命令行创建vue3+Typescript的uni-app

发布时间 2023-12-27 22:36:23作者: Ewar-k

更具该文档创建好的模板:GitHub仓库地址,克隆下来安装依赖即可

创建项目

官方文档--创建uni-app

以创建vue3+ Typescript工程为例,使用下列命令行:

# 网络不好的话会创建失败,可以前往gitee下载
npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project

gitee下载地址

下载完成解压后,在根目录下执行

# 安装依赖
pnpm install

# 使用 @dcloudio/uvm 管理编译器的版本,更新到最新版本,与HbuilderX保持一致
npx @dcloudio/uvm@latest

# 运行到安卓APP
pnpm dev:app-android

运行后命令行会提示:运行方式:打开 HBuilderX, 导入 dist\dev\app 运行。,我们只需打开HbuilderX导入运行,但是这样我们修改代码后是么有热更新的,需要手动重启。
解决办法是将整个项目导入到HbuilderX中并运行,用别的编辑器编写代码。

扩展组件uni-ui

安装

# 需要安装sass
 pnpm add sass -D

# 安装uni-ui
pnpm i @dcloudio/uni-ui

配置easycom

打开项目根目录下的 pages.json 并添加 easycom 节点:

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

easycom官方文档

uni-ui 现在只推荐使用 easycom ,如自己引用组件,可能会出现组件找不到的问题

安装pinia报vue.hasInjectionContext is not a function

这是因为pinia与vue版本不兼容问题导致的,uniapp内置的vue版本为3.2.47,而pinia的版本在2.1.x之后就要求vue版本为3.3,解决办法就是给pinia降级,安装pinia@2.0.35版本

 # 删除package.json中pinia的依赖从新安装
 pnpm i pinia@2.0.35