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

合集 - uni-app(3)

1.uni-app开发记录2023-12-092.uni-app使用夜神模拟器调试2023-12-09

3.使用命令行创建vue3+Typescript的uni-app2023-12-27

收起

目录

• 创建项目
• 扩展组件uni-ui
  • 安装
  • 配置easycom
• 安装pinia报vue.hasInjectionContext is not a function

更具该文档创建好的模板：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