首页 > 其他分享 >使用命令行创建vue3+Typescript的uni-app

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

时间:2023-12-27 22:45:40浏览次数:70  
标签:Typescript app vue ui pinia vue3 uni easycom 安装

目录

更具该文档创建好的模板: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降级,安装[email protected]版本

 # 删除package.json中pinia的依赖从新安装
 pnpm i [email protected]

标签:Typescript,app,vue,ui,pinia,vue3,uni,easycom,安装
From: https://www.cnblogs.com/ewar-k/p/17931582.html

相关文章

  • 打驴动漫app|免费看片儿神器|聚集全网影视资源
    今日语录:人世间的许多执念,你可以不理解,但并不代表它不存在各位看官大家好,walkdawn很高兴再次与大家见面。现在的影视平台能免费观看的作品越来越少,几乎都要vip,今天walkdawn给大家推荐一款可以免费看全网影视的软件--打驴动漫。有些看官看到这里,或许会因为这个软件的名字而下意......
  • MAC APPLE M2 芯片 mvn 打包问题
     使用applem1/m2芯片的系统mvnbuild项目时候会有很多问题mvnfile添加<settings>...<activeProfiles><activeProfile>apple-silicon</activeProfile>...</activeProfiles><profiles><profile>......
  • [App Service for Windows]通过 KUDU 查看 Tomcat 配置信息
    问题描述在AppService中选择了JavaTomcat后,如何查看AzureAppService的Tomcat的配置信息呢? 问题解答可以通过以下的3个步骤查看: 第一步:登录Kudu:方式一:在当前Web应用的URL中加入 .scm (插入位置在site名与chinacloudsites之间)。方式二:在当前Web应用的Azure......
  • [App Service for Windows]通过 KUDU 查看 Tomcat 配置信息
    问题描述在AppService中选择了JavaTomcat后,如何查看AzureAppService的Tomcat的配置信息呢? 问题解答可以通过以下的3个步骤查看: 第一步:登录Kudu:方式一:在当前Web应用的URL中加入 .scm (插入位置在site名与chinacloudsites之间)。方式二:在当前Web应用......
  • Sqoop连接数据库报错:Caused by: javax.net.ssl.SSLHandshakeException: No appropriat
    控制台报错:[[email protected]__hadoop-2.0.0-alpha]#./bin/sqooplist-databases--connectjdbc:mysql://192.168.45.10:3306--usernameroot--password1234562023-12-2802:58:50,807WARNtool.BaseSqoopTool:Settingyourpasswordonthecommand-linei......
  • 如何实现WinApp的UI自动化测试?自动化工具如何选择人?
    WinApp(WindowsAPP)是运行在Windows操作系统上的应用程序,通常会提供一个可视的界面,用于和用户交互。例如运行在Windows系统上的MicrosoftOffice、PyCharm、VisualStudioCode、Chrome,都属于WinApp。常见的WinApp,其扩展名基本都是*.exe,运行后也都会有一个漂亮、易用的UI界面,本章就......
  • uni-app和Vue.js有什么区别?
    Hello,大家好,我是咕噜铁蛋!在当今的前端开发领域,uni-app和Vue.js都是非常热门的技术。很多开发者经常在选择时感到困惑。今天铁蛋这篇文章讲和大家探讨这两者的区别,帮助各位在开发路上做出明智的选择。1.uni-app是一个使用Vue.js开发所有前端应用的框架,支持一次编译多端运行。开发者......
  • app成交人数
    droptableappcjrsselecta1.日期2,day(a1.日期2)as日,convert(varchar(7),a1.日期2,111)as年月,a1.kacnapp售出人数,a1.kacnapp累计售出人数,a2.kltapp售出人数,a2.kltapp累计售出人数,isnull(a1.kacnapp售出人数,0)+isnull(a2.kltapp售出人数,0)as两站售出人数,isnull(a1......
  • springboot 中,ApplicationRunner、InitializingBean、@PostConstruct 执行顺序
    划水。。。ApplicationRunner、InitializingBean、@PostConstruct执行顺序InitializingBean是Spring提供的一个接口,它只有一个方法afterPropertiesSet(),该方法会在容器初始化完成后被调用。ApplicationRunner是SpringBoot提供的一个接口,它有一个方法run(),该方法会在......
  • 苹果app多种发布方式
    苹果app的发布方式主要分为:  appstore:对外开放的,只要有appleId账户即可搜索下载;  TestFlight:对外发布的测试版本,可以通过appleId邀请指定的账户进行测试,或者通过兑换券进行下载;  分发平台:第三方分发或者自己分发(不对外开放的app)1、appstore苹果商店app,开发完成,提交给苹......