uni-app 它是公司常用的框架 vue3 随着公司的普及，许多公司的项目已经开始使用 vue3 uni-app vite 开发项目，记录和分享我在这个过程中遇到的问题。

一、npx 与 npm 区别

npm 都很熟，但是和 npm 如此相似的 npx 为什么？为什么要介绍？ npx ?

由于 uni-app 官方提供创建命令使用 npx，让我们先了解一下 npx 是干什么的？ npm 的区别。

npx 是 npm 高级版，它从 npm v5.2 和 npm 无需额外安装，绑定在一起功能更大。npx 是 npm exec 如果没有别名，可以手动:npm install -g npx 进行安装。

区别：

npm 只能通过 package.json 定义然后执行命令，npx 可直接执行 node_module 包里的命令。npx 可以指定 node 、命令版本解决了不同项目使用不同版本的命令问题。临时安装可执行依赖包，无需全面安装或长期污染。2、使用 Vue3/Vite 版创建项目

2.1、创建 js 开发项目：

npx degit dcloudio/uni-preset-vue#vite my-vue3-js

执行命令后，项目将自动创建，然后执行：

cd my-vue3-js // 进入my-vue3-js项目

执行：

npm install

下载完成后，可以使用命令：

npm run dev:h5

启动网页服务。到目前为止，项目已经完成，并且可以预览：

2.2、创建以 typeScript 开发的项目

创建命令：

npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project

回车创建时会报错:could not fetch remote https://github.com/dcloudio/uni-prset-vue，网络或域名拦截造成的错误。

可直接打开 github 地址：https://github.com/dcloudio/uni-preset-vue

或者 gitee 下载地址：https://gitee.com/dcloud/uni-preset-vue/repository/archive/vite-ts.zip

下载 zip 压缩包。

解压后，运行：

npm install

安装依赖完成后，可使用：

npm run dev:h5

项目可以正常运行。

如果不熟悉 uni-app 该项目的学生可以在官方网站上查看其操作命令及其意义。

官方文件地址：https://uniapp.dcloud.io/quickstart-cli.html#创建uni-app

三、项目结构及作用

以 uni-app vue3 vite ts 例如，项目结构目录如图所示：

index.html 主页入口文件。package.json 项目配置文件。tsconfig.json typescript 配置文件。vite.config.ts vite 配置文件。

src 存储和开发资源文件，基本要做的事情都在这个目录中，包括几个目录文件：

pages 存储所有页面文件，将我们创建的页面组件放入文件夹中。static 存储静态资源的文件夹。App.vue 页面入口文件，所有页面都在 App.vue 下切换。env.d.ts 类型声明文件的第三方模块。main.ts 因为使用了项目入口文件， ts 语法，所以后缀是 .tsmainfest.json 指定应用名称、图标、权限等。pages.json 全局配置文件，可配置页面文件路径、窗口样式、原tab栏等。uni.scss 是uni-app样式包，以在其他文件中快速引用样式包中的样式。