uni-app是企业常用的框架。随着vue3的流行，很多公司的项目都开始使用vue3+uni-app+vite来开发项目。记录并分享我在过程中遇到的问题。1、npx和npm的区别。npm很熟悉，但是和npm如此相似的npx到底是干什么的呢？我们为什么要介绍npx？既然uni-app官方提供了使用npx的创建命令，那我们先来了解下npx是做什么的？它与npm有何不同。npx是npm的高级版本，从npmv5.2引入，与npm捆绑，无需额外安装，功能更强大。npx是npmexec的别名，如果没有，可以手动安装：npminstall-gnpx。区别：npm只能通过package.json中的定义来执行命令，而npx可以直接执行node_module包中的命令。npx可以指定node和命令的版本，解决不同项目使用不同版本命令的问题。临时安装可执行依赖，不需要全局安装，也不需要长期污染。二、使用Vue3/Vite版本创建项目1、创建js开发的项目：npxdegitdcloudio/uni-preset-vue#vitemy-vue3-js执行命令后会自动创建项目，然后执行:cdmy-vue3-js//进入my-vue3-js项目执行：npminstall依赖下载完成后，可以使用命令：npmrundev:h5启动web服务。至此，项目创建完成，可以预览了：2.创建一个用typeScript开发的项目。创建命令：npxdegitdcloudio/uni-preset-vue#vite-tsmy-vue3-project回车开始创建报错：couldnotfetchremotehttps://github.com/dcloudio/uni-prset-vue,due由网络或域阻塞引起的错误。可以直接打开github地址：https://github.com/dcloudio/uni-preset-vue。或者gitee下载地址：https://gitee.com/dcloud/uni-preset-vue/repository/archive/vite-ts.zip。下载zip存档。解压后运行：npminstall安装依赖后，可以使用：npmrundev:h5正常运行项目。如果对uni-app项目不熟悉，可以到官网查看其运行命令及其含义。官方创建文档地址：https://uniapp.dcloud.io/quickstart-cli.html#%E5%88%9B%E5%BB%BAuni-app。三、项目结构及功能以uni-app+vue3+vite+ts项目为例。项目结构目录如图：index.html首页入口文件。package.json项目配置文件。tsconfig.json打字稿配置文件。vite.config.tsvite的配置文件。src存放开发资源文件，基本要做的事情都在这个目录下，里面包含几个目录文件：pages存放所有的页面文件，我们创建的页面组件都放在这个文件夹下。static存放静态资源的文件夹。App.vue页面入口文件，所有页面都在App.vue下切换。env.d.ts第三方模块的类型声明文件。main.ts项目入口文件，由于使用ts语法，所以后缀为.ts。mainfest.json应用配置文件，用于指定应用名称、图标、权限等pages.json全局配置文件，可以配置页面文件路径、窗口样式、原生导航栏、底部标签栏等uni.scss是uni-app的样式包，样式包中的样式可以在其他文件中快速引用。
